Blog Font Style with CSS - Text Effects

This is part five of the five part Blog Font Style series.

You've learned so much this week! Now you can find the CSS selectors for your text, specify your font families, and set your font's size, weight, and style. And, you can set the line height, spacing, and alignment of your text with the best of them. Now you're ready to start getting decorative with some CSS text effects!

I'm going to show real examples of these techniques in this tutorial. If you're reading on an RSS reader, you may need to come over to the live site see the CSS in action.

Color

It's easy to set text color with CSS. Here's an example of a CSS text color declaration:

p { color: #A071AD; }

And here's how the selected paragraph would look in the browser:

This paragraph is purple!

You can use one of the dozens of web color names, a HEX color code, or an RGB color code to set your text's color. For more on finding your color values, check out this tutorial.

Text Shadow

Text shadow allows for some amazing text "special effects". I'm just going to show a brief example now, but be sure to check out the Further Reading at the end of this post for links to tutorials that show just how much you can do with this simple CSS declaration.

Here's a very, very basic example of text shadow at work:

p { text-shadow: 1px 1px 1px blue; }

I have a shadow, and it's blue!

In a text-shadow declaration, the three pixel values each do something different. Here's how they work:

The first sets the horizontal distance of the shadow from the text. If it's a positive number, the shadow falls to the right of the text. If it's negative, it falls to the left.

The second sets the vertical distance of the shadow from the text. If it's positive, the shadow falls below the text. If it's negative, it falls above the text.

The third sets the blur radius of the shadow. The higher the pixel value, the blurrier it gets. You can't set a negative blur, but you can set the blur to 0 and the shadow won't blur at all.

Text Decoration

The most commonly used text-decoration is underline, which places an underline on the selected text. You can also use line-through to "cross out" text, or overline to place a line over your selected text. Here are examples of each:

p { text-decoration: underline; }

Hi, I'm underlined.

p { text-decoration: line-through; }

Don't read me, I'm crossed out!

p { text-decoration: overline; }

Well hello there, I'm overlined.

And... ok, I didn't really want to mention this, but in the interest of being thorough, I should acknowledge that text-decoration: blink; is a real thing. No demo though, because I like you too much to subject you to it.

Text Transform

With the text-transform declaration, you can change the capitalization of your selected text. Your transform options are capitalize, lowercase, and uppercase. Capitalize will capitalize the first letter of every word in your selected text. Lowercase and uppercase will convert the text to all lowercase or all uppercase letters, respectively.

This is useful for standardizing dynamic text on your blog. Here's an example — let's say you want to set the links to your commenters to all lowercase letters to normalize their appearance.

.comment-author-link { text-transform: lowercase; }

One of your commenters enters their name with strange capitalization:

<a href="commentersblog.com" class="comment-author-link">mY CApiTAlizatION iS weIRd</a>

But, you set the text-transform for those links to lowercase, so here's how that would look in the browser:

mY CApiTAlizatION iS weIRd

"Creative" capitalization problem: solved!

Try it Out!

So today's Codepen is a little different. This time, you get no CSS from me, just the bare HTML. Play around with it and style it using your new font styling skills. If you'd like to share your experiement, you can "fork" my code and create a new Codepen to link in the comments. Or, you can post a screenshot of your handiwork. I look forward to seeing what you come up with!

Ready to try it out? Click the "Edit on Codepen" link in the demo below, or click here to open the Codepen editor in a new window/tab

Check out this Pen!

Further Reading

Now that you've got the basics of font styling with CSS down, there's so much more you can do! Here are a few more tutorials to try out if you want to learn even more.

• Patterned Text for Safari and Chrome with CSS3: a sweet CSS effect for webkit browsers, with a solid fallback for browsers that can't display the patterns.
• 3D Text Tower: Fun with text shadows from my all-time favorite CSS blog, CSS-Tricks.
• 20+ Amazing CSS3 Text Effect Tutorials: An inspiration gallery showcasing clever CSS text effects.

Blog Font Style with CSS - Spacing, Alignment, and Line Height

This is part four of the five part Blog Font Style series.

You're just about done with this series and you've learned a lot! You can find the CSS selectors for your text, specify your font families, and set your font's size, weight, and style. You're all set to start experimenting with some more advanced typography with spacing, alignment, and line height.

I'm going to show real examples of these techniques in this tutorial. If you're reading on an RSS reader, you may need to come over to the live site see the CSS in action.

Letter Spacing & Word Spacing

With a letter-spacing or word-spacing declaration, you can set the space between the letters in your words, or between the words themselves. In traditional typography, this is called "tracking". You can use pixels, ems, or percentages to add spacing.

Here's an example of a CSS rule with letter spacing:

p { letter-spacing: 3px; }

And here's how that would look in the browser:

Three pixel letter spacing.

Here's an example of a CSS rule with word spacing:

p { word-spacing: 5px; }

And here's how that looks in the browser:

Five pixel word spacing.

Letter and word spacing are best used sparingly. They can be used to great artistic effect in headlines and decorative text.

Text Align

You know those alignment buttons in your blog's visual editor? The text-align declaration in CSS does the same thing. You have three text alignment options: text-align: left; text-align: right; and text-align: center;.

Here are some example CSS rules with text alignment:

p { text-align: left; }

Aligned left.

p { text-align: center; }

Aligned center.

p { text-align: right; }

Aligned right.

Text Indent

Using the text-indent declaration, you can indent text by pixels, em units, or percentage.

The main use of text indent is to create indentation for paragraphs. In the "olden days" of web design, before web fonts were commonly available, we used to use text-indent to push text off the page so it could be replaced by an image. That's not as common anymore. But you may come across a CSS rule that includes a major indent like "text-indent: -9999em;", and now you'll know what it's doing.

Here's an example of a CSS rule with text indent:

p { text-indent: 1em; }

And here's how that looks in the browser:

I'm indented one em unit from the left.

Line Height

Line height controls the vertical space between lines of text. In traditional typography it's called leading (pronounce it with "lead", as in the metal).

You can set your line height in pixels, ems, percentages, or with a "unitless" number. A unitless number is just a plain number without px, em, or percentage. I'm going to give the next paragraph a unitless line height of 1.9 using this CSS:

p { line-height: 1.9; }

Unitless line height is recommended because it helps prevent unexpected sizing issues due to inheritance from parent elements. I'm using line-height: 1.9 here. If you're interested in learning more about line height, I recommend this comprehensive presentation from Russ Weakley.

Try it Out!

Yet another Codepen for you to play with! This time I've combined the font styling options from previous lessons with today's lesson to give you something a bit more detailed to try out. This demo includes line height, letter and word spacing, and text alignment, as well as all of the font features from the previous tutorials. Feel free to play around and restyle the whole thing!

If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

body { font-family: Georgia, Times, "Times New Roman", "Liberation Serif", serif; }

h1 { font-variant: small-caps; }

h1, h2, h3 { text-align: center; }

.author {
  font-size: 1.2em;
  font-style: italic;
  text-align: right;
  letter-spacing: .1em;
}

.first {
   font-size: 1.2em;
  font-style: italic;
  line-height: 1.5;
  word-spacing: .1em;
}

p + p { text-indent: 1em; }Check out this Pen!

What's Next?

You're ready for the final installment of the series! Now it's time to play with color & shadows in Blog Font Style with CSS - Text Effects.

Blog Font Style with CSS - Size, Weight, and Style

This is part three of the five part Blog Font Style series.

Now that you know how to select your text with CSS and set your font family, you're ready to control the size, weight, and style of your text. Let's start with font size!

I'm going to use p as my selector in the examples that follow, but you'll need to use the appropriate selector for the element you'd like to style.

Font Size

With the font-size declaration, you get to control the size of your text. There are three common size units used for font sizing.

Pixels

You can specify a font size in pixels, like this:

p { font-size: 16px; }

Overall, pixels are the easiest to use. If your blog is a "traditional" fixed-width site that doesn't change size or layout for different-sized screens and devices, pixel sizing works great. Your blog's font sizes will look just about exactly the same as they'd look in Photoshop.

But, if you're designing an adaptive or responsive blog, you'll need to learn to use ems or percentages instead.

Em

You can specify a font size in em units, like this:

p { font-size: 1em; }

Em values are a bit trickier to use than pixels, but they're more flexible for the reader because they can scale dynamically for different browser sizes and devices. An em value is based on the font size of the parent element, or, if there's no font size specified for the parent element, it's based on the browser default size — usually about 16px.

An em is a multiplier, so if your default font size is 16 pixels, 1em is equal to about 16px, while 1.3em is about 21px. You can convert pixels to ems (and convert in reverse, too) automatically at http://pxtoem.com

Percentage

You can specify a font size in percentage units, like this:

p { font-size: 80%; }

Percentages are similar to ems, but instead of acting as a multiplier, they increase or decrease font size by percentage. You can also use pxtoem.com to convert pixels & ems to percentage values.

In addition to these three options, you can also use the absolute size keywords: xx-small, x-small, small, medium, large, x-large, xx-large. These sizes are based on your reader's browser default size — usually "medium".

Font Weight

There are several font weight options. The first is "normal", the default font weight. It's rare that you'd ever need to specify normal.

Bold

You can set your font weight to bold like this:

p { font-weight: bold; }

Setting your font to bold "darkens" the text, making it appear thicker and heavier. If there is a bold version of your font available, the browser will use that. Most "web safe" fonts have a bold version. If you're adding a web font, make sure to include a bold version of your chosen font with your font bundle for best results.

If there is no bold version of your font available and you set your font style to bold, the browser will try to simulate a bold version. Sometimes this doesn't look so great — see Say No to Faux Bold at A List Apart for more on simulated bold.

100 through 900

You can set a numeric font weight like this:

p { font-weight: 500; }

Some fonts offer a broad range of weights, and each of those weights is assigned a numeric font weight of 100, 200, 300, 400, 500, 600, 700, 800, or 900. Before using numeric weights, check out a type specimen of your chosen font to see what the different weights look like.

Lighter & Bolder

You can set a lighter or bolder font weight like this:

p { font-weight: lighter; }

The "lighter" and "bolder" font weights are less common, and are usually used in conjunction with numeric font weights. If you choose one of these font weights, your text will appear one font weight lighter or darker than the font weight of its parent element.

For example, if you give all of the links in your paragraphs a font weight of "bolder", each link will be one weight bolder than the text in the surrounding paragraph.

Font Style

There are three font styles: normal, italic, and oblique. Normal is the default font style. It's the standard font without any adjustments. It's rare that you'd need to specify normal.

Italic

You can set an italic font style like this:

p { font-style: italic; }

When you set font-style to italic, the browser will use the italic version of your font if it's available. If there is no italic version of your font, the browser will skew the text slightly to simulate an italicized look.

If you add a web font to your blog, it's best to include the italic version of the font with your font "bundle" so that italic text is truly italicized. The italic version of a font has its own special character, and is so much nicer to look at than text that's simply skewed. In the example image below, the top text is Noto Serif normal, and the bottom text is Noto Serif Italic. Notice the differences?

Oblique

You can set an oblique font style like this:

p { font-style: oblique; }

This is rarely used, but I'm including it so you know what it is if you ever see it! Font-style: oblique; skews text slightly (usually about 10 degrees). If there's an italic version of your font available, some browsers will try to use the italic version instead of skewing the text, but that's unpredictable, so font-style: oblique; doesn't get a lot of use.

Font Variant

There's only one font variant: small caps. You can write a small caps variant declaration like this:

p { font-variant: small-caps; }

"Small caps" is an abbreviation of "small capitals", and basically it's when all of the letters in a word look like capital letters, except that the lowercase letters are smaller than the initial capital.

This looks best with fonts that have a small caps version. If there is no small caps version of your font available, the browser will simulate small caps by using scaled-down capital letters for lowercase letters. The differences between real and "faux" small caps are subtle, but true typophiles will notice!

Try It Out!

I've put together a simple Codepen demo for you to play with. This demo includes four HTML elements: a heading, a subheading, and two paragraphs. Each element asks you to do something to it with CSS.

If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

<h3>Make me italic!</h3>
<h4>Change my size!</h4>
<p class='bold'>Make me bold!</p>
<p class='small-caps'>Make me small caps, please.</p>
Check out this Pen!

What's Next?

In part four you'll learn how to use spacing, alignment, indentation, and line height to further customize the look of your text. Move on to Blog Font Style with CSS - Spacing, Alignment, and Line Height.

Blog Font Style with CSS - Font Families

This is part two of the five part Blog Font Style series.

Now that you know how to select the text you want to style with CSS, you're ready to start styling!

Today we're going to talk about how to use font families in CSS. The font-family declaration is how you set the fonts for the text on your page.

Here's an example of a CSS rule with a font family declaration:

h3 {
font-family: Georgia, Times, "Times New Roman", serif;
}

This font family declaration includes a font stack of web safe fonts. Let's talk about what those two terms mean.

The Font Stack

A "font stack" is a group of fonts that are fairly similar to each other and can stand in for each other. When the browser encounters a font-family declaration in your CSS, it starts with the first font and tries to match it. If the font is not available, it moves on to the next one. So, start your font stack with the font you really want to show, followed by the close second, on and on until you end the list with a generic font name like serif or sans-serif.

There are two ways a font can be "available" — it's either a "web safe" font that's already installed on your readers' computers/devices, or the font is loaded with your web page as a custom web font.

Web Safe Fonts

Web-safe fonts are fonts that just about everyone has on their computer or device. If you want to use a font stack of web safe fonts, check out CSS Font Stack, where you can copy pre-made font stacks of similar serif, sans serif, or monospace fonts (the "fantasy" and "script" offerings aren't quite as reliable, so skip those).

Using one of those font stacks, you can be reasonably sure that your readers will all have a similar reading experience on your blog.

The "web safe" fonts may seem a bit boring, but there are advantages to playing it safe. Web-safe fonts don't require any extra code, which makes them easier for you to implement. And, less code means quicker load times!

Custom Web Fonts

When web-safe fonts won't cut it, you can use a custom web font. There are tons of web font options available — Google Web Fonts alone has over 600 free fonts to choose from — and the design possibilities are endless.

Custom web fonts really shine when they're used instead of images for decorative text elements. Using a font instead of an image for decorative text improves the accessibility of your site — readers who use translation services to read your blog will be able to translate the text, and readers with visual impairments will be able to access your text.

Most web font services have comprehensive instructions for installing and using their fonts, so I won't get into installation details here (though I do have a tutorial on installing Google Web Fonts if you'd like to use them!). But, I am going to give you one tip that they don't always cover in web font documentation.

Building a Font Stack for a Custom Font

When you use a custom font, you should still build a font stack for it so that readers who can't (or just won't) load your custom font will have a reasonably stylish experience on your blog. Custom web fonts are fairly reliable, but sometimes the source file fails, or your reader has disabled JavaScript, or something else interferes and your reader can't see your custom font.

