Normal body text for paragraphs.
Small text for captions or footnotes.
Very small text (labels/meta).
“Photography takes an instant out of time, altering life by holding it still.”— Dorothea Lange
| Name | Role | Location |
|---|---|---|
| Alice | Designer | London |
| Bob | Developer | New York |
| Charlie | Writer | Berlin |
Use for page titles and major sections.
Use for sub-sections or major content blocks.
Use for smaller sub-sections.
Great for inline headings or callouts.
This is normal body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is small text, for footnotes or captions.
Very small text, often for labels or meta info.
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.”
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.
Inline code: font-variant: small-caps;
The end is where we start from. Let the type speak clearly. Let it breathe. Let it sing.
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.
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.
:first-letter.:first-line.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.
This page is set in Baskervville, 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.
Typography is the craft of endowing human language with a durable visual form.― Robert Bringhurst, The Elements of Typographic Style
By all means break the rules, and break them beautifully, deliberately and well.― Robert Bringhurst, The Elements of Typographic Style
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
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
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
Wings are a constraint that makes it possible to fly.― Robert Bringhurst, The Tree of Meaning
When you think intensely and beautifully, something happens. That something is called poetry...― Robert Bringhurst, The Tree of Meaning
Essay on Adam: There are five possibilities. One: Adam fell. Two: he was pushed. Three: he jumped... the one theological question.― Robert Bringhurst