log

January 31, 2010

All you never wanted to know about browser generic font family fallbacks

I recent­ly need­ed to know exact­ly what fonts desk­top browsers use in the case of gener­ic font fam­i­lies. Get­ting this info for mul­ti­ple plat­forms and lan­guages is actu­al­ly pret­ty dif­fi­cult unless you enjoy sift­ing through sev­er­al dif­fer­ent source trees in sev­er­al dif­fer­ent source viewers.

Locales are gen­er­al­ly expressed as two-let­ter lan­guage codes (‘en’ for Eng­lish, ‘ar’ for Ara­bic), some­times with an addi­tion­al two-let­ter code for region or deriv­a­tive (‘en-GB’ for British Eng­lish, ‘zh-CN’ for Sim­pli­fied Chi­nese). A good ref­er­ence is the the Plesk Locale Codes doc.

Skip to the matrix if you’re just after en-US defaults.

Mozilla

Prob­a­bly the eas­i­est to read is Mozil­la’s prefs file, sim­ply because it’s all in one place. It’s grouped into plat­form then locale. For exam­ple, pref("font.name.serif.ja", "?? ???") spec­i­fies the serif font for Japanese.

Note that these may not be the defaults in all Mozil­la-derived browsers

  • Win­dows fonts
  • Mac fonts
  • OS/2 fonts (also see note in source about name remap­ping which may affect you).
  • BeOS fonts include only basic map­ping to a gener­ic fam­i­ly (remapped by the OS to a locale-spe­cif­ic font?).
  • Unix/Linux fonts include only basic map­ping to a gener­ic font (remapped by the OS to a locale-spe­cif­ic or sys­tem-pref­er­ence font?) This could mean a vari­ety of defaults depend­ing on the unix deriv­a­tive, dis­tro, win­dow sys­tem, graph­i­cal envi­ron­ment and god knows what else (please cor­rect me if I’m wrong).

Chrome

Chrome breaks down font defaults into a gener­ic plat­form file then spe­cif­ic over­ride files. They fol­low a nam­ing con­ven­tion using the locale codes above. Files are in XML, thus need­less­ly ver­bose and hard to skim. Look for <message name="IDS_SERIF_FONT_FAMILY" use_name_for_id="true">Times New Roman</message> at the bot­tom of gener­ic files and <translation id="IDS_SERIF_FONT_FAMILY">Tahoma</translation> in the overrides.

Safari/Webkit

Unlike the browsers above, Safari itself isn’t open source and so it’s hard to get a defin­i­tive list out­side of West­ern locales. Webkit (the under­ly­ing engine that is open source) has these en-US defaults hard coded:

Stat­ing the obvi­ous but rel­e­vant: Webkit has been port­ed to a legion of devices and plat­forms now, each with their own fron­tend capa­ble of chang­ing the default gener­ic fonts (espe­cial­ly in the case of mobile where only one font may be avail­able). Fire­fox for Win­dows Mobile and Opera Mini are in the same boat. Deter­min­ing the default gener­ic fonts for these plat­forms is arguably pointless.

Opera

This one’s pure­ly from obser­va­tion of a local install on an ‘en-AU’ Win­dows machine (like­ly iden­ti­cal to any oth­er ‘en’ install). I’m unable to check the defaults for any oth­er plat­form atm.

  • Serif: Times New Roman
  • Sans-serif: Ari­al
  • Mono­space: Couri­er New
  • Cur­sive: Com­ic Sans MS
  • Fan­ta­sy: Arial

Note that the orig­i­nal 10.0 release had a bug that did funky stuff to cur­sive and fan­ta­sy. Fixed in 10.1.

Internet Explorer

The tru­ly prob­lem­at­ic one. I don’t have the first idea how to gath­er this infor­ma­tion with­out access to the region­al build and OS. Infor­ma­tion is wel­come! On my ‘en-AU’ WinXP machine IE6 through 8 default to:

  • Serif: Times New Roman
  • Sans-serif: Ari­al
  • Mono­space: Couri­er New
  • Cur­sive: Com­ic Sans MS
  • Fan­ta­sy: Algerian

A quick font matrix for en-US

Browsers across the top head­er row, and font fam­i­lies down the first col­umn. Where a font dif­fers from oth­er browsers, it has been high­light­ed and bolded.

Windows

Mozil­la Safari Chrome Opera IE
Serif times new roman times new roman times new roman times new roman times new roman
Sans-serif ari­al ari­al ari­al ari­al ari­al
Mono­space couri­er new couri­er new couri­er new couri­er new couri­er new
Cur­sive com­ic sans ms com­ic sans ms com­ic sans ms com­ic sans ms com­ic sans ms
Fan­ta­sy microsoft sans serif impact com­ic sans ms ari­al alger­ian