If you don't provide fallback fonts and your custom font fails for whatever reason, your readers will just see whatever their browser wants to show them as a default. Often, that's not pretty!

At the bare minimum, you should specify a generic fallback font for a custom web font, like serif or sans-serif. So, for example, if I wanted to use the lovely Google Web Font Josefin Slab, a minimal font stack would be:

h3 {
font-family: "Josefin Slab", serif;
}

I went with a serif fallback because Josefin Slab is a serif font. If I were using Josefin Sans, a sans serif, I'd choose sans-serif as my fallback.

If you've studied CSS fonts before you probably know that there are other generics, but serif and sans-serif are the most reliable. Fallbacks like "cursive" and "fantasy" often display as quirky fonts like Comic Sans or Impact, so it's best to stick with the classics.

I could improve this font stack by including fonts that are fairly similar to Josefin Slab and are commonly installed on PCs, Macs, and web-enabled devices. With a little bit of research, I was able to find Rockwell, a fairly common font that has similarities to Josefin Slab, and Courier New, an extremely common font that isn't quite as pretty as Josefin or Rockwell, but would do in a pinch.

h3 {
font-family: "Josefin Slab", Rockwell, "Courier New", serif;
}

Using that font stack, I know that most of my readers will see my custom font, but those who don't will see a reasonable substitute.

