The Smashing Book – Typography: Rules, Guidelines and Common Mistakes

• By The Smashing Editorial
• October 5th, 2011
• Best practices, Guidelines, Typography
• 1 Comment

← The Art and Science of CSS-Layouts (2/2)TOCTypography: Rules and Common Mistake (2/4) →

Typography is the soul of design; it lies at the heart of visual literacy. This chapter explores typography for the Web and describes the methods and techniques of composition that bring documents to life and facilitate understanding.

“Typography exists to honor the content”, says Robert Bringhurst, author of the well-known typographic bible The Elements of Typographic Style. Web typography in particular entails the selection, arrangement and setting of type on the Web to enrich the meaning of text and to provide a framework upon which text can come to life. A good starting point but surely not an exhaustive definition.

Typography involves a wide range of topics and applications, even more so now with the digitization of information on the Web. It is not only about choosing the best font family, but about bringing value to communication, improving legibility, defining a brand and corporate image, selling pro- ducts and making information better understood by the audience. Inadequately applying some of the common rules of typography is sometimes enough to make readers turn the other way.

Looking back to the dawn of typography, the black-letter typeface that Gutenberg used in 1455 may not be to everyone’s taste today, but it was no doubt beautifully crafted and set even by today’s standards. When designing for the Web, our lines cannot be so delicate, and our ligatures cannot quite be like the ones Gutenberg did on paper and vellum almost 400 years ago.

Design production methods have changed, but on the Web they’ve changed most dramatically of all. Typesetting is no longer manual labor performed by dedicated professionals, but is rather abstracted through code commands according to a virtual model set by designers. Type is not printed on paper anymore; it’s rasterized into pixels and rendered on the screen. This is what makes Web typography different. Instead of specifying the paper or material to print on, we have to deal with a multitude of screen types, resolutions, browsers and operating systems (many of which have different rendering engines): Web typography must work on all of them.

First page of the first volume of the Gutenberg Bible, printed with an early texture typeface around 1455. The decorative colored initials were hand-lettered separately by a scribe.

These days, a multitude of fonts are available at the click of a button. That’s not to say they’re all suitable for the Web. Most are optimized for print, not for the relatively low-resolution screens we browse the Web with. The availability of professionally created fonts for the screen and the need for consistency across platforms and browsers has put us in a position similar to that of designers and printers of yesteryear. We can use only a handful of fonts, and we’ve gotten to know them intimately and sometimes, with the help of a little CSS styling, we stretch them as far as they can go.

Web design evolved alongside but separately from desktop publishing – it is more embryonic; much is missing, but much we already have. We can do good work with existing tools such as HTML and CSS (and JavaScript and Flash if absolutely necessary). Some of the old rules and guidelines of typography apply to the Web, but not all. Online communication is a new and different medium through which editors and readers can interact, and this affects typography and typesetting.

Typography and Web Typography

We often consider writing a simple activity. We often think that correcting grammar, deciding the order of items in a page’s layout and choosing a legible font is sufficient. But the art of typography involves several factors that are too often overlooked, especially on the Web, where the process of writing and publishing is immersive and the quality of text is often neglected. In this chapter, we will cover various typographic techniques, good practices and rules of thumb, as well as common typographic errors. But first let’s take a closer look at some basic concepts of Web typography.

Legibility is affected by typeface design, screen optimization and micro-typography. It has to do with the ease with which individual characters, letters or glyphs are distinguishable from one another. We can’t change how established typefaces look, but we can select the right one and set it accordingly. When it comes to legibility, many designers agree on certain conventions, heuristics and typographic techniques. For instance, uppercase letters are considered more difficult to scan than lowercase letters, while regular type is more legible than italics. Good contrast between the body copy and background increases legibility, as does an appropriate line length and line height. The upper half of letters are relied on more for scanning than the lower half, while the height of ascenders and descenders play an important role in the reader’s recognition of letters. Many consider serifs more legible for this reason. As you see, when it comes to legibility, many variables come into play.

A specimen of roman typefaces by William Caslon, a famous English designer of typefaces, 18th century.

Readability is our chief concern as designers. It is influenced by layout, the placement of blocks of content and the presentation of individual items. We can do many things to ensure readability, many of which are influenced by reader’s behavior. Fundamentally, people “read” the Web differently than printed material. Understanding and designing for this behavior – which is the point of user experience design – is crucial. Web typography brings key considerations.

Measure (line length) is the length of individual lines of text. The optimal length will depend on the context, but somewhere between 45 and 75 characters (including punctuation and spaces) is recommended for substantial blocks of text set flush left, ragged right. 66 characters is regarded as optimal: this line length allows for comfortable reading and doesn’t require the eye to travel too far from the end of one line to the beginning of the next. One shouldn’t make lines too short, either, because having to jump too frequently to the next line tires out the eye as well.

