Robert Bringhurst's The Elements of Typographic Style is widely considered to be the pinnacle of typographic practice, cited by typographers such as Hermann Zapf, Jonathan Hoefler and Richard Rutter as the typographers Bible. It provides guidance in terms of font choice, legibility, hierarchy, kerning, leading (line-spacing) and white space.
Bringhurst examines the minutiae of typographic practice, right down to the more esoteric symbols and their uses. The book is aimed squarely at print typographers, devoting only two pages to the screen, nevertheless the fundamentals of typographic design are as valid for the web as for the printed page. Legibility, hierarchy and structure are perhaps even more important in hypertext, with its added visual complication of links.
Bringhurst argues that letters have tone, timbre and character, just as words and sentences do (sic). Typefaces should be chosen which honour the tone and character of the text.
Letters have a life and dignity of their own ... well chosen words deserve well-chosen letters;― Robert bringhurst, teots
these in turn deserve to be set with affection, intelligence, knowledge and skill.
Text blocks should be constructed such that they 'honor and reveal' the relationships between the various elements - headings, subheadings, quotes, asides and footnotes. He recommends a character count per line of approximately 66 letters for optimum legibility, but accepts that anything between 45 and 75 is satisfactory. This has implications with regard to min-width and max-width settings on text containers, particularly in relation to responsive frameworks, such as Foundation, Columnal and Skeleton.
He argues against letter spacing lowercase letters in most cases, (as their legibility is hampered) but makes exceptions for certain typefaces.
His recommendations on leading (line-height) are more variable, depending on a number of factors such as typeface, style and language. Bringhurst's relatively tight leading is based on the printed page, with an average of 45 lines of text. Web pages tend to be substantially longer, so more white space is needed. Tim Brown's article on A List Apart has some useful tips in this regard. He recommends using the golden mean (1.618) as a method of devising a scale. If the base unit for type is one em, the line-height can be set to 1.618 ems. The mathematics can become cumbersome, especially with nested elements such as lists (the rem or root-em unit has been devised to deal with this issue), so it can be simpler to round down the numbers. Wilson Milner suggests using pixels rather than ems as a unit, as the fractions start to get messy and predicting how browsers round your values makes it hard to be exact (sic).
Line spacing is to a degree dependent on the typeface being set (Bringhurst recommends more leading for sans-serif than for serif) and typefaces with small x-heights need more line-spacing that those with larger, so it is best to use the golden mean as a guideline than as a rule.
Typography exists to honor content ... In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn.― Robert bringhurst, teots
Richard Rutter has attempted to translate Bringhurst's guide to the web. The Elements of Typographic Style Applied to the Web is incomplete — commenced in 2005, it is still a work in progress. Nevertheless it is a hugely useful resource in the effort to improve web typography.
The aforementioned agree that paragraph justification (flush left and right) is something to be avoided on the web as it introduces unsightly rivers. It is possible that kerning support in CSS4 may alleviate this, but for now the advice is to set paragraphs ranged left, ragged right.
Unicode supports many symbols outside the basic latin character set including hyphens, en and em-dashes. In typographic terms each has a different purpose — hyphens are used to group words, for example, while an em dash is used to indicate a break in the flow of the text. Both "-" and "—"have been used extensively across these pages.
CSS Typography
While CSS2.1 depreciated font-embedding, it has been re-introduced in CSS3. CSS2.1 included pseudo-elements and pseudo-classes which can be used to change or add content to html elements. These can be very useful in adding extra content to elements. The :first-letter pseudo-class, for example, allows the setting of drop capitals; the :first-line pseudo-class allows the first line of a paragraph to be in small caps, as seen at the start of this page. Both of these have been official specifications since CSS1, with Safari 3.1 being the first browser to fully support them in 2005. There are some flaws however in the implementation across browsers and fonts. Many fonts, including Cambria, Georgia and Calibri don't have small caps in TrueType form, so the browser is left to reduce normal caps to small cap size. Note the difference in size and weight between the J, G and date with the rest of the letters in the opening line above. Drop Caps also have their quirks, requiring margins to set them into the text. Firefox, unusually, treats :first-letter differently to all the other main browsers. The pseudo-elements are well supported, with only IE6 and earlier failing to display.
The pseudo-classes :before and :after are particularly useful, as they allow the addition of content without requiring any additional markup in the html. Examples on this page include the fleuron/asterisk beside the main title and at the start of the main paragraph sections.
In Summary
There are many typographic best practices which can be implemented today and which enjoy wide support across browsers and platforms. Baseline grids, line-height, min and max-widths, indents (using margins) can all be easily controlled using CSS2.1. The introduction of new pseudo-selectors (:first-letter, :first-line, :before and :after) in CSS3 opens up many more possibilities. These pages use a number of those selectors including —
- Drop caps on the first paragraph (:first-letter)
- Small caps (faux) on the first line (:first-line)
- Fleuron/asterisk to the left of the main heading (:before)
- Fleurons/pilcrows preceding paragraphs & list items (:before)
These selectors are supported across all the current browsers and legacy browsers such either offer partial support or degrade gracefully. IE7 supports :first-line and :first-letter but not :before or :after.
IE6 does not recognise there selectors and simply ignores them.
Note: Webkit, Trident and Opera browsers are consistent in their rendering of :first-letter, Firefox unusually, renders differently, requiring a mozilla specific fix on these pages (different margin settings).
Unicode glyphs are commonly used, eg: the ampersand "&" and the quote marks themselves. These must be hard coded to the html and therefore they and the various hyphens and dashes should be considered content (html markup) rather than style (CSS).
A final point is that common typographic faux-pas such as widows and orphans are almost impossible to avoid, due to variability of typeface and rendering. Widon't is a jQuery plug-in (also available for wordpress) which attempts to avoid widows by inserting a non breaking word space between the last two words in a paragraph. While this avoids the widow, it can open a gap in the rag of the paragraph.