7 CSS Web-safe Fonts for Anything and Everything

August 19, 2013 By BJ Cook,

After excruciating contemplation and individual critique of current web-safe fonts - fonts that are found on most operating systems like Windows, Mac, etc. and are therefore available to most tech users - I managed to whip up a short list of 7 of my own personal favorite typefaces, each paired along with a brief description and common font combinations in CSS that you will hopefully find helpful or meaningful in some way. Let's get to the grit of it:

SANS SERIF

Century Gothic - A wide, light font. It shares several similarities with Avant Garde, another web-safe font, save for the lack of a descender on the lowercase u, and larger, rounder tittles (the dots above lowers i's and j's). Century Gothic is a practical font for display work, headers, and sometimes even subheaders, but I'd suggest steering clear away from it when writing out large blocks of text.

.classname { color: #000000; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; }

Futura - A family favorite sans serif typeface. Futura boasts geometrically balanced proportions, crisp and clean forms, and razor-sharp apexes. It's a versatile font that draws the viewer in due to its rather unrestrained sense of forwardness, and is oftentimes used for both design and commercial purposes.

.classname { color: #000000; font-family: Futura, "Trebuchet MS", Arial, sans-serif; }

Helvetica - The designer's go-to. It's somewhat more refined than the ubiquitous Arial, using mostly horizontal/vertical strokes as opposed to the diagonals frequently found in Arial. Another couple solid features are its legibility and neutrality, two traits which render Helvetica a font adaptable for use on projects modern or classic, up-and-coming or traditional.

.classname { color: #000000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

SLAB SERIF

Rockwell - Typically, we might associate this font with a certain image: something extending from the western cowboy universe, or some other iconic variant. Rockwell, however, should not be underestimated (or stereotyped in such a way) - its robust slab "square" serif design sets the typeface apart as an honest display font ideal for poster text and bold headliners.

.classname { color: #000000; font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif; }

SERIF

Baskerville - A transitional font that stems from classic typefaces and at the same time, uses the high contrast, vertical stress, and sharp finishes found in more modern fonts. Serifs are generally more horizontal and tapered than those of its old style predecessors. Baskerville is a solid choice if you want to convey something more serious and refined/something that seeks agreement and respect.

.classname { color: #000000; font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; }

Didot - A modern serif font that takes the contrasts of transitional fonts like Baskerville to the extreme. Didot features abrupt, unbracketed, thin serifs, and high contrasts between thick and thin strokes, creating an overall appearance that is in control and unmistakably elegant. Use it with generous margins and lots of white space for the best results.

.classname { color: #000000; font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; }

Garamond - A serif font that is easily recognizable by its excellent readability and dignified appearance. It's well-suited for a range of applications probably in part to its large family of faces/interpretations. In general, Garamond is great for newsletters, business forms and cards, and anything official in between. Feel free to use it for blocks of text.

.classname { color: #000000; font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; }

Ingrid Chen is DO's current Design Intern and is our most stylish intern to date.