Categories
CSS & HTML Tips Fonts & Typography Web Design Tips and Insights

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

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! 🙂

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

8 replies on “Let’s use Lucida Grande for a change – 13 web safe fonts revisited”

Comments are closed.