Font Family Groups

Quick list of some handy font family groups (often called "font stacks") for web design and Drupal theme development. Includes the three groups that come with Adaptivetheme starter theme and an example of how to set the font-family in your CSS.

Basic Groups

Sans serif - smaller

"Helvetica Neue", Arial, Helvetica, sans-serif

Sans serif - larger

Verdana, Geneva, Arial, Helvetica, sans-serif

Serif - smaller

Garamond, Perpetua, "Nimbus Roman No9 L", "Times New Roman", serif

Serif - larger

Baskerville, Georgia, Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", serif

Myriad

"Myriad Pro", Myriad, "Trebuchet MS", Arial, Helvetica, sans-serif

Lucida

"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, Geneva, sans-serif

Times

"Times New Roman", Times, serif

Monospace

"Courier New", Monaco, "Nimbus Mono L", monospace

Adaptivetheme Groups

Body font-family set in starter.css

Verdana, Geneva, "DejaVu Sans", sans-serif

pre,code,tt,samp,kbd,var, .block-region (monospace fonts set in base.css)

"Lucida Console" , Monaco, "DejaVu Sans Mono", monospace

Block edit links

Arial, Helvetica, "Nimbus Sans", sans-serif

Usage

To use on any element such as the body and h1 tags:

body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
h1 {
  font-family: Georgia, Palatino, "Palatino Linotype", "Book Antiqua", serif;
}

Last updated 22nd May, 2010 - 11:48pm

Authored by Jeff Burnz on