The 10 web safe fonts, Arial, Impact, Georgia, Times New Roman, Trebuchet MS, Comic Sans MS, Verdana, Tahoma — ahhh, wait a minute, I can’t remember the last 2. Let me take a look at the 9 web safe fonts, ok, it’s Courier New and Arial Black. Tahoma isn’t included in the 9 browser safe fonts list — are those that look almost the same across platforms such as Windows, Mac OS and other reading devices able to load web pages.
Serious web designers use and only use these fonts for web page texts to make sure the intended typography are correctly rendered in all visitor browsers. In addition to a few non-text symbolic fonts such as Weddings, below is an alphabetical list of the common web safe fonts for CSS typography:
(Windows font | Mac font | Font family)
- Arial, Arial, Helvetica, sans-serif
- Arial Black, Arial Black, Gadget, sans-serif
- Comic Sans MS, Comic Sans MS, cursive
- Courier New, Courier New, Courier, monospace
- Georgia, Georgia, serif
- Impact, Impact, Charcoal, sans-serif
- Tahoma, Geneva, sans-serif
- Times New Roman, Times, serif
- Trebuchet MS, Helvetica, sans-serif
- Verdana, Verdana, Geneva, sans-serif
Yeah, right. But that’s not all. These 10 fonts are not only web safe but also bear the same name across platforms. Or is it? Nonetheless, we have a few more choices than these that are also safe to use in cross-platform and cross-browser CSS typography:
(Windows font | Mac font | Font family)
- Lucida Console, Monaco, monospace
- Lucida Sans Unicode, Lucida Grande, sans-serif
- Palatino Linotype, Book Antiqua, Palatino, serif
Actually there are a few more, however as they are bitmap fonts rather than in TrueType, they’d look rugged when resized in browsers.
The 9 web safe fonts I have included in an image are very very incomplete. Not only does it miss Tahoma, Geneva, sans-serif but 3 advanced web safe fonts that’s our point here. Though they have fundamentally rather different names on different platforms, you can just copy and past the font-family lines above to use in your CSS, expecting the typography to look exactly the same on both Windows and Mac.
Let’s use Lucida Grand for a change! 🙂
Pingback: The 9 web-safe fonts | Make A Website
Pingback: Symbolic fonts: Webdings and Wingdings | Make A Website
Pingback: What are the Chinese or Mandarin web safe fonts? | Make A Website
Nice and quick help, thanks!
Helvetica is listed on line 1 and line 9, with different renderings, which seems unlikely.
Each line is rendered using its font-family declaration, meaning the fallbacks are rendered using the primary font.
Nice, thanks. It’s always confusing choosing a safe web font.
Thanks for sharing this info Yang. I’m planning to use Google Font API, but I decided to use this web safe font to avoid future headaches.