Try It Out!

I've put together a simple Codepen demo for you to play with. This demo includes two HTML elements: a heading and a paragraph. Each has a different font stack assigned to it.

Try changing the font families to web-safe fonts or fonts you have installed on your computer. If you really want to challenge yourself, try adding a custom web font (hint: you can use @font-face in Codepen)! If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

<h3>Change this font family!</h3>
<p>This paragraph could look nice with a different font family, too. Why don't you change it?</p>Check out this Pen!

What's Next?

In part three, you'll learn how to use font-size, font-weight, font-style, and font-variant to fine-tune your new font's appearance. Move on to Blog Font Style with CSS - Size, Weight, and Style

Patterned Text for Safari and Chrome with CSS3

CSS3, the latest and greatest version of CSS, has a lot of potentially wonderful features that aren't widely accepted by all of the browsers. Every developer has to harden their heart against falling in love with a CSS3 feature that's never going to make it to widespread use. And, so, for a long time, I turned my back on a feature I really like — background-clip: text.

Background-clip is a useful CSS3 feature that works in most browsers; it lets you control whether or not a background color or image extends past its element's border. Background-clip: text is a variation that allows you to use a background image as the "fill" for text. So you can do something like this:

A feature like that has major design possibilities, especially for elements like blog titles, post titles, and decorative text. Pretty exciting, right?

