CSS Font-Family and Installed Fonts in Linux, Windows and Mac

Web Typography, Fonts, CSS, oh my

Web typography aka CSS font-family relies on installed Fonts which are handled by the operating system. Boo. Even more distressing is the multi-platform diversity of fonts out there. To be more precise, it's not diversity that is the problem, but the lack of diversity.

For example, a recent linux/unix font family survey indicates a plethora of uncommon-to-Windows-and-Mac fonts which really provides insight into the very different visual brands which an enduser will experience. Things just look different, and for typographical reasons. This is Steve Jobs and the Mac story writ large.

View (3:00-5:00)

The Use and Abuse of Font-Family

The main goal of font-family is compatibility and graceful degradation of typography on websites, based on the fact not everyone has the zillion fonts stored in your computer, there being no equivalent automatic font download feature in browsers (fonts are handled by operating systems rather than browsers), and the best alternative options are either Flash-based and slow (sIFR) or a bit of work for the lazy developer (Cufon).

Linux, Windows, Mac installed fonts Survey

The combined font survey results for Windows, Mac and Linux is a great resource to view what sort of general support can be assumed for a given set of fonts.

Sans Serif Font support in Linux, Windows, Mac

See the post on the most common san serif fonts.

Verdana is the default with 59.87% of Unix, 95.36% of Mac and 99.25% of Windows machines in support. However, this font has been in my opinion highly overdone. Useful in situations like document support, for the web it is a bit, shall we say, bleh.

I say we go back to the roots and take another look at Arial, for example vs. Helvetica. Arial is supported by 98.9% of Windows, 96.45% of Macs and 65.83% of Unix boxes. That makes Arial both more interested and with greater support.

Note also that DejaVu Sans is pretty awesome but has little support on the main platforms.

Serif Font support in Linux, Windows, Mac

See the post on the most common serif fonts.

Georgia is a nice choice with 57.99% of Unix, 93.17% of Mac and 98.05% of Windows machines supporting it. There are quite a few others that could be of interest when doing branding work.

Fantasy Font support in Linux, Windows, MAC

See the post on the most common fantasy fonts, which really only has one item that is supported on a majority of all platforms, namely the Impact font. 57.99% of Unix, 89.89% of MAC and 98.35% of Windows boxes support this font.

Sadly the excellent Linux Libertine C is only on 12.5% of Unix and 0% of MAC and Windows systems.

There are quite a few interesting fantasy fonts on the list and it is worth perusing on a regular basis when considering typography for branding and communication.

Cursive Font support in Linux, Windows, Mac

See the post on the most common fantasy fonts shows rather wide divergence, except for the atrocious Comic Sans MS, which really only reminds one of the Peanuts Gang.

For my money an interesting cursive font is Monotype Corsiva. This font is supported on 21.38% of MACs and 82.36% of Windows machines. Apparently there is 0% support on Linux.

How to use Font-Family CSS

In this case the Wikipedia Article on Font-Family is not much help, apparently scribbed from the equally obtuse W3Schools. Learning by example, 24 Ways gives a nice, tidy, brief example and interesting suggestions on how to approach the font-family task.

Related posts:

  1. 3 Fonts with good Thai and Roman character support
  2. Social Media for Lead Generation
  3. Incubator 2.0: A Silicon Valley Success Story
This entry was posted in Typography and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>