13 web-safe fonts at the core of web typography
I was at IKEA the other day and bought a 3-drawer chest from the ANEBODA collection. After I brought it home and started to build it, I was reminded of the importance of web-safe fonts.
The relationship between do-it-yourself furniture and web typography occurred to me as I started to assemble the drawers. A plastic piece for the front of one of them was missing. The store was an hour away and it was late. There was no way I was driving back right then. As a temporary fix, I cut a rectangle from the cardboard box the chest came in and slid it in place. It was a poor substitute for the nice plastic panel some Swedish designer originally had in mind. And that’s what made me think of web-safe fonts.
What are web-safe fonts?
A web browser can only display fonts that are installed on a visitor’s computer. If you design a website that uses an exotic typeface, not many visitors will see what you intended. Instead, their browsers will use an alternative font. The result is like me stuffing a piece of cardboard in my new chest of drawers. It works, but the finished product looks more yard-sale chic than Scandinavian sleek.
Web-safe fonts are a select group of font faces that are installed on nearly every computer. They’re “web-safe” because if you use them in your designs, it’s a pretty safe bet visitors will experience the design you had in mind.
The following list of thirteen fonts is installed on over 90% of computers that run a Windows or Mac operating system. (If your visitors are keen on Linux, check out this article on Linux font equivalents.)
Serif:
- Georgia
- Palatino Linotype
- Times New Roman
Sans-serif:
- Arial
- Arial Black
- Impact
- Lucida Sans Unicode
- Tahoma
- Trebuchet MS
- Verdana
Cursive:
- Comic Sans MS
Mono-space:
- Courier New
- Lucida Console
(Even though these fonts are considered web-safe, you should test your designs in a browser. Some don’t display clearly at a particular size and some don’t show bold at smaller sizes, so you may need to make adjustments.)
Below is a sample of each font for easy comparison. Each includes a heading (font-size: 22px, font-weight: bold), some body copy with bold and italics (font-size: 13px, line-height: 1.5), and the CSS font-family property for that font.
Text sample in Georgia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: Georgia, serif;
Text sample in Palatino Linotype
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
Text sample in Times New Roman
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: "Times New Roman", Times, serif;
Text sample in Arial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: Arial, Helvetica, sans-serif;
Text sample in Arial Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: "Arial Black", Gadget, sans-serif;
Text sample in Impact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: Impact, Charcoal, sans-serif;
Text sample in Lucida Sans Unicode
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
Text sample in Tahoma
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: Tahoma, Geneva, sans-serif;
Text sample in Trebuchet MS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: "Trebuchet MS", Helvetica, sans-serif;
Text sample in Verdana
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: Verdana, Geneva, sans-serif;
Text sample in Comic Sans MS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: "Comic Sans MS", cursive;
Text sample in Courier New
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: "Courier New", Courier, monospace;
Text sample in Lucida Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789
font-family: "Lucida Console", Monaco, monospace;
About Chet Garrison
Chet is a freelance graphic and web designer with a genuine passion for great design. When he’s not glued to his computer, you can find him in a catatonic state watching re-runs of Roseanne and eating Cheez-It’s.