For the longest time, there was one very big "but" about background-clip: text — it only works with the vendor prefix -webkit, making it exclusively available to Safari and Chrome browsers. It used to be that if you tried to use it, other browsers would make it look weird at best, and completely illegible at worst. So, I put it in the "can't use" pile and forgot about it.

But then came this post from esteemed developer Divya Manian: "Using background clip for text with CSS fallback". In her post, Divya shares a CSS snippet that sets a solid color fallback for background-clip: text so the text stays legible on incompatible browsers.

Since a reliable & reasonable fallback exists now, I think it's safe to use as a "nice to have" detail. Let me show you how it's done!

Compatibility

The pattern "fill" will only show in the WebKit browsers Safari and Chrome. The CSS we'll use sets a solid fallback color for other browsers. Your readers on WebKit browsers will get to enjoy the cool pattern, and your readers on other browsers will see solid-color text. Everything's legible, everybody's happy!

In the demo image below, the text at the top is as it appears in a WebKit browser. The text at the bottom is as it appears in all other browsers.

Using This CSS

If you're able to add custom CSS to your blog or website, you can use this. Blogger, self-hosted Wordpress, and Typepad Unlimited bloggers are good to go. If you're on Wordpress.com, you'll need the premium Custom CSS option.

This tutorial is a bit more "free form" than the usual here; since you can use this in so many different ways, it's impractical for me to try to give specific usage instructions. So, it helps if you have some experience with CSS. If you already know how to find the class or ID of an element, you'll have no trouble using this. If you're new to CSS, this tutorial has tips to get you started. If you're a developer, scroll back up and read Divya's post instead, it's got everything you need :)

