LIFEHACK 2: WEB-FRIENDLY FONTS

 

I’ve recently been updating this and other sites of mine.  As well as re-learning a bit of HTML, I re-familiarised myself with the fonts that are suitable for use in most browsers.  There’s a lot of commonality between the sets, and although I only use Windows, I’ve included examples for all operating systems below (how generous of me).

I find it pretty annoying that there’s a limited number of fonts that are likely to work on my sites, but if a font is specified that’s incompatible with the browser or OS, it will default to a web-suitable one – it won’t just not display the content. I’ve seen it revert to Times New Roman mostly, and I only really use Windows OS.

There are some fonts that are generally recognised to be compatible with everything, but there’s always the possibility that you’ll find an exception. No matter how ubiquitous a typeface, if your operating system (or the particular version of the OS that you’re using) doesn’t support it, it won’t show up!

Things are sure improving – with each new software release, more features are added, and we approach something like harmonisation. Sometimes, you’ll also find a cool font that just so happens to work – but you need to consider what it will look like if it reverts to the standard for some browsers & devices.

I love looking at lists of text – it’s amazing how much beauty there is in rows and rows of typed words.  Below is a sample of fonts that are a relatively safe bet, along with a little supplementary information.

Font Name What does it look like? Windows? Mac? Linux?
Andale Mono  andale mono Hell Yeah! Hell Yeah! Hell Yeah!
Arial  arial Hell Yeah! Hell Yeah! Hell Yeah!
Arial Black  arial black Hell Yeah! Hell Yeah! Hell Yeah!
Avant Garde  avant garde Usually* Usually* Usually*
Book Antiqua  book antiqua Usually* Perhaps** Perhaps**
Bookman Old Style  bookman old style Usually* Perhaps** Perhaps**
Calibri  calibri Usually* Perhaps** Perhaps**
Calisto MT  calisto mt Usually* Perhaps** Perhaps**
Cambria  cambria Usually* Perhaps** Perhaps**
Candara  candara Usually* Perhaps** Perhaps**
Century Gothic  century gothic Usually* Perhaps** Perhaps**
Charcoal  charcoal Nope. Hell Yeah! Nope.
Chicago  chicago Nope. Hell Yeah! Nope.
Comic Sans MS
WARNING: NEVER USE THIS FONT, not even ironically or on a children’s party invitation ***
 comic sans ms Hell Yeah! Hell Yeah! Hell Yeah!
Consolas  consolas Usually* Perhaps** Perhaps**
Constantia  constantia Usually* Perhaps** Perhaps**
Corbel  corbel Usually* Perhaps** Perhaps**
Courier New  courier new Hell Yeah! Hell Yeah! Hell Yeah!
Garamond  garamond Usually* Perhaps** Perhaps**
Geneva  geneva Nope. Hell Yeah! Nope.
Georgia  georgia Hell Yeah! Hell Yeah! Hell Yeah!
Impact  impact Usually* Perhaps** Perhaps**
Lucida Console  lucida-console Usually* Perhaps** Perhaps**
Luxi Mono  luxi-mono Nope. Nope. Hell Yeah!
Luxi Serif  luxi-serif Nope. Nope. Hell Yeah!
Microsoft Sans Serif  microsoft-sans-serif Usually* Perhaps** Perhaps**
Monaco  monaco Nope. Hell Yeah! Nope.
Monotype Corsiva  monotype-corsiva Usually* Perhaps** Perhaps**
New Century Schoolbook  new-century-schoolbook Nope. Nope. Hell Yeah!
New York  new-york Nope. Hell Yeah! Nope.
News Gothic MT  news-gothic-mt Usually* Perhaps** Perhaps**
Palatino Linetype  palatino-linetype Usually* Perhaps** Perhaps**
Tahoma  tahoma Usually* Perhaps** Perhaps**
Times New Roman  times-new-roman Hell Yeah! Hell Yeah! Hell Yeah!
Trebuchet MS  trebuchet-ms Hell Yeah! Hell Yeah! Hell Yeah!
Utopia  utopia Nope. Nope. Hell Yeah!
Verdana  verdana Hell Yeah! Hell Yeah! Hell Yeah!

Footnotes:
* Most of the time, you should be ok. But you just know you’ll find the one time that it isn’t.
** Give it a go, but there are no guarantees!
*** Seriously, use of Comic Sans seems immature to even the average pre-schooler. Respect your audience’s intelligence and avoid this font At All Costs!

 

Leave a Comment