ux-patterns

This page lists typography and typographical layouts that make for good UX and great sites. Primarily a list of examples.

See also:

Typography for Web Text

Other listings and recommendations include:

Headings

Yanone Kaffeesatz

Beautiful, distinctive and easy to read.

Yanone Kaffeesatz on Google Webfonts

Volkor

Arvo

But do not like the ‘s’ …

General

Cardo

PT Sans and PT Sans Narrow

For (Primary) Headings is PT Sans Narrow

CSS example:

h1 {
  font-family: 'PT Sans Narrow', Helvetica, Arial, sans-serif;
  font-size: 32px;
  color: #2f2e2d;
  text-shadow: 1px 0 1px rgba(255, 255, 255, 0.6);
  line-height: 25px;
}

In the head of your page add:

<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet" type="text/css">

In action: http://okfnlabs.org/ddc-resources/

Also worth seeing PT Sans (normal).

OpenSans

OpenSans on Google Webfonts

CSS example (from OpenSpending:

.brand, .topbar, h1, h2, h3 {
  font-family: 'OpenSansRegular';
  font-weight: normal;
  letter-spacing: -0.06em;
}

Alegreya

A lovely Argentinian typeface.

Alegreya on Google Webfonts and in small caps version.

Fanwood

Fanwood on Google Webfonts

Ledger

Ledger on Google Web Fonts


Dive into HTML5 by Mark Pilgrim

Dive into HTML5 is a textbook-style site and, as such, heavily text-based and provides a great example of elegant typography and clean layout. Key fonts:

Side Notes

The top notes from the site’s CSS provides a great listing of “Acknowledgements and Inspirations”:

"The Elements of Typographic Style Applied to the Web" ... http://webtypography.net/toc/
"Use the Best Available Ampersand" ....................... http://simplebits.com/notebook/2008/08/14/ampersands.html
"Unicode Support in HTML, Fonts, and Web Browsers" ....... http://alanwood.net/unicode/
"Punctuation" ............................................ http://en.wikipedia.org/wiki/Punctuation
"Essays 1743" ............................................ http://www.thibault.org/fonts/essays/
"Linux Libertine" ........................................ http://linuxlibertine.sourceforge.net/
"CSS Styled Restaurant Menu" ............................. http://www.web-graphics.com/mtarchive/ItalianMenu.html