On web typography

Back in 2009, Jason Santa Maria wrote a great article, “On Web Typography,” for A List Apart. I want to restyle this blog and fonts are one of the first things to think about.

“The system fonts we commonly use such as Georgia, Verdana, and Arial have become so ubiquitous that any associations we might have with them other than “web” are pretty much gone.”
— Jason Santa Maria


Tips

  • Use fonts that are easy to read.
  • Start by picking the font for body copy and look for typefaces that are legible at smaller sizes and have a good contrast between characters. High x-heights and a strong character body (e.g., Verdana and Georgia) help with this.
  • A classic approach is to pair a serif and a sans serif font.
    • Fonts from the same designer can work well together, e.g., Eric Gill’s Perpetua and Gills Sans.
    • Consider fonts that were made to be paired, like Meta Sans and Meta Serif. (For my portfolio site, I used Droid Sans and Droid Serif.)
    • Fonts designed on similar principles, like Futura and Bodoni, can work well together — these were both inspired by simple geometric forms.
  • Choose typeface families with a good selection of weights and styles to give yourself more flexibility.
    • Play a bold off of a light or italic weight for contrast.
    • Try all caps or small caps with some letter spacing for a subhead.

How to

  • For instructions on using different fonts, read “How to use CSS @font-face” on Nice Web Type.
  • For instructions on adding the WP Google Fonts plugin for WordPress sites, read WP Google Fonts in the WordPress.org site.

Leave a Reply

Your email address will not be published. Required fields are marked *