It behooves the typographer to treat their content with respect, attention to detail and restraint. As we have seen in the previous sections, there are currently a number of techniques and practices which can be utilised to improve general typography on the web. Most enjoy wide browser support. Those that don't are ignored and do not hinder display.

These can be summarised in the following list and comprise a combination of the guidelines of Bringhurst, Rutter and Felton —

Achieve typographic hierarchy with 2 fonts or less

Passages of text need a visual hierarchy in order to be readable. This can be achieved through the use of different typefaces for headings and paragraphs, for example. The aim is to achieve a contrast between those elements, allowing the eye to easily discern the structure of the document.

Matching typefaces is an acquired skill – it is all too easy to choose typeface pairings, which are inappropriate or lack sufficient contrast. A simple approach is to pair a sans-serif with a serif, using the sans for headings and the serif for paragraphs, or vice versa.

An alternative approach is to choose a single typeface, which contains a wide variety of styles. Alegreya, for example, has 12 styles, with weights from regular to black, italics and small caps. This single font has sufficient contrast between its styles to achieve the hierarchy required.

HTML and CSS support a standard range of type hierarchy specifications including six heading tags, the paragraph tag and blockquote tag. These can be further supplemented by using classes to adjust those settings for specific uses, for example text in a side bar. HTML5 introduces further tags such as <article>, <aside>, <header> and <section>. Collectively, these give users of type effective control over the hierarchy of their content, from the main page heading to section headings, subheadings, to paragraphs asides and quotes.

“Typography exists to honor content.”
- Robert Bringhurst

To this end it is important to let each hierarchy setting reflect its purpose in the text. A <h1> should have more prominence than a <h2> and so on. Prominence, and by extension, hierarchy, can be achieved through size, but also through weight and colour.
Back to top ⇑

Use 14- 16px for body copy

This is a fluid measurement, based largely on the average monitor resolutions. As monitors have grown in size and resolution, pixel sizes have diminished in a real sense. When the average monitor resolution was 1024 x 768 pixels a base type size of 10 - 12 pixels was common. Resolutions have increased dramatically in recent years, 1920 x 1080 pixels is not uncommon today.

Using a base size of a minimum of 14 or 16 pixels is more appropriate to these high resolutions. This size does depend on the individual font specified — faces with large x-heights such as Verdana can maintain legibility at relatively small sizes. In a font with a low x-height, a size of 18 px may be more appropriate. The base or root size should be specified in the #body selector. All subsequent measurements should be set in ems.

The em is a proportional unit, based on a root font-size. An em may be specified to three decimal places. The main advantage to using ems is its’ scalability. The entire design may be resized simply by changing the root font-size. The em is generally a preferable measurement to the pixel due to its’ scalability. It is particularly useful in this age of responsive web design.

A disadvantage of using ems is that they suffer from inheritance. Take the example of a list menu system with sub-menus. A font-size of 1.2 ems will be inherited and compounded by the submenu giving a multiplication of values. Assume a root size of 16px = 1em. The list size will then be 16 x 1.2 = 19.2px. The submenu will inherit the 19.2 value and apply the 1.2 value to it giving a size of 23.04px. CSS3 includes the rem (root em) specification to remedy this, but only the more recent browser releases offer support.
Back to top ⇑

Use well-hinted, legible, open typefaces

Although it is possible to extend the core font-stacks, many of the additions recommended by Ford and Sindhu are digitized printer fonts, which are either closed in nature (Helvetica) or have a low x-height (Garamond). The “C” fonts released by Microsoft and installed by default with Microsoft Office (Cambria, Calibri, etc.) are a useful addition to the core stacks.

When choosing an embedded font, it is important to apply the same considerations. An exception can be made for typefaces in large, display sizes (approximately 48px and larger). Using a unique font can do wonders for a websites brand and individual identity. The emergence of CSS font embedding coupled with services such as Typekit, Fontdeck, FontSquirrel and the Google fonts API have largely superceded the earlier embedding technologies such as FLIR, sIFR and Cufón.

While FLIR and Cufón may be obsolete, there still may be occasions when sIFR might be useful, such as when a fonts' EULA does not permit conversion to a web format.

As well as the afore-mentioned services, there are also a number of free font catalogues such as DaFont where individual font licenses may permit conversion to web formats. All the current major browsers and legacy versions of Internet Explorer right back to version 4 support embedding.

A significant drawback of embedded fonts is that the bandwidth overhead for embedded fonts can be quite high, particularly with elaborate and/or well hinted fonts. This may not be an issue on desktop systems but would place a considerable overhead for mobile (3G) users. This may be alleviated in the future as true 4G networks are rolled out.
Back to top ⇑

Headlines should be correctly kerned

Most browsers ignore font’s built-in kerning tables (with the exception of Firefox) and kerning errors will be more pronounced at large sizes. The Javascript library Lettering.js can be a useful tool in kerning the letter-pairs in headlines. It works by wrapping a span around each letter, which may then be letter-spaced using CSS. This approach is a little cumbersome, and wholly inappropriate to body text, both due to the labour overhead and to the bloating of the code. This author would recommend its’ use with display fonts only.
Back to top ⇑

Don’t letterspace lowercase without reason

Typefaces are designed with whitespace around each letter, with kerning tables adjusting this space based on individual letter-pairs. Increasing the letterspacing can be impeded (Rutter, 2004-10) the legibility of the text as this whitespace is extended.

“A man who would letterspace lower case, would steal sheep, Frederic Goudy liked to say.”
- Bringhurst (1992)

