CSS Ready Web Safe Fonts (Typefaces)

Here is a list of CSS ready web safe fonts, or typefaces; something every web designer or web developer should have handy. Each entry in this resource list is in the usual CSS font family format (first choice, second choice, etc.) for easy copy/paste and grouped by generic family. I've also included a few typography notes on conventional uses for each generic font family.

 

Serif Typefaces:
Serrifed fonts (typefaces with extra detials in the strokes) are typically used in print material (books and newspapers) where they are easier for the human eye to read, but many magazines now use sans-serif typefaces because they are thought of as "cleaner." On the web, these fonts can be harder to read, especially in smaller scales, but they can become more legible when presented at larger sizes, like for headings.

font-family: 'Bookman Old Style', serif;
font-family: Copperplate, 'Copperplate Gothic Light', sans-serif;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: 'Times New Roman', Times, serif;

 

Sans-Serif Typefaces:
Sans-serif fonts (type faces with no extra features) are more typically used for headlines than for body text when used in print, but on the web (more specifically on low resolution screens) sans-serif fonts have become the standard for body text because the lack of extra details on the font strokes allows them to be more legible, particularly at smaller sizes.

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Arial Narrow', sans-serif;
font-family: Century Gothic, sans-serif;
font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

 

Monospace (Modern) Typefaces:
Mono-space type faces (also called "modern" fonts) are set with characters of equal widths. Modern type faces were originally developed for typewriters, but have found their place on computers because they make it easier to: read source code, lay out tabulated data in a plain text format, and to contextually segregate programming language from natural language text.

font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: 'Lucida Console', Monaco, monospace;

 

Cursive (Handwriting) Typefaces:
Cursive fonts are meant to mimic the nature of their hand written counterparts. For hand written documents, cursive allows for faster, easier and more personalized production of writing. On the web, these fonts are typically less formal, conveying a relaxed context.

font-family: 'Comic Sans MS', cursive, sans-serif;

 

If you have any more suggestions for my list of CSS ready web safe fonts, please let me know. Likewise, if a typeface I've listed here is not web safe font (commonly installed on all Linux, Windows, or Mac systems) I'd like to know that as well.

Comments

    Post a Comment