demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Three Steps to Designing A Good CSS Font Stack

css / typography

Estimated reading time: 4 minutes, 7 seconds

Step One

Choose the font that you wish to be your first, ideal choice. This can be any font at all, but for practical purposes it should be a font on your system. I’m going to choose Segoe UI Light, which is installed with Windows 7 and Vista.

Step Two

Determine the generic font-family to be the last, catch-all choice: look at the font you have just chosen and determine whether it is a serif, sans-serif, cursive, monospace or fantasy font.

Serif Font Exampleserif

Serif fonts are the oldest printed typefaces, with forms originating from the time of the Roman Empire. Serifs are the small structural details placed at the terminating points in the strokes of each letter.

Serif fonts are traditionally used in commercial publishing: most books, newspapers and magazines use a serif typeface for their body text. If you do not specify a font for use in your web page, a serif font, such as Times or Times New Roman, is used by most browsers by default.

You may hear serif fonts referred to as slab serif, Egyptian, or Roman fonts.

sans-serif font examplesans-serif

Sans-serif fonts are fonts without serif structures, but which still use proportional spacing (which distinguishes them from monospaced fonts).

Traditionally used for headings, sans-serif fonts are increasingly being used for body copy. Classic sans-serif fonts include Helvetica, Futura (Stanley Kubrick's favourite font for titling), and Gill Sans. You may also hear sans-serif fonts referred to as Gothic, Doric, humanist or linear fonts.

Monospace font exampleMonospace

Monospace fonts are those in which each letter uses the same amount of horizontal space. (In other words, a monospaced A character will have the same amount of horizontal space reserved for it as an I.) This gives monospace typefaces an appearance associated with computers, electronics, and dot-matrix printers. Classic monospace fonts include Courier and Andale Mono; monospace fonts may also be referred to as fixed pitch or non-proportional fonts.

In an HTML document, content wrapped in a <code> or <kbd> tag will be styled with your browser’s default monospace font.

Fantasy font examplefantasy

While they contain legible characters, fantasy fonts are primarily intended to be used for decoration. The default fantasy font for the Mac, Papyrus, is a good example of this, as a classic example of the lazy typographer’s go-to font for imparting an “exotic” feel (used recently, and to some derision, as the font for Na'vi language subtitles in James Cameron’s Avatar).

Cursive font examplecursive

Cursive fonts are intended to resemble handwriting, and as such should usually be used sparingly. The classic (and much-derived) example of a cursive font is Comic Sans

This generic font-family is the end-cap to the choices for your declaration. In my case, Segoe UI Light is a sans-serif font, so my declaration so far would be:

h2 { font-family: Segoe UI Light, sans-serif; }

Step Three

Create a list of fonts between the ideal choice and the generic font family that are increasingly common and in declining order of preference, covering Mac, Windows and (ideally) Linux. In other words, the second font choice for our example should be as similar to Segoe UI Light as possible, but more common. The font should probably be in the same type classification as the first, ideal choice. For the Mac, I would argue that Helvetica (more ideally Helvetica Light) would be the best choice, as it is installed on 100% of OS X systems. Myriad would also be a good option. Arial (again, ideally a light version) would be a good final catch for both PC and Mac, with Nimbus Sans L to cover Linux. So our declaration would list these in declining order of preference:

h2 { font-family: Segoe UI Light, Helvetica Light, Helvetica, Myriad, Arial Light, Arial, Nimbus Sans L, sans-serif; }

It is possible that fonts like Helvetica will have several font-weights built into them. Using a font-weight of 100 will make no difference to fonts that are already light, but may yield a light version of a standard font, so we will add:

h2 { font-family: Segoe UI Light, Helvetica Light, Helvetica, Myriad, Arial Light, Arial, Nimbus Sans L, sans-serif; font-weight: 100; }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.