ux-patterns

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

See also:

• http://www.typewolf.com/recommendations - really good
• http://www.smashingmagazine.com/smashing-book-1/

Typography for Web Text

Other listings and recommendations include:

• EveryDay Type - Top 10 Webfonts for Text

Headings

• Fanwood - http://www.google.com/fonts/specimen/Fanwood+Text
  • Clean and good for headings and main text
  • Radley - http://www.google.com/fonts/specimen/Radley (less good alternative IMO)

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:

• Main text is Linux Libertine
• Headings (old looking font) is Essays 1743

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