Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Choose proper font typography

Monday, March 25th, 2013 by Servage

When it comes to designing websites, many designers use their own unique style, and chose among the fonts they discover and find useful for a particular purpose. However, many designers are not typographers – you can’t be an expert on everything ;-) This often font-selection to fit a particular need becomes a randome selection between things the individual designer finds interested. Also, using multiple fonts in a website is not uncommon, especially since you often need various sizes, or even different fonts, to properly distinguish different types of headings and text in your layout.

The font selection process becomes a lot easier with the following font-stacks. They have been grouped by typographical relation, so they match well, and are also web-safe, meaning that they will always work, since the stacks fall back on one specific web-safe font each. This gives you a much quicker and typograhically correct way of selecting a font-family for your web-projects.

The Times New Roman-based serif stack

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular",
Times, "Times New Roman", serif;

A modern Georgia-based serif stack

font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif,"
"Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

A more traditional Garamond-based serif stack

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua",
Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond,
"Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook",
"Century Schoolbook L", Georgia, serif;

The Helvetica/Arial-based sans serif stack

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT",
"Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma,
Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

The Verdana-based sans serif stack

font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans",
"Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

The Trebuchet-based sans serif stack

font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans",
"Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

The heavier “Impact” sans serif stack

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat",
"Bitstream Vera Sans Bold", "Arial Black", sans-serif;

The monospace stack

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
"Courier New", Courier, monospace;
Choose proper font typography, 3.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials, Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.