Web Typography Top 10 Dos and Don’ts

Web Typography Top 10 Dos and Don’ts

As a designer setting type well is a common and important task. While honoring the text we’re setting we need to ensure its legibility and ... 00:19

As a designer setting type well is a common and important task. While honoring the text we’re setting we need to ensure its legibility and readability. Further we ought to provide visual cues that highlight relationships between and amongst the text. In doing so we provide the text with a range of qualities encouraging and empowering a reader to either skim quickly to a specific snippet of information or to comfortably digest larger sections of the text.
To a good designer setting text becomes second nature, but having a quick checklist to fly through in order to ensure the basics are covered can be useful, particularly for aspiring newcomers to the field. This is my list, used as a set of general guiding principles:

1. Apply no more than three typefaces per design (or page)

Setting no more than three typefaces (or digitally, fonts) per design is a great basic rule. Applying and setting text with a larger variety of typefaces (even if they are similar) creates a sense of disunity; readers are given the notion that related if not the same types of text (e.g. body paragraphs) are unrelated. Using a larger variety of similar typefaces might side-​​step this disunity but the reader will still note — even if subconsciously — an oddity. Even if they are unable to describe and source the disturbance the effect can remain.
The reason “or page” is in this rule is to provide artistic freedom. Jason Santa Maria’s web site illustrates this fittingly with his creatively diverse designs and styles that his blog posts express, while his site at large retains perfect unity.

2. Set headlines large and invitingly, at the top of the page

There used to be this amazing fright of setting large text on the web. Body copy set at 10px (and even lower!) seemed rampant, and headings were rarely treated to anything beyond a slightly larger font size. Headings are some of the very first strings of text read by the eye when navigating to a new page, and vital to mark sections in passages. As such, grace headings with the size and styling they deserve to invite the reader and provide ample, but unobtrusive sign-​​postings for lower tier headings to guide the reader.

3. Size body copy 14px+

This is a related and perhaps the most important rule of thumb: give body copy the size it needs to be comfortably read on a screen. Of course a large range of other factors influence and legibility and readability of text and particularly more closely set body copy, but size remains critical.
Remember that not many of us have 20 – 20 vision; a good default is 14 pixels.

4. Ensure a good text to background contrast

Upping the font size is a sure way of making your text more legible, but legibility (and as a result, readability) will be diminished by poor contrast between the text and the background on which it rests.
The well-​​established standard is to place dark text on a light background, or vice versa. Absolutely avoid clashing colors or a barely visible grey on a white background.
Special care needs to be applied to light text on a dark background because it doesn’t have the same contrast (even though it first may appear so) as it’s cousin opposite: increase the tracking, measures, and leading accordingly.

5. Apply stress and emphasis discreetly

This is partly and editorial principle, partly a typographic one: don’t litter text with superfluous underlines, bolding, and italics; apply emphasis and stresses sparingly exactly for added and intentional emphasis.
On a side note, avoid overly long hyperlinks with underlines, particularly on serifed typefaces and even more so at smaller sizes. The default text-decoration: underline; will cut through glyphs with descenders (chiefly g, j, p, q, and y) and make them more difficult to discern. A handy solution is to set no text-​​decoration and instead use a border-bottom: 1px; or only on mouse hover (a:hover).

6. Do not set continuous text in full capitals

Ascenders and descenders exist for good reason: they allow us to easily identify words. A word that is set in upper– and lowercase is more recognizable than same word set entirely in uppercase due to the uniformity of the height and baseline of the word. For example, contrast:

‘THE RESULTS OF LEGIBILITY ANALYSES CAN BE CONTRADICTORY, BUT ONE THING IS CLEAR: TEXT SET IN CAPITALS IS HARDER TO READ THAN TEXT SET IN UPPER– AND LOWERCASE. THIS MAY NOT BE PARTICULARLY IMPORTANT IN THE CASE OF INDIVIDUAL WORDS, BUT IT IS FOR LARGE AMOUNTS OF TEXT. THEN TOO, THERE IS ALSO A GREAT DIFFERENCE IN THE AMOUNTS OF SPACE.’

with:

‘The results of legibility analyses can be contradictory, but one thing is clear: text set in capitals is harder to read than text set in upper– and lowercase. This may not be particularly important in the case of individual words, but it is for large amounts of text. Then too, there is also a great difference in the amounts of space.’

— Hochuli, J. 2008, Detail in Typography, 3^rd edition, Hyphen Press, London, p. 24.
If you find yourself needing to set longer strings of text wholly in uppercase alongside regular body copy, consider setting them with a more ample leading in small capitals (font-variant: small-caps;).

7. Give the type space to breathe; set ample measures and leading

Leading straight on (no pun intended) from the close of the last rule, ensure your text has enough room to breathe; give it the space it needs, both vertically and horizontally to ensure a good, crisp contrast for legibility and readability.
Check that lines are not too short requiring jerky, quick dashes of the eye to trace to each following line, but also not too long to get lost when reaching the end of a line and then proceeding to the next. Going hand-​​in-​​hand with the line length is leading: provide enough space between lines, but not too much to rip the text apart.

8. Be wary of fonts not designed for screen use

Extending beyond the core web-​​safe fonts is an endevour deserving merit, but only select quality typefaces that match the medium you are working with. There is a fantastic abundance of fonts in the world, of which only a subset is good for setting body copy, and an even smaller subset of which has been optimized, or designed specifically for web use.
Look out for good hinting tables and test your font at smaller sizes (10px, 12px, 14px) on a variety of browsers and operating systems to gauge how well the various font rendering engines display the font.

9. Ensure webfont assets are subsetted and cached

When using @font-face webfont assets the page size will increase — the user agent (chiefly the browser) will need to download the font for text to be rendered with it. One way to reduce this load size is to subset the font: remove unneeded glyphs for characters you won’t ever be using (e.g. an English web site has little to need for Cyrillic glyphs and visa versa). The second is suggest to user agents to cache the asset for a certain period of time such that subsequent visits don’t result in re-​​downloading the font.

10. Don’t use Comic Sans

More of a personal note and frustration. But seriously, why would you use this overused and quite unattractive comic typeface when there are so many others to choose from, including freely licensed ones like Comic Jens.
That’s my list. What’s yours?