CSS Font Styling

September 15, 2005, 1:35 PM | 0 Comments

CSS is very powerful when it comes to font styling. From line height to letter spacing, CSS gives designers complete control over their text and how it appears on the web. I do not claim to know all there is to know about font styling, but I thought I’d at least post some of the methods of font styling as a starting point.

While the web is still a little bit behind on giving designers a flawless way to use whatever font face that they want (although, several people have come up with awesome solutions using Macromedia Flash - see sIFR), CSS allows you to customize how your text appears, even if you are forced to use the more standard fonts.

Font Face

CSS allows you to select whatever font you’d like to use, but you have to be careful to provide alternatives in case the user doesn’t have that particular font face installed on their system.

With CSS you can define font styles for as many different elements as you’d like, but for simplicity’s sake, I’ll just define styles on P elements for our examples.

p.FirstParagraph {
     font-family: Verdana, Tahoma, Sans-Serif;
}

p.SecondParagraph {
    font-family: 'Palatine Linotype', Serif;
}

The code above sets the font family in the first paragraph to Verdana. If Verdana is not available, it will set the font face to Tahoma. If that isn’t available, it will use the system’s default Sans-Serif font.

The second paragraph has the font face set to Palatino Linotype, and if that isn’t available it will use the system’s default Serif font. Palatino Linotype is enclosed in single quotes because there is a space in the font name. If the font name is just one word, no quotes are needed.

Click here to see the example page.

Font Size and Line Height

Font size is fairly self explanatory, however, there are several different units of measurement by which you can define the font size. Line height, which is also known as leading, is a very useful way to add some style to your font and make it look a little more unique to your design. I’m not sure I know of any professional designers that use the default line height (leading) of any font. Increasing the line height on your font will make your text easier to read.

p.FirstParagraph {
    font-family: Verdana, Tahoma, Sans-Serif;
    font-size: 10pt;
    line-height: normal;
}

p.SecondParagraph {
    font-family: Verdana, Tahoma, Sans-Serif;
    font-size: 1em;
    line-height: 2em;
}

In the first paragraph, I’ve used the font size property to set the font size to 10pt. I’ve also set the line-height to normal, which would also equal 10pt.

In the second paragraph, I’ve set the font size to 1em. An em is a unit of measurement that equals the default font size of the browser. The default font size in a browser is 16 pixels. This means that 1em = 16 pixels, 2em = 32 pixels, 1.25em = 20 pixels. I’ve also set the line-height to 2em. This will give the effect of a double spaced paragraph.

Click here to see the second example page. 

There are several other ways to define the font-size and/or line-height. You can use pixels, ems, percentages (which will be calculated by the percentage of the default font size. For example, 62.5% of 16px = 10px.), picas and points.

Font-Style, Font-Weight, Text-Decoration

This is the area of CSS where you can define all the usual text styles. Bold, Underline, Italic, Strikethrough, etc. It’s fairly simple.

p.FirstParagraph {
    font-family: Verdana, Tahoma, Sans-Serif;
    font-size: .8em;
    line-height: 1.7em;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
}

We’ve introduced three new techniques here: font-style, font-weight and text-decoration. Font style is where you can define such things as italicized text, oblique text, or ‘normal’ text. Font-weight is where you can define bold, bolder, or normal font weight. (You can also define values 100, 200, 300 … 900 inclusive). Text-decoration can be used to define underline, overline, line-through (or strike through) and blink styles.

Click here to see example three.

Letter-Spacing and Word-Spacing

Letter-Spacing is what’s commonly referred to as ‘Kerning’, or the space between each letter. The word-spacing property set’s the amount of white space between each word.

p.FirstParagraph {
    font-family: Verdana, Tahoma, Sans-Serif;
    font-size: .8em;
    line-height: 1.7em;
}

p.SecondParagraph {
    font-family: Verdana, Tahoma, Sans-Serif;
    font-size: .8em;
    line-height: 1.7em;
    letter-spacing: 2px;
}

p.ThirdParagraph {
    font-family: Verdana, Tahoma, Sans-Serif;
    font-size: .8em;
    line-height: 1.7em;
    word-spacing: 10px;
}

Click here to see the fourth example.

Text-Transform

Text-Transform is very useful for setting the case of the font to either uppercase, lowercase, capitalize or none, regardless of how the text is entered in the paragraph.

p.FirstParagraph {
    text-transform: uppercase;
}

p.SecondParagraph {
    text-transform: lowercase;
}

p.ThirdParagraph {
    text-transform: capitalize;
}

p.FourthParagraph {
    text-transform: none;
}

Uppercase and Lowercase speak for themselves. Capitalize will capitalize the first letter of each word, and none will display the text exactly as entered.

Click here for example five.

Conclusion

This is just a brief overview of the many methods of styling fonts using CSS. For more information on several different methods to control the look and feel of your text, check out the W3’s school on CSS Font and CSS Text.

Hopefully this has been helpful to you, and if you have anything to add, just enter your comments below.

Posted in: CSS, CSS Tips, Web Development