Newsreader Type Specimen

This paragraph shows the rhythm and balance of body text. The quick brown fox jumps over the lazy dog. “Typography,” Bringhurst writes, “must invite the reader into the text and help keep him there.”

Prose Sample

In principio erat verbum — the beginning was the word. Type, when well set, vanishes into the voice of the text, into the meaning itself.

The typographic page is like a musical score: the text is the libretto, the type is the instrument, and the reader is the performer.

Poetry / Verse

And still she slept an azure-lidded sleep,
In blanched linen, smooth, and lavender’d,
While he from forth the closet brought a heap
Of candied apple, quince, and plum, and gourd.

Lists

Code Example

Inline code: font-variant: small-caps;


The end is where we start from. Let the type speak clearly. Let it breathe. Let it sing.

The Elements of Typographic Style

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 on font choice, legibility, hierarchy, kerning, leading and white space. Aimed at print typographers, it devotes only two pages to the screen — yet the fundamentals are as valid for web as print.

Bringhurst argues that letters have tone, timbre and character — just like words and sentences. Typefaces should honor the tone and character of the text.

Letters have a life and dignity of their own ... well chosen words deserve well-chosen letters; these in turn deserve to be set with affection, intelligence, knowledge and skill.

Text blocks should honor and reveal the relationships between headings, subheadings, quotes, asides and footnotes. He recommends 66 characters per line for legibility, though 45–75 is acceptable.

He argues against letterspacing lowercase text but allows exceptions. Leading depends on typeface, style, and language. Web layouts often require more white space than print.

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.

Richard Rutter’s The Elements of Typographic Style Applied to the Web is an ongoing attempt to adapt Bringhurst’s rules for digital practice.

CSS and Typographic Practice

CSS3 reintroduces font embedding and supports pseudo-elements like :first-letter and :first-line — useful for drop caps and small caps. Some fonts lack proper small caps; browsers fake it by scaling down caps, often inconsistently.

The :before and :after selectors add typographic decoration without extra HTML. Examples here include fleurons and pilcrows.

Common Practices

Widows and orphans are hard to control online. The Widon’t jQuery plugin adds a non-breaking space between the last two words in a paragraph to prevent widows.

Typography in Context

This page is set in Newsreader, sized at 1.2rem with a line-height of 1.618. The container is ~66 characters wide. Drop caps and fleurons use :before and :first-letter. Quotes, dashes, and small caps reinforce typographic structure and voice.

Robert Bringhurst Quotes

Typography is the craft of endowing human language with a durable visual form.
― Robert Bringhurst, The Elements of Typographic Style
Tags: design, language, typography
49 likes
By all means break the rules, and break them beautifully, deliberately and well.
― Robert Bringhurst, The Elements of Typographic Style
41 likes
In a badly designed book, the letters mill and stand like starving horses in a field... the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles.
― Robert Bringhurst, The Elements of Typographic Style
Tags: book-design, typography
22 likes
Literature in the written sense represents the triumph of language over writing: the subversion of writing for purposes that have little or nothing to do with social and economic control.
― Robert Bringhurst, The Solid Form Of Language
Tags: language, literature, writing
21 likes
If language is lost, humanity is lost. If writing is lost, certain kinds of civilization and society are lost, but many other kinds remain...
― Robert Bringhurst, The Solid Form Of Language
Tags: civilization, humanity, language, society, writing
14 likes
Wings are a constraint that makes it possible to fly.
― Robert Bringhurst, The Tree of Meaning
Tags: formalism, freedom
13 likes
When you think intensely and beautifully, something happens. That something is called poetry...
― Robert Bringhurst, The Tree of Meaning
10 likes
Essay on Adam: There are five possibilities. One: Adam fell. Two: he was pushed. Three: he jumped... the one theological question.
― Robert Bringhurst
Tags: death, demons, murder, suicide
9 likes