Web Safe Fonts

As I work on the new, vanilla look of my blog, I bothered myself looking out from web safe fonts for the site.

It may be of a surprise, but the list of web safe fonts is pretty difficult to determine.

The caveat is that the different platforms ship with different fonts.

Desktop

MacOS + Windows have the follows, but not Unix+X:

  • Verdana
  • Georgia
  • Comic Sans MS
  • Trebuchet MS
  • Arial Black
  • Impact

(Ref. Safe web fonts by jmorzins ~mit)

Android

3 only:

  • Droid Sans
  • Droid Serif
  • Droid Mono

iOS

See list here: iOS Fonts

Selected common / classic fonts:

Sans Serif

  • Ariel
  • Avenir
  • Futura
  • Gill Sans
  • Helvetica
  • Helvetica Neue
  • San Francisco (system default?)
  • Trebuchet MS
  • Verdana

Serif

  • Baskerville
  • Bodoni (!!)
  • Didot
  • Georgia
  • Palatino
  • Times New Roman

Monospace

  • Courier
  • Courier New
  • Menlo

In conclusion & implementation notes

Everybody has these:

  • Arial / Helvetica
  • Times New Roman / Times
  • Courier New / Courier

If we ignore Unix, we can expand the list with:

  • Verdana
  • Georgia
  • Comic Sans MS
  • Trebuchet MS
  • Arial Black
  • Impact

But, when taking into consideration of mobile OS, the choice is very limited, and extra limited for monospace. So we need to provide alternatives.

It could be helpful thinking this way: font-family: (primary selection), (alternative for iOS), (don't need to specify for Android), (genre of the font), i.e.:

font-family: Georgia, serif;

Or, in case of the monospace situation:

font-family: Monaco, Menlo, monospace;

Resources