Surprisingly, our recent study of typographic design patterns ¹ shows that, in practice, popular text-heavy and typography-related websites (newspapers, magazines, typography-related blogs, etc.) have a longer measure, the most popular range being between 70 and 100 characters (the maximal number of characters per line). Overall, between 75 and 85 characters are displayed per line on average. Unfortunately, there are no studies that indicate whether this longer measure results in worse or better readability.

Additionally, many websites have multiple columns. Line lengths in multi-column layouts can be shorter. Traditionally, justified text should be at the lower end of the range; but without precise control over word spacing and hyphenation, longer lines often yield better results in Web browsers.

While getting the measure right is important, readability can significantly improve with the right leading (line height). Leading is the vertical space of an individual line of text. It is the space between two consecutive lines of text or, in other words, the distance between the baselines of two lines of text. To prevent descenders on one line from overlapping ascenders on the next, giving type generous leading is often necessary. By default, browsers set a line height of 1 em, or 1 * font size, which is often too small to be legible. A widely accepted rule of thumb is to set the leading at 1.5 * font size for paragraphs. In fact, the average line height in our study proved that this convention is still widely adopted (the average line height was 1.48 * font size). As a simple guide, the longer the measure, the greater the leading should be.

Notice that in CSS you can define line-height’s value using a unit-less integer. This number acts as a scaling factor which is related to the size of the type and makes sure that the line-height is also scaled when text is resized. In general, sans serif type requires more leading then serif type and headers require less leading than blocks of text; also, darker typefaces often need more leading than lighter ones.

Tracking (letter spacing), the space between letters, or the density of blocks of text, can also be adjusted relative to the measure. Adjusting the tracking with sub-pixel values in an environment with as low a resolution as the Web is problematic because it can lead to inconsistent results. Because of this, tracking is often applied to highlight sub-headings. However, as a simple guide, if the measure is longer, and you’ve adjusted word spacing, an increase in letter spacing can ordinarily be justified. Approach this carefully. Pairs of characters in certain serifed typefaces can sometimes overlap. They should really be set as ligatures.

When experimenting with tracking, make sure that “AV”, “ft” and “co” are clearly readable, and check that “vv” and “w” are distinguishable: the smallest inaccuracy can make text completely unreadable.

The negative letter spacing of pairs of characters is also called kerning; it may be necessary to adjust character pairs such as “ff”, “fl” and “ffl” that actually should be set as ligatures. In some situations, kerning may be useful for improving the appearance of type; for instance, to move a “T” and small “e” closer together.

Word spacing can be adjusted relative to the measure and line height. Shorter lines warrant less word spacing. Longer lines often benefit from more word spacing, especially if they have a generous line height.

Typographic color is not pigmentation or hue, but rather the consistency of glyphs on the page. A block of text should have a uniform tone if you squint and look at it on the screen. Nothing should jump out. If it does, then reading the text will be interrupted and the flow broken. This should only be done deliberately to call attention to something. Color can also be affected by kerning. Unfortunately, nowadays this cannot be adjusted because browsers do not properly support it.

Trentwalton.com, a memorable typography-conscious blog design by Trent Walton.

General Typographic Terms

Here is a brief overview of typography-related terms ², so that we have a common understanding going into subsequent sections of this article.

An overview of typography-related terms, adapted from Wikipedia.de.

Accent A diacritical mark near or through a letter, indicating a variation in pronunciation. E.g. ç, à, ò, é, Å.

Axis The real or imaginary straight line on which a letterform rotates.

Baseline The imaginary line upon which the letters in a font appear to rest.

Bowl The generally round or elliptical forms that are the basic body shape of such letters as (uppercase) C, G, O, and (lowercase) b, c, e, o, p. Similar to the space known as an “eye”.

Cap height The height of the uppercase letters.

Counter The white space enclosed by a letterform, whether wholly enclosed (as in “d” and “o”) or partially (as in “c” and “m”).

Crossbar Horizontal stroke that connects two strokes in capital letters, such as “A” and “H”.

Drop Cap A large initial capital in a paragraph that extends through several lines.

Flush left Setting lines of text so that any extra space is on the right and the text is against the left margin. Also called ragged right.

Flush right Setting lines of text so that any extra space is on the left and the text is against the right margin.

Glyph Every character in a typeface (e.g. G, $, ?, 7) is represented by a glyph. A typeface may contain more than one glyph for each character. These are usually referred to as alternates.

Ligature Two or more letters tied as a single character to define their spatial interaction.

Majuscule A capital (or other large) letter.

Sans serif A typeface without serifs.

Serif The small stroke at the end of the main strokes of letterforms. Typefaces with serifs are called serif typefaces, and those without are sans serif typefaces.

Small CapsSmall caps are capital letters but not at their full height. Many applications can create small caps by scaling down capital letters, but these false small caps lack the proper weight and proportions. A true small cap typeface retains the appropriate weight but renders the character at a smaller size.

Terminal The end of a stroke that does not include a serif.

x-height The height of the lowercase letters, typically exemplified by the letter x.

