Fungible Convictions

Now we’ll look at some of the basic typographical issues for the three main CSS “levels”: pages and paragraphs, headers, and individual words

Page/paragraph level

As mentioned in the previous post, page- and paragraph-level typography mainly has to do with width considerations. You’ll want to obsess about how wide your lines of text run: too narrow and you may push a lot of text below the fold, resulting in a lot of scrolling; too wide, and your readers’ eyes get tired.

In print typography, it’s called “choosing a comfortable measure”. Traditionally, you want to keep lines limited to no more than 75 characters, with 66 characters being considered optimum. But on the web, it can and should be up to the user.

Therefore, take advantage of adjustable widths. You can set your text box width to be 50%, meaning no matter how wide the user sets their screen, the box will always fill 50% of it, with measures adjusting accordingly. Or you can set your text box to, say, 33em, meaning the box will always accommodate approximately 66 characters, with the box itself changing in size as the user makes adjustments.

Next, for the same reasons, obsess over your line-height. (In print typography, leading.) Each line needs a little space between the lines above and below, but too much or too little strains the eyes, especially for longer texts. It should suit the typeface, text level (body, heading, etc.), and measure. This CSS for example…

p {
font-size: 12pt;
line-height: 1.25;
}

…results in type that is 12pt with a breathable, comfortable line-height, 1.25 times the font-size, and stays 1.25 times the size no matter how the user resizes the type.

Having a stable line-height also gives you the chance to square up lines of body text with lines of sidebar text, no matter the font-size.

Header level

Similar in thinking to using a good measure, establish a good rhythm with your headers.

Book designers will tell you, “Don’t compose without a scale,” meaning everything—everything—has to be in rational proportion, especially headers. For example, if the default body text happens to be 16px, you should set your headings and paragraph text to sizes in proportion to 16px:

body { font-size:100%; }
h1 { font-size:2.25em; /* 16x2.25=36 */ }
h2 { font-size:1.5em; /* 16x1.5=24 */ }
h3 { font-size:1.125em; /* 16x1.125=18 */ }
h4 { font-size:0.875em; /* 16x0.875=14 */ }
p { font-size:0.75em; /* 16x0.75=12 */ }

Word level

At the word level, there’s actually very little agreement on best practices.

Historically, web designers argued that sans serif typefaces were all you should use for main text. This was because screen resolutions couldn’t quite render serifs cleanly enough—they were blurry or pixelated and generally looked worse than cleaner sans serif typefaces.

But with higher resolution screens, this isn’t as much an issue. It’s up to you and your readers’ needs.

However, there are some lesser-known CSS properties that you’ll want to take advantage of, especially for your headers. Pre-installed typefaces like Times New Roman, Arial, and Verdana are versatile but not perfect and can often benefit from tweaks at larger or very small sizes.

For example…

p {
word-spacing:0.25em;
}

h1 {
word-spacing:-0.125em;
}

…will result in words in a paragraph that are proportionally spaced out slightly more than default, while it will pull words in top-level headings slightly closer together.

The same can also be done with letter-spacing CSS property but should only be applied to large headings or with special combinations of letters such as an upper-case T preceding a lower-case o.

Last, there is the text-transform property. It should be used to define text that you always want to be uppercase, always lowercase, or always have their first letters capitalized.

Reference:
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.1/
http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.1/
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.8/