Let’s use Lucida Grande for a change – 13 web safe fonts revisited

by Yang Yang on December 23, 2008

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)

  1. Arial, Arial, Helvetica, sans-serif
  2. Arial Black, Arial Black, Gadget, sans-serif
  3. Comic Sans MS, Comic Sans MS, cursive
  4. Courier New, Courier New, Courier, monospace
  5. Georgia, Georgia, serif
  6. Impact, Impact, Charcoal, sans-serif
  7. Tahoma, Geneva, sans-serif
  8. Times New Roman, Times, serif
  9. Trebuchet MS, Helvetica, sans-serif
  10. 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)

  1. Lucida Console, Monaco, monospace
  2. Lucida Sans Unicode, Lucida Grande, sans-serif
  3. 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! 🙂

Paul April 11, 2010 at 12:20 am

Nice and quick help, thanks!

Michael December 10, 2010 at 4:14 am

Helvetica is listed on line 1 and line 9, with different renderings, which seems unlikely.

Cassidy James March 9, 2011 at 12:57 am

Each line is rendered using its font-family declaration, meaning the fallbacks are rendered using the primary font.

Boga October 18, 2011 at 4:28 pm

Nice, thanks. It’s always confusing choosing a safe web font.

Perx October 6, 2012 at 10:08 pm

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.

Comments on this entry are closed.

{ 3 trackbacks }

Previous post:

Next post: