Thoughts On Building A Typographic Stylesheet

Last week I talked about legibility and readability in typography. That post focused on design terms and concepts. This post will consider some of those same terms and concepts with the focus being shifted to the css you would use to control them in your designs.

CSS offers a number of properties that give us control over our typography. I think most of us still focus on the same one or two and leave everything else to default values or chance. I’m as guilty of that as anyone, though I am learning.

Recently the design community has been excited by new options in typefaces that are becoming available and rightly so. However font-face alone will not make your typography better. If you don’t know how to build a house it makes no difference if you use mud and straw, wood, steel, or concrete as building materials. Your house will still fall down.

The Font Property and the Line-Height Property

The most obvious css property when it comes to typography is the font property or rather the 5 different font properties plus the additional line-height property

• font-style – default normal
• font-variant- default normal
• font-weight- default normal
• font-size- default medium
• line-height – default normal
• font-family- default not specified

I’ve listed the above in the order you would specify values if you want to use the font shorthand like so:

{code type=css}
{font: style vaiant weight size/line-height family}
{font: italic small-caps bold 12px/18px verdana, sans-serif}
{/code}

Note: If you want to use the shorthand you must specify both the font-size and the font-family. If you fail to include both, browsers will ignore the entire property. Any of the other values can be left out and browsers will use the default value.

Looking at the default values above you may notice that for the first 3 properties the default is probably what you want most of the time. Font-size, line-height, and font-family, on the other hand, are things you’ll likely want to create general rules that apply to your entire site..

Most, if not all, browsers use a default of 16px for the font-size, which roughly corresponds to 12pt type. There’s no right or wrong font-size to use, but for readability you probably want to go with something between 12px and the default 16px.

Know too, that your choice in font-family will go into your choice in font-size. I showed this in the last post, but it’s worth showing again.

This is 14px Verdana
This is 14px Arial

Not the same size even though both are 14px.

In print leading (line-height) is typically set 20% to 30% larger than the font size. I find online it’s better to go a little larger with your line-height, something closer to 50% seems to work well. That’s not an absolute by any means and your choice will depend on your design.

Considering all of the above our typographic stylesheet might begin as:

{code type=css}
body {font: 14px/1.5 Verdana}
{/code}

Font Stacks

You generally want to use a font stack as opposed to choosing one and only one font-face. You can never be sure what fonts your viewer has installed on their browser and even if you use something like Typekit or the new Google font api, it’s always possible there will be an error in those sites at the moment someone visits your page. Or what if you only specify a single font from Typekit and a year later decide not to renew your membership.

Choosing a font stack is not simply a matter of listing a few random fonts that look nice. Verdana is a wide bodied font. Arial is a narrow bodied font. Switching from one to the other could affect the rest of your design. When choosing a font stack you want to match font-faces with similar characteristics in their design and you want to list a series of fonts that increases the odds any visitor will have at least one of them installed.

As a last resort your font stack should fall back to either serif or sans-serif. If you’ve built a good font stack most visitors will never get to the fallback, but at the very least you can at least have some control about whether they’ll see a serif or not.

Let’s update our stylesheet to include a fontstack.

{code type=css}
body {font: 12px/1.5 Verdana, Geneva, Tahoma, sans-serif }
{/code}

Resources

Below are a few articles with thoughts about building font stacks as well as example font stacks you can use.

• Guide to CSS Font Stacks: Techniques and Resources
• Better CSS Font Stacks
• Better Font Stacks (PDF)
• Revised Font Stack
• Striking Web Sites with Font Stacks that Inspire

Other Typographic CSS Properties

The font properties along with line-height are the obvious ones, but we have quite a few more css properties we can use to control our type.

CSS Property	What it Does
letter-spacing	used to increase or decrease the space between characters
word-spacing	used to increase or decrease the space between words
text-align	horizontal alignment of text
vertical-align	vertical alignment of text
text-indent	specifies indentation for first line of text in a block of text
text-transform	sets the case of text
white-space	determines how the whitespace inside a block of text is treated. Does it wrap? Is formatting preserved?
color	sets the color of the text
background color	sets the color of the background behind the text
text-decoration	specifies the decoration (underline, overline, line-through) on text

I’m sure many, if not most or all, of the above css text properties are familiar to you, though you may not use them all in practice. Take letter spacing. I know it’s not something I specify often or ever, but it gives us a way to deal with tracking and even kerning.

The link above the table around “css properties” will take you to a list of all css properties (as will this one). I’ll let you explore and find the values you can use for each of the properties I’ve listed here. Like I said, I’m sure most are familiar to you and the ones that aren’t you probably won’t use that often.

The main thing is to think about these (and other) properties in ways you might not have thought about them before and to understand each can affect how readable your text is or isn’t.

What Elements Should We Style?

Good question. Realistically every html element that can take text can be styled typographically. However, several html elements are unlikely to find their way into your design and if we style a general element like the <body> we can make use of the cascade in css and let elements inside the <body> inherit styles from it.

You can then add styles to those more specific elements you actually use and want to display differently.

At a minimum we should style our body and hx tags. We probably want to add some styles to paragraphs, links, lists, tables, and captions. Beyond these elements we could further style blockquotes, pre tags, dfn, abbr, dl, dt, sup, sub, acronym, address, del, and even strong and em tags.