Choose Your Font

The "fatter" your font is, the easier it is to see the pattern. I used Abril Fatface from the Google Web Fonts library for the demo text. If you want to learn more about adding Google Web Fonts to your blog, see this tutorial.

Choose Your Pattern

You can use any type of image as the background, including photos, but this effect has the smoothest appearance if you use a seamless pattern. I used "Waves of Sorrow" from the Colourlovers pattern gallery for all of the examples shown in this tutorial.

To use your pattern, you'll need to upload it to your blog's file hosting. If you're on Blogger, upload the image to the Picasa Web Album for your blog. If you're on Wordpress, upload the image to your media library. Typepad users can upload the image to the File Manager. You can also host your image through Photobucket or another image hosting service. Take note of the direct URL to your pattern image, you'll need that in the CSS.

Find Your Selector

Before you can style your text, you need to know what CSS selector to use to select that text. If you don't know your selector, there are two ways to find it:

1. With your browser's developer tools. If you're using Firefox or Chrome, you can use your browser's developer tools to identify the class or ID of your text by right-clicking it and selecting "Inspect Element" from the menu.
2. Check your blog's source code. Using your browser's "View Source" option, open up your blog's source code. Find the text you'd like to style, and find its class or ID. The class or ID might be inside your targeted element, or nearby in the code.

