Introduction to Typography
Typography is one of the most important concepts in design, and poor typography selection can really effect the performance of a product, be it a website or for print.
There are two main types of font, serif and sans serif. The graphic below illustrates the difference between the two.
Difference between Sans-Serif (left) and Serif (right) fonts. Notice the trailing lines from the edges of letters highlighted yellow.
Traditionally, designers could use any font they wish, and once printed they can rest assured that everyone will see the same design, layout and typeface.
Web designers face a far greater challenge than designers for print as they have to select a font family from a very limited list, as there is never a single font that is installed on 100% of computers across Windows, Apple and Linux operating systems. Even when the same font family is available, there is no guarantee that everyone will see the same exact thing due to differences in how they are rendered by various operating systems.
Because of this, web designers use what's known as a web safe font list which lists the most commonly installed fonts on all machines.
Show below are the most popular web safe fonts with some sample text showing a sentence, bold and italic styles. It also shows the percentage availability of the font on Windows, Apple Mac and Linux and provides an average "score" for the font.
The list also provides a web safe font stack which you can use in CSS and includes the intended font, alternative font, Mac and, if available, Linux alternative.
Serif Web Safe Fonts
Times Times TimesTimes | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 99% Average |
font-family:"times new roman", times, serif; 99%99%99% | ||
Georgia Georgia GeorgiaGeorgia | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 80% Average |
font-family:georgia, "times new roman", norasi, serif; 45%96%99% | ||
Garamond Garamond GaramondGaramond | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 52% Average |
font-family:garamond, "apple garamond", baskerville, times, serif; 23%49%86% | ||
Sans-Serif Web Safe Fonts
Arial Arial ArialArial | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 93% Average |
font-family:arial, sans-serif; 82%99%99% | ||
Verdana Verdana VerdanaVerdana | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 81% Average |
font-family:verdana, geneva, tahoma, kalimati, sans-serif; 45%99%99% | ||
Tahoma Tahoma TahomaTahoma | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 81% Average |
font-family:tahoma, geneva, verdana, kalimati, sans-serif; 45%99%99% | ||
Trebuchet Trebuchet TrebuchetTrebuchet | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 80% Average |
font-family:"trebuchet ms", "lucida sans", "lucida grande", sans-serif; 45%96%99% | ||
Lucida Lucida LucidaLucida | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 72% Average |
font-family:"lucida sans", "lucida grande", garuda, sans-serif; 19%99%99% | ||
Web Safe Monospace Fonts
Courier Courier CourierCourier | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 93% Average |
font-family:"courier new", courier, andale mono, "free mono", monospace; 82%96%99% | ||
Lucida Console Lucida Console Lucida ConsoleLucida Console | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 71% Average |
font-family:"lucida console", "bitstream vera sans mono", monospace; 18%96%99% | ||
Consolas Consolas ConsolasConsolas | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 32% Average |
font-family: consolas, monospace; <10%<10%96% | ||
Web Safe Fantasy, Cursive and Script Fonts
Impact Impact ImpactImpact | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 76% Average |
font-family:impact, haettenschweiler, "arial narrow bold", sans-serif; 45%84%99% | ||
Century Gothic Century Gothic Century GothicCentury Gothic | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 71% Average |
font-family:"century gothic","avant garde",'apple gothic',sans-serif 18%98%99% | ||
Font availability statistics from VisiBone Font Survey - Browsershare.
Comic sans walks into a bar and the barkeep shouts "Get out - we don't want your type in here."
Sadly, there is no font that is fully supported by Windows, Mac OS X and Linux/Unix.