Raptor

UI Toolkit

Colors

Headers

Header Bars

Classifieds

Autos

Homes



.ssh Headers

BentonSansCond Bold

font-size: 3em; line-height: 1.25; margin-bottom: 0.5em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 2.25em; line-height: 1.333333; margin-bottom: 0.666667em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 1.5em; line-height: 1.5; margin-bottom: 0.5em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 1.3125em; line-height: 1.142857; margin-bottom: 0.571429em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 1.125em; line-height: 1.333333; margin-bottom: 0.666667em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 1em; line-height: 1.5; margin-bottom: 0.75em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header



.uh Headers

BentonSansCond Bold

font-size: 3em; line-height: 1.25; margin-bottom: 0.5em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 2.25em; line-height: 1.333333; margin-bottom: 0.666667em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 1.5em; line-height: 1.5; margin-bottom: 0.5em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 1.3125em; line-height: 1.142857; margin-bottom: 0.571429em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 1.125em; line-height: 1.333333; margin-bottom: 0.666667em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


BentonSansCond Bold

font-size: 1em; line-height: 1.5; margin-bottom: 0.75em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header



.sssh Headers

Arial Regular

font-size: 3em; line-height: 1.25; margin-bottom: 0.5em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


Arial Regular

font-size: 2.25em; line-height: 1.333333; margin-bottom: 0.666667em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


Arial Regular

font-size: 1.5em; line-height: 1.5; margin-bottom: 0.5em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


Arial Regular

font-size: 1.3125em; line-height: 1.142857; margin-bottom: 0.571429em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


Arial Regular

font-size: 1.125em; line-height: 1.333333; margin-bottom: 0.666667em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header


Arial Regular

font-size: 1em; line-height: 1.5; margin-bottom: 0.75em;

Robert Bringhurst’s book: The Elements of Typographic Style

Header

Header



In the Wild

 

Robert Bringhurst’s book

The Elements of Typographic Style

The measure is about 85 characters wide with a normal sentence and 60 characters wide with all-caps.

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be a must for everybody in the graphic arts, and especially for our new friends entering the field.

In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.

At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time. You can subscribe to an RSS feed for notification of new additions.

I am excluding those principles which are not relevant to the Web or that do not require a technical explanation. Unfortunately this excludes the entire opening chapter, the Grand Design, which I heartily recommend you read as it lays down the foundations, philosophy and approach to good typography in any medium. If you were to take any working principle from the Grand Design, it would be this: Give full typographical attention even to incidental details.

Now start with Rhythm & Proportion or dip into the Table of Contents and enjoy pushing a few boundaries to create websites of real typographical worth.

— Richard Rutter, Brighton, 2005.

 
 

Robert Bringhurst’s book:

The Elements of Typographic Style

The measure is about 85 characters wide with a normal sentence and 60 characters wide with all-caps.

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be a must for everybody in the graphic arts, and especially for our new friends entering the field.

In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.

At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time. You can subscribe to an RSS feed for notification of new additions.

I am excluding those principles which are not relevant to the Web or that do not require a technical explanation. Unfortunately this excludes the entire opening chapter, the Grand Design, which I heartily recommend you read as it lays down the foundations, philosophy and approach to good typography in any medium. If you were to take any working principle from the Grand Design, it would be this: Give full typographical attention even to incidental details.

Now start with Rhythm & Proportion or dip into the Table of Contents and enjoy pushing a few boundaries to create websites of real typographical worth.

— Richard Rutter, Brighton, 2005.

 

Form

Text-Like Inputs

Buttons





Monitor Spacer