In practice, people often use “typeface” and “font” interchangeably. However, typeface refers to the design of a particular face, whereas font refers to the file that contains the glyphs we use. For example, Georgia is a typeface. Georgia-Bold.ttf is a font; a file containing the bold version of that typeface. In other words, the physical embodiment of a collection of letters, numbers, symbols and so on (whether it’s a case of metal pieces or a computer file) is a “font” (the file you select and use).

When referring to the design of the collection (the way it looks), we speak of “typeface”. As an analogy, you play an MP3 file, but you find the song beautiful.

Relative and Absolute font size units

Probably the most distinctive feature of digital type setting is the users ability to adjust font size to their personal preference. When selecting a font size, Web developers can use either absolute or relative units, setting either with CSS. In general, absolute units fit print design better, and using them to set type on the Web is not good practice. The only exception is for print style sheets, where absolute units can help define the dimensions of design blocks on a sheet of paper. Supported size units are pt, pc, cm, mm and in; but the keywords xx-small, x-small, small, medium, large, x-large and xx-large are options as well.

Setting an “absolute” font size does not mean that users cannot increase or decrease the font size; modern browsers allow for extensive text manipulation. Rather, the unit makes it impossible for designers to set a proportion between a parent and child element that would remain even after the font size is manually increased or decreased by the user. Hence, the “absolute” property relates to the way the element is defined in the style sheet, not to the way it is displayed on the screen.

By default, modern Web browsers use a font size of 16 pixels for the <body> element: this is the value used if you don’t explicitly specify any other value for the <body> element in your style sheet. To avoid complicated calculations, Richard Rutter suggested setting the <body> font size to 62.5%, which reduces the size of the text to 16px * 0.625 = 10px. Consequently, when setting the size of a headline to 18px, using 1.8em instead of 1.125em (18px : 16px = 1.125) is more convenient.

In practice, font size is usually set using relative units such as px, em or %. Pixels relate to the resolution of the display. The greater the resolution, the higher the density of pixels. Ordinarily that means smaller text.

An “em” is a unit of measurement defined as the point size of the font you are using 3.

It stands for the distance between baselines when the typeface is set solid (without leading). Ems are a relative unit and act as multipliers based on the text element’s parent element. So, 1 em in a 16 point typeface is 16 points. If the user’s browser has a default font size value of 16 pixels, then 1 em would be 16 pixels, which is essentially just a property of the currently displayed text. If the user decreases the font size to 14 pixels, then 2 em would be 2 * 14px = 28px.

The advantage of using em units for font size is the unit’s native ability to set the proportion between a parent and child element and take advantage of CSS inheritance where the child of an element “inherits” the size of the parent unless explicitly changed. For instance, if the default font size is 16 pixels, and the <body> element has a font size of 2 em and the header inside the <body> tag has a font size of 1.5 em, then the font size of the header would be 1.5 * the font size of the <body> element, which is 1.5 * 2 * 16px = 48px.

To some extent, percentage values are similar to em values: the root of the document, inheritance and the relation between a parent and child element in CSS define the font size of every element. So, in the example above, one could also define the font size of the <body> element as 200% and the font size of the header as 150%; the result would be the same (48px).

In some situations the min-width and max-width properties set with ems or percentages can be very helpful in ensuring a readable measure. Usually, characters average about two-thirds of an em in length. Therefore, between 30 and 50 ems can be seen as an ideal line length.

Because Internet Explorer 6 does not allow users to scale text set in pixels up or down, em or percentage values are recommended. Be careful, though, when using relative units to set type; use some kind of scale or hierarchy (see the section below) to make sure that text elements of various weights are presented accurately and appropriately.

Other relative units are rarely used in practice: although widely supported, neither “ex” nor the keywords “smaller” and “larger” (which decrease and increase the font size by 1.2 em) are used much in style sheets. Again, points (pt) are useful in print stylesheets, but shouldn’t be used for the screen.People’s browser may have slightly different default settings, which can result in unwelcome typographic side effects. To ensure a browser-independent presentation of text, use a CSS global reset that allows you to set type and design all elements of a website in a safe browser-independent environment. There are many kinds of CSS reset style sheets, varying from * { padding: 0; margin: 0: } to quite lengthy ones, such as Eric Meyer’s Reset Stylesheet ⁴.

—

1. Smashing Magazine: Typographic Design Patterns and Best Practices (Michael Martin)
2. This overview is partly based on TypeNow Glossary
3. Originally, em was said to be equal to the width of a capital “M” in a particular typeface, as the“M” was commonly cast the full-width of the square “blocks” in printing presses. However, in modern typefaces, the character M is usually somewhat less than one em wide. Besides, since some character sets do not include a capital “M”, such as Chinese and the Arabic alphabet, today em generally means the height of a font in question.
4. Reset Reloaded (Eric A. and Kathryn S. Meyer)

← The Art and Science of CSS-Layouts (2/2)TOCTypography: Rules and Common Mistake (2/4) →