How many of these tags you choose to style would depend on whether or not you expect to use them and how happy you are with their defaults.

CSS Resets

One thing you might want to use is a css reset like the ones from Eric Meyer or Yahoo. Instead of simply including one and being done with it, take a look at the elements that are reset. These are generally the elements you might choose to add your own typographic styles to.

Also as you add your own styles to those in the reset you can safely remove them from the reset. For example Eric Meyer’s latest reset file gives the body a line-height of 1. If you include a line-height when styling your body tag (and you should) there’s no longer a reason to keep the reset style.

Use a reset, but don’t use one blindly. Pay attention to what’s included to make you more aware of what you might want to set yourself and remove those elements from the reset when you do style them.

Putting it All Together

With the above in mind let’s start fleshing out our rudimentary typographic stylesheet.

{code type=css}
body {font: 14px/1.5 Verdana, Geneva, Tahoma, sans-serif;}
p {margin:0 0 20px 0;}

h1, h2, h3 {margin:30px 0 5px 0; font-weight: normal;}
h1 + p:first-letter, h2 + p:first-letter, h3 + p:first-letter {font-variant:small-caps; font-size:3.0em; line-height: 0.75em; margin:7px 5px 0 0; float:left; color:#892A47;}
h1 {color:#6D6847; font:3.6em “Palatino”, “Palatino Linotype”, “Hoefler Text”, “Times”, “Times New Roman”, serif;
text-transform: uppercase; letter-spacing: 12px; font-weight: bold;}
h2 {color:#76892B; font-size:2.0em;}
h3 {color:#897D2C; font-style: italic; font-size:1.6em}

ol {margin:30px 0; padding:0; list-style: lower-roman}
ol li {margin: 2px 0; color:#444; font-size: 0.85em}
{/code}

Originally I wanted to offer you a complete stylesheet, but I soon realized the impossibility of that task. With no constraints there’s no compelling reason to choose any specific value. The above code isn’t necessarily right or wrong. It just is.

If you’re interested in seeing what the above stylesheet looks like on some reading text you can click here.

Instead of a complete stylesheet here are a few general tips:

Using the font shortcut on the body effectively sets the general typographic style for your site. You’ll want to style certain elements differently, of course, but keep in mind how much this short line of css controls. Take some time to choose a font stack, a font-size, and a line-height (since it plays a large part in creating a vertical rhythm in your type) and think about how they’ll all work together.

Instead of relying on the default browser font-size set it specifically with px so you know where you’re starting. From here all other sizes should use a relative em measurement. This makes it a simple matter to change sizes across the site with a single change to the font-size on the body.

You might have noticed that when setting margins on the paragraph tag I zeroed out everything except the bottom margin. I find when it comes to vertical layout it’s easiest to work with elements when they have either top or bottom margins set and not both. Personal preference on my part, but it seems to give me more control over the vertical layout of the type.

Resources

Since I haven’t left you with a complete typographic stylesheet here are a few resources that can help you build on the stylesheet we have started here.

• Free Typographic XHTML/CSS-Layouts For Your Designs – Smashing Magazine ran a contest last year for typographic layouts. The winners have some great typography naturally and it’s worth looking through their stylesheets.
• 50 Useful Design Tools For Beautiful Web Typography – Another post from Smashing Magazine with links to all sorts of typographic resources.
• 10 Examples of Beautiful CSS Typography and how they did it… – Just what it says. Examples sites along with the styles used for the typography.

Comparing Design Typography to CSS Typography

Before leaving the topic of typographic stylesheets let’s take a look at the type definitions from my last post and consider which css properties you can use to control them.

Typography Definition	CSS Properties
spacing	word-space, white-space – both control spacing within a block of text.
alignment	text-align, vertical-align – to align text both horizontally and vertically.
new paragraph	text-indent, text-variant, text-transform, and pseudo classes (:first-line :first-letter) can all be used to add interesting styles to new paragraphs.
measure	width – for blocks containing text
leading	line-height
kerning	letter-spacing – when used on a pair of characters.
tracking	letter-spacing – when used on complete words, sentences, paragraphs.
case	font-variant (small-caps), text transform (uppercase, lowercase, capitalization)
style	font-style – italics or not
weight	font-weight – for various levels of lightnes and boldness
typographic color	will come from combination of font-face, font-size, line-height, font-style, and font-weight. More whitespace leads to a lighter typographic color.
contrast	color, background-color – black text on a white background has the highest contrast.
typeface	font-family, @font-face – use font stacks and remember that a cool font does not equal good typography.
font size	font-size – 12 &ndash 16px is probably ideal for body copy.

Summary

The keys to developing a typographic stylesheet are paying more attention to typography in general, understanding what css properties can be used to control your type, and deciding which html elements, classes, and ids to apply those styles to.

Typography is a lot more than choosing a typeface, though your typeface is an important consideration. We’re entering a time in web design where more and more typefaces are becoming available for our use. That’s a great thing, but by itself more font choices won’t make the typography on your site better.

If you ignore things like line-height, typographic color, and scaling your font-sizes to create a hierarchy, all the font choices in the world won’t do you any good. Pay attention to them and you’ll find your typography improving even if you stick to the limited set of web safe fonts.

Designing text is one of the most important things we do as web designers. Isn’t it time we start paying more attention to type?

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.