Mac

Mozil­la Safari Chrome
Serif times times times
Sans-serif hel­veti­ca hel­veti­ca hel­veti­ca
Mono­space couri­er couri­er couri­er
Cur­sive apple chancery apple chancery apple chancery
Fan­ta­sy papyrus papyrus papyrus

No one uses Fan­ta­sy appar­ent­ly, and I can’t help but think that Apple used Com­ic Sans MS twice as a state­ment about the Win­dows aesthetic.

If you’re a brows­er dev with more info or if your results con­flict, please let me know.

posted by Andrew

January 30, 2010

Another demo layout: Difference

Demo: A difference of layoutAlthough it’s pret­ty fin­ished, this one’s been sit­ting sta­t­ic since last Octo­ber; TAFE resumed and did­n’t get around to post­ing it. I have some unique JS and drop­down menus to include before I update it again. I’ll try to post about the JS lat­er since it’ll be reusable and of gen­er­al inter­est to oth­er designers.

posted by Andrew

January 29, 2010

Haiku for the moment

apple apol­o­gists
sin­cer­est astroturfers
where is my shotgun?

posted by Andrew

Ugh

It’s hard to read some­thing so incred­i­bly naïve and not want to comment.

You can browse the Inter­net, or check your mail, or take notes, or lis­ten to music, but when you’re out of lit­tle but­tons to press then you’re out of things to do.

Wow.

Some of the biggest com­plaints come from pro­gram­mers that say the closed sys­tem means peo­ple won’t be able to sat­is­fy their com­put­er curiosi­ties. To which I again say: Good! Then they’ll have to sat­is­fy their curiosi­ties about emo­tion­al matu­ri­ty and social inter­ac­tion and pos­si­bly even think­ing about mak­ing the world a bet­ter place.

Wow.

But how­ev­er will chil­dren learn how to pro­gram? Sim­ple: We will make them appli­ca­tions that teach them how to pro­gram. Every kid wants to make video games and Google, so it’s not like hav­ing a closed sys­tem will make them for­get that such things are possible.

Wow.

(I reach this part in the post when I start won­der­ing whether it’s a mas­ter­ful­ly dis­guised par­o­dy piece, and I check some oth­er posts. It seems not.)

And because the iPad is so ele­gant and makes ele­gance so rel­a­tive­ly easy, these apps will be ele­gant. We won’t get a row of advanced text edi­tors too com­plex for peo­ple to understand.

Wow.

The open sys­tems will still exist. Cer­tain­ly peo­ple with cer­tain apti­tudes will always pre­fer some­thing that puts the pow­er in their hands. But they don’t have to be the default. Not when those open sys­tems risk con­fus­ing and alien­at­ing peo­ple who just want to check their mail. We lose noth­ing by hav­ing closed systems.

Wow.

I’m not ded­i­cat­ing exten­sive time to rebut this, but I have to won­der which brows­er Rory is using, which blog­ging sys­tem he’s post­ing with, which web serv­er deliv­ers his writ­ing, which lan­guage specs define the struc­ture & style of his site and which oper­at­ing sys­tem got him this far. Chances are that almost all of them are open in some way, whether Libre or Gratis or exten­sion lev­el or UI lev­el or API lev­el or hard­ware lev­el. We got this far because of open­ness and pro­gram­ma­bil­i­ty, some­times push­ing down exten­sive tech­no­log­i­cal and eco­nom­ic bar­ri­ers raised by closed-ecosys­tem builders to do so.

Being pissed off because you don’t grok the pro­gram­ming that makes your trin­kets work is no rea­son to slap the orig­i­na­tors in the face and gen­er­alise them into a group with “obses­sive-com­pul­sive prob­lems mixed with an anti­so­cial attitude”.

(It may how­ev­er be time to analyse your own appar­ent­ly sim­i­lar issues.)

When tech­nol­o­gy seems rosy it’s a rea­son to push hard­er for the next expo­nen­tial improve­ment, not grab the near­est elit­ist-woven com­fort blan­ket and call it a day.

Posts like these are the ones we look back at in ten years and cringe. I hope so anyway.

posted by Andrew

January 25, 2010

HTML 5 <video>

Awe­some post by Christo­pher Bliz­zard on why Mozil­la won’t (right­ly) sup­port H.264.

posted by Andrew

January 13, 2010

In the absence of JavaScript

Winam­p’s down­load page demon­strates why web devel­op­ers should­n’t rely on JavaScript. With the advent of NoScript and relat­ed tools a sin­gle exter­nal script makes this page useless.

Winamp's download page, 2010/01/13

posted by Andrew