Both Bringhurst and Rutter concede that certain typefaces can benefit from letterspacing, for example Impact and Haettenschweiler, but these should really be used for display only.
Back to top ⇑

Letterspace strings of capitals, small-caps and numbers

Strings of numbers, abbreviations and small-caps should be letter spaced using the CSS letter-spacing property. A spacing of 5 – 10% (0.05 – 0.01 ems) is sufficient.

“Many typographers like to letterspace all strings of numbers as well. Spacing is essential for rapid reading of long, fundamentally meaningless strings such as serial numbers, and is helpful even for shorter strings such as phone numbers and dates.”
- Rutter (2004-2010)
Back to top ⇑

Use flush-left ragged-right alignment

Effective justification of text can only be achieved with long lines and the hyphenation of long words. Designers in print routinely track (letter-space) individual lines to avoid large word spaces and rivers, a process currently not possible in web typography.

Since most websites use multi-column grids, which reduce line length; and while hyphenation is, at the moment, a draft specification, the recommendation is to set paragraphs flush-left and ragged right. This prevents rivers appearing through the text, which are both unsightly and distracting.

“Renounce the use of other alignments, for they bring extra torment upon already busy eyes.”
- Felton (2006)
Back to top ⇑

Use between 40 and 75 characters per line

Rutter describes this a “choosing a comfortable measure”. This measure can only be applied to the main content area and will depend on the base font size. With a base size of 16px, a content div with a width of 500px will give approximately 70 characters per line (depending on the font used).

If setting measurements in ems, a width of 40ems should be used. Because many site designs today are fluid or liquid (resizing depending on the viewers window size) a more flexible approach can be used. The CSS min-width and max-width properties can be used to set limits on this resizing.

#text-box{ min-width:400px; /* 33ems */
max-width:600px; /* 45ems */ }
Back to top ⇑

Use a line-height which suits the typeface

Some browsers add line-space by default (Safari and Internet Explorer) while others don’t (Firefox). CSS resets such as Eric Meyers or normalize.css will remove this allowing a global line-height to be set. The size of this line-height is dependent on the size of the x-height of the font, the typographic colour of the font and on the line length. The typographic colour refers to the ‘blackness’ of a font. A darker font will need more line-spacing than a lighter one.

Line length is possibly more significant – the eye needs sufficient line-spacing to easily move from the end of one line to the start of the next. Many typographers (Tim Brown) suggest using the golden mean (1.618) as a good ratio of type size to line-height while others (Rutter, Santa Maria) hold that this is an arbitrary figure and the measurement should be considered; based on colour, line-length, x-height and individual font characteristics.

This author tends to agree with the second viewpoint, and finds that if the eye can comfortably move from one line to the next without getting lost, the line-height which best achieves that has served its’ purpose. In practice this can be anything from 1.3 to 1.8, although 1.5 is a good starting point. The selected line-height should then be used consistently on all elements. It is also useful as a unit of measurement in determining paddings, margins and indents. Multiples of the line-height may also be used without breaking out of the underlying baseline grid.
Back to top ⇑

Don’t set body text in all-caps

The received wisdom amongst typographers is that lowercase is more legible than uppercase, because we recognize word shapes. This, hypothetically, is an easier process with lowercase because the ascenders and descenders create more distinctive word shapes or ‘bouma’.

Recent research by cognitive psychologists (Kevin Larson, 2004, The Science of Word Recognition) however, suggests that we use letters within the word to recognize the word. Ralf Herrmann, while accepting this scientific model (known as parallel letterwise recognition) holds that lowercase is more legible, as ascenders and descenders aid individual letter recognition.

“In such situations, ascenders and descenders will support reading, even though not in the sense of whole word shapes, but in the sense of single letter recognition.”
- Herrmann, 2011

Typographers, then should avoid setting multiple lines of text in capitals. An exception is the first line of the opening paragraph on a page. Traditionally these have been set in small-caps; the :first-line{text-variant:small-caps;} property supports this in CSS. A caveat is that the majority of typefaces (especially screen designed typefaces) do not have a small-caps variant.

It is possible to replace text-variant:small-caps with text-transform:uppercase and decrease the font-size slightly. This approach is less than ideal, however, as the smaller capitals will display in a lighter weight than the rest of the (larger) body text.
Back to top ⇑

Set opening paragraphs flush left

An indent in the first line of a paragraph is a widely used method of marking the start of a section within the body of a text. The opening paragraph does not need such a marker and should therefore not be indented.

Valid alternatives to the indent include block paragraphs (a paragraph followed by a line break) outdents, and ornamented indents such as a pilcrow or the hedera used on the accompanying website. This can be accomplished by using the :before pseudo-element.
Back to top ⇑

Add extra space before and after quotations

A line space should be added before and after a block quotation. This space should conform to the baseline grid. If a line-height of 1.6em is being used, for example, a margin of 1.6em should be applied to the blockquote at the top and bottom.

Blockquotes are indented in browsers by default. This author suggests over-riding the default indent and replacing it with a multiple of the base unit, for example 1.6em, 3.2em, 4.8em etc. Alternatively, blockquotes may be centered, or indented and centered.

“However the block quotations are set, there must be a visual distinction between main text and quotation, and again between the quotation and subsequent text.”
- Rutter (2004-10)

Blockquotes are commonly set in italics as their visual basis in handwriting lends them a personal voice. The font-size of the blockquote may be different to the main body, but it should conform to the baseline grid.
Back to top ⇑