Lucida Grande is such a nice font to use in websites, but because it doesn’t come standard with Windows, we turn to Lucida Sans Unicode and Lucida Sans to make sure users get a similar look. Unfortunately, both typefaces have imperfections that make them less-than-worthy candidates for substitution. Oh, dear.
Update 2007-03-13: Check out my comment regarding the availability of Lucida Sans on Windows. Thank you, Ia for bringing it up. 
Update 2007-06-08: Jonathan Schofield adds to the discussion with a more thought-out ordering of the font-family for optimal font quality and consistency across different operating systems. Thanks, Jonathan.
Update 2008-05-16: Updated the CSS to include b and i tags, for greater compatibility with pages that use these tags. Thanks for the tip, Lachlan!
The Flaws
Lucida Sans Unicode looks just like Lucida Grande in normal weight, but because it doesn’t come with a set of variants by default, Windows emulates them. What you get is a bold that’s clunky, and an italic that looks like it’s about to tip over.
Figure 1. Lucida Sans Unicode, 16px.
Lucida Sans, on the other hand, comes with true variants: a bold with a comfortable letter width, and an italic that is both subtle and elegant. The problem with Lucida Sans is that, at certain font sizes, it looks hideous in normal weight (regardless of whether ClearType is enabled or not).
Figure 2. Lucida Sans, 16px.
And we don’t want any of that.
The Fix
What we want to do is pick only the good traits: the normal face of Lucida Sans Unicode, and the bold and italic variants of Lucida Sans. The solution is to “create” a hybrid font set:
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
strong, em, b, i {
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
It’s simple: assign Lucida Sans Unicode as the base font for the HTML document (or a major section of your page), and then override the ems, strongs, bs and is with Lucida Sans. This effectively combines the best of both fonts.
Figure 3. Lucida Hybrid, 16px.
And don’t stop at just those tags; also apply Lucida Sans to other elements and classes that will be displayed bold or italic:
h1, h2, h3, h4, h5, h6, address {
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
Now, doesn’t that look better? If you’re not quite convinced, play around with the HTML sample. Go crazy with the control-scrolling, if you wish.
Note: If you’re worried about the Unicode issue, Lucida Sans should be able to handle them fine, according to this chart.
Thanks for this! I too have been struggling with a Windows solution for my Lucida Grande design:
My Blog
Sweet! I’m largely a Windows user and always find it funny how designers on Mac praise Lucida when it looks like crap for many users (who are overwhelmingly on Windows).
This is a great alternative.
Beautiful, thanks for writing this up! it opens a lot of possibilities that I hadn’t thought about. Simple, yet elegant.
Great, guy!!
Thanks!
Silly question: is Lucida Sans a default font on Windows? I checked out Typetester and it says it isn’t a Windows default. Of course that could be outdated. Just making sure. ^_^
ia: Not a silly question, at all, but it has a tricky answer. Strictly speaking, Typetester’s list is correct: Lucida Sans is not a default font on Windows. However, Windows 98 comes with the italic variant of Lucida Sans (which half-solves our problem on that OS), while Windows XP SP2 comes with the basic family (regular, italic, demibold, and demibold-italic). Also, several Microsoft products (Office, Publisher, etc.) come with it.
While the appearance of Lucida Sans in selected software does not guarantee widespread availability of the font, the fact that Windows XP and Microsoft Office are popular software choices sort of makes up for it’s non-default status. But that’s just my opinion.
Still, I updated the CSS in the example to revert to Lucida Sans Unicode in the instance that Lucida Sans does not exist on a user’s computer.
Thanks for clearing that up. It’s a very good post. (Came via Philweavers)
very nice article. ill use this from hereon!
Wouldn’t it make more sense to declare Lucida Grande as the principle font choice? With Grande declared as a fallback font, you’ll only get your true preferred font if the user doesn’t have either Lucida Unicode or Lucida Sans installed…
That’s a great idea, though - it’s nice to find another font with a bit wider availability, given a little bit of extra sneaking around!
(Found via Philweavers.)
@ Joe Dolson
Agreed, Joe. At least that way we can be sure that Mac (OS X) users will always see Lucida Grande. Personally, I’d also not have Verdana so high up the font list. Lucida Grande/Unicode/Sans is a much more condensed font family than Verdana, so I’d favour something like Trebuchet.
Similarly, why do people always list Arial ahead of Helvetica when Helvetica is generally nicer to look at (and also I think a default Linux font?). So, personally, for non-italic elements I’d end up with something along the lines of…
font-family: “Lucida Grande”, “Lucida Sans Unicode”, “Trebuchet MS”, Helvetica, Arial, Verdana, sans-serif;
Given that pretty much anyone is going to have either Helvetica or Arial installed, you could argue that declaring Verdana is redundant.
Joe, Jonathan: The reason I put the other Lucidas ahead of the Grande variant is because of the problem Windows has with Lucida Grande and textbox widths. Although I know that Lucida Sans (and Unicode) are not default Mac fonts, I’m not sure how widespread they are on Macs (as a result of software installs) to justify bumping them down the list.
Jonathan, you do have some interesting points about the rest of the fallback fonts, and are worth noting.
Thanks, I take your point about Grande problems on Windows, a useful insight I hadn’t considered, largely because I have an XP machine running SP2 and MS Office and it doesn’t have Lucida Grande on it - I presumed (obviously wrongly?) that Grande just doesn’t exist in the Windows world.
Just out of interest, what kind of percentage of Windows users are going to have it - any idea?
Jonathan: I wish I could give you some reliable stats, but my search for such numbers have been fruitless. I hope someone else stumbles onto this discussion with an answer.
Or, an alternative way is to reverse-engineer the OS X/Linux method of font-smoothing on Windows. Here is the same column of text as rendered by a font hack method I found on a Mac-envy forum.
http://farm2.static.flickr.com/1410/628645617_d786430c66_o.png
Note the Lucida Sans italicized properly. Mind you, this is not even Lucida Grande, but the same old Microsoft Lucida font, minus Cleartype.
Guy - can you elaborate on the “OS X/Linux method of font-smoothing on Windows”? Or the link to the method?
Nice article.
Thanks for The Fix.
Weird,
When viewing your HTML sample on my pc (windows xp):
- “Lucida Sans Unicode” regular looks better than “Lucida Sans” regular. So far so good.
but
- “Lucida Sans” doesn’t seem to have an italic with a different slope.
3 Lucida fonts in my “fonts” directory:
- Lucida Console
- Lucida Sans Unicode
- LucidaSansRegular (shortcut to the original font wich resides in a Dreamweaver folder…)
Maybe Dreamweaver installs it’s own “Lucida Sans”? One without real italics?
I’ve never installed Office on my pc.
Great article!
I wonder how many people have ClearType enabled on their machine.
without it everything looks really, realy bad :/
I love Lucida Grande on the Mac, but have been struggling with getting the other Lucida variants to look the way I want on the PC.
Excellent solution. Thank you!
Great solution - There is one thing I don’t understand - I’ve looked at the source code and it seems you have wrapped all the italics in ?? Isn’t this going to mean a major amount of work when writing content if you have to do this manually each time you want to switch font?
so it’s taken the “em” i put in the above and styled is - whoops silly me - it should have read:
There is one thing I don’t understand - I’ve looked at the source code and it seems you have wrapped all the italics in “em” tags - Isn’t this going to mean a major amount of work when writing content if you have to do this manually each time you want to switch font?
Lachlan: I think you have it backwards. The idea here is to leave the choosing of fonts to the CSS, such that you get the best Lucida look on Windows. Treat it as a single font, and write your markup based on meaning, not style. Hope this clears it up.
Thanks - the issue for was that I’m used to Italacising using an “i” tag and not familiar with using an ‘em’ tag - My Content Management System - Joomla, wraps text in “i” tags by default.
I added “i” to the “strong, em’ class and it all works perfectly now.
Cheers
Lachlan: Ah, I understand now.
I updated the CSS accordingly; it should now be Joomla-friendly. Thanks!
From my testing, it seems like if you leave “Lucida Sans Unicode” in the italic/bold rule, Windows IE will try to emulate with that font, rather than moving on to the next, so I had to take that out of the rule altogether.
For italic I settled on:
Lucida Sans, Trebuchet MS Italic (windows), Trebuchet MS, Helvetica, Arial, sans-serif
For bold:
Lucida Sans, Lucida Grande (mac), Trebuchet MS Bold (windows), Trebuchet, Helvetica, Arial, sans-serif
Nora Brown: Interesting observation! What versions of IE did this work with?