Feb 18, 2011

Lucida, Lucida Sans Unicode and Tahoma - getting the web's "neutral but pretty" font stack right

"A lot of Mac-oriented designers have gotten hooked on Lucida Grande, but they don't always realize that it's not available on Windows" - Elizabeth Pyatt, Lucida Grande coming to Windows
It may have been Facebook that started Lucidamania on the 'net. Here's their Lucida-based font stack:

font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

So why are they using Tahoma instead of Lucida Sans Unicode to take care of Windows users who don't have Lucida Grande (most of us)?

At small point sizes, and especially in bold, Tahoma looks and acts more like Lucida Grande than Lucida Sans Unicode does, but at large point sizes, it's the opposite. Or rather:

Lucida Sans Unicode looks like shit when it's small, especially if it's bold. So copy and paste Facebook's font stack and get on with your day.

So if you're doing web design on a mac, go ahead and use Lucida Sans Unicode as your Windows fallback for Lucida Grande, but don't expect it to look good when it's smaller than 12 pixels and bold.

Lucida Sans Unicode, when in bold, looks "good" at around 15px and up. At smaller sizes, any bold characters will be so much wider than they would be in Lucida Grande, that it will disrupt most layouts, because the characters take up too much space.