Modern Web Typography

History of Fonts on the web

<FONT> tag

could customize fonts: size, color, face

Image Replacement

hide text, and use images instead

  • no images, can't read
  • heavy pages
  • lot of work


  • use flash for font, gross…
  • text wasn't selectable


??what what

web fonts using @font-face

  1. introduced in IE 4
  2. adopted by CSS 2
  3. removed in 2.2.1
  4. finally added by browsers 2 years ago

Font-face syntax

css file

  @font-face {
    font-family: 'MyWebFont';
    /* IE9 ... */ 
    src: url('webfont.eot');
     /* ... font declarations for every fricking browser */
     /* Modern Browsers */
     url('webfont.woff') format('woff');

Selecting Font

No Rules

  • except that Comic Sans and Papyrus are terrible

Display Faces

  • Good for Headlines, bad for body text

good site examples


Browser Issues

  • FOUT
  • Hinting
    • How a font is rendered on different browsers
      • some browsers are weighted heavier

Tools to help with font

Jquery plugins

  • lettering.js
    • a jquery plugin for radical web typography
  • fitText
    • jquery for inflating web text
  • kern.js

Sources for Web Fonts

  • free and open source

font squirrel (.com)

  • Have a Font-Face Generator

How to Use Fonts in Drupal

Directly in Themes

Drupal Modules

  • Google Fonts API
    • great for using Google Fonts
  • @font-your-face
    • can preview fonts in modules

from Drupal Camp Colorado 2011