big name

Setting Type on the Web - Tips

Published Feb 8, 2011

Web Designer | @JustinSeiter

Copy on the web needs to be legible, accessible and consistent. No one wants to have to labor over copy. Our goal as designers is to get users through the content as quickly and efficiently as possible.

At Big Name, I'm always looking for ways to improve the typography for our sites. Here are some of the things I do to keep the content easy on the eyes.

Set font-size on the body to 100%

Setting the body font-size to a percentage ensures that your type will scale properly even if the user has altered the browser's default text size. This can't be accomplished with pixels or points as they are fixed-sized units.

I set the body font-size to 100% or greater. Some say this is too large, but I believe it creates highly readable text – especially when paired with a proper line-height.

When set to 100%, the browser will use its default setting for displaying text, normally 16-pixels. This is the equivalent to the standard print size of 12-points. 16px = 1em = 100% = 12pt

The alternative to setting a percentage is using EMs. Yes, the scalability is there, but IE 6/7 will disproportionately interpret the EM. This causes the size to be way larger or smaller when using the "Largest" or "Smallest" text-size settings, for example.

IE Font Size Comparison

Why not just rely on the browser's "zoom" feature? Zoom increases the size of everything on the page, not just the text. This can make other elements on the page look nasty. Not to mention, high resolution devices like the iPhone and some Android phones now sport super-high resolutions that make 12-pixel fonts tough to read.

Use EMs for setting type throughout the rest of the site

Yes, I know we just set the entire document to a percentage. You can obviously continue using percentages, but I prefer the EM because it's a true typographic unit and because it's the W3C recommended measure.

Regardless of your choice, remember that relative values like percentages and EMs are inherited and will cascade in a document. For example, setting an ordered list size to 1.5em and a list item to 1.5em will cause the text to be displayed at 1.5 x 1.5.

Be consistent with your font sizes by composing on a scale and utilizing an EM calculator. If you're coming from the pixel world, try starting with http://pxtoem.com/". This will help you come up with a set of default styles based on a default body font size.

Pixels     EMs         Percent Points
----------------------------------
6px     0.333em     33.3%     5pt
7px     0.389em     38.9%     5pt
8px     0.444em     44.4%     6pt
9px     0.5em         50%     7pt
10px     0.556em     55.6%     8pt
11px     0.611em     61.1%     8pt
12px     0.667em     66.7%     9pt
13px     0.722em     72.2%     10pt
14px     0.778em     77.8%     11pt
15px     0.833em     83.3%     11pt
16px     0.889em     88.9%     12pt
17px     0.944em     94.4%     13pt
--------------------------------
18px     1em         100%     14pt
--------------------------------
19px     1.056em     105.6%     14pt
20px     1.111em     111.1%     15pt
21px     1.167em     116.7%     16pt
22px     1.222em     122.2%     17pt
23px     1.278em     127.8%     17pt
24px     1.333em     133.3%     18pt

Note: As mentioned above, IE will mishandle the EM if a user sets their text-size "larger" or "smaller". However, once the body font-size is set as a percentage, IE won't continue adding the values of an EM cascade.

Keep measure in mind

Measure refers to the width of a body of type – or more precisely, the number of characters in a single line of a column of text. According to The Elements of Typographic Style:

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.

We're able to read with ease when our eyes encounter line measures in this range. But trying to keep an ideal character-per-line count of 66 characters can be challenging on the web.

Liquid and elastic layouts can help address issues of text and browser resizing, but your design needs are going to influence your overall approach.

Here, I've used a pixel width for my columns (at the time of this writing) in order to retain control over the line length. It will throw off the measure when text is resized, but this layout presents an ideal line width to the vast majority of my audience.

Additional resources for setting type on the web