Use Sparingly

This opens up a lot of design possibilities, but abuse can lead to illegibility and crimes against good taste. Proceed with caution & decorum, please.

Where to Add the CSS

In Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.

The CSS

Again, the credit for the CSS goes to Divya Manian.

SELECTOR-HERE {
 color: FALLBACK TEXT COLOR HERE;
 -webkit-text-fill-color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(BACKGROUND IMAGE URL HERE) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
}

Ok, let's break down what you need to do to the CSS to get it working:

• Replace SELECTOR-HERE with the selector for the text you want to style. Remember to use # before IDs, and . before classes.
• Replace FALLBACK TEXT COLOR HERE with the name, hex code, or rgb code of the solid color you'd like to use for non-WebKit browsers. It makes sense to use a color that is close to the main color in your background pattern. That way, readers who visit you from different browser types won't find the difference all that jarring.
• Replace BACKGROUND IMAGE URL HERE with the direct URL to your background image.

The Font Combinator - Find Beautiful Web Fonts

I love Google Web Fonts. They're free, they're stylish, and they're easy to use on any website. There's one thing lacking from the web fonts interface though — it's not easy to preview how different fonts look together. That's where developer Chip Cullen's web app, The Font Combinator, comes in!

The Font Combinator is so easy to use it barely needs a tutorial, but I want to give you a rundown of its features so you can use it to its fullest right away.

To start using the Font Combinator, go to www.font-combinator.com.

At the top of the page you'll find a sample article with a headline, subhead, and two paragraphs. At the bottom of the page you'll find simple controls for changing the font, the font size, the line height, the color of the text, and the color of the background.

The Font Combinator includes all of the Google Web Fonts, plus the traditional "web safe" system fonts like Arial, Helvetica, and Times New Roman. So handy for setting fallback fonts! The combinator automatically updates when a new font is added to the Google fonts collection, so it's always up to date.

Here's an example of the Font Combinator in action: I've selected three fonts for this demo. The headline is Syncopate, the subhead is Rammetto One, and the body text is in good ol' Georgia. I've also played around with the colors using the Combinator's built-in color picker.

Did you notice that I changed what the text says, too? Yet another cool feature! You can delete the default headings and paragraphs and replace them with your own.

You can hide portions of the demo text if you're not going to use all of the elements in your design. So, for example, if you're not planning to use a subhead and just want to test a headline and a paragraph font, you can easily hide the subhead by clicking the "hide" button. If you want it to come back, click the "show" button.

Here's another useful detail: if you resize your browser window, the combinator resizes along with it. This way you can test how your fonts will look in different sections of your site or in different viewports, and adjust your sizing (or font choices) accordingly.

I've spent hours playing with this addictive design tool, and if you're a font fan like me I bet you will, too! Many thanks to Chip Cullen for his hard work on this awesome app.

Installing Google Web Fonts

After you've chosen the perfect font, you're ready to install it! Check out How to Install Google Web Fonts on Your Blog for installation instructions.

Fonts in the title card: Alegreya SC and Pinyon Script, selected with the Font Combinator, of course!
Embellishments: Creative Market