Lucida Hybrid: The ‘Grande’ Alternative

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.

Lucida Sans Unicode
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).

Lucida Sans
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.

Lucida Hybrid
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.

57 Responses to “Lucida Hybrid: The ‘Grande’ Alternative”


  • 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. :)

  • 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?

  • re: stats -

    not sure about their accuracy, but interesting nonetheless:

    http://www.visibone.com/font/tests.html
    http://www.visibone.com/font/FontResults.html

    …that was found via http://www.clagnut.com/blog/266/, which is from 2003, so this info could be outdated.

  • i find it practical to replace those missing fonts with a little plugin for wordpress called: image-replacement-wordpress-plugin,………..

  • Thank you very much for the clear explanation.

  • Color me lazy (for not simply downloading your css files to look at them) but I’d like to know what CSS font styles you’re using on this page. I absolutely love the way you’ve styled your headings (I’m assuming they’re headings – ie. the different section titles and the names for people on each post). Are you using Lucidas, or are there some Helveticas mixed in there? Again, sorry for being lazy.

  • is it just me, or does Firefox on Windows display Lucida Hybrid horribly?

  • Coby: This is the font-family I’m currently using:

    "Segoe UI", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, Sans-Serif;

    Bronson: that depends on a number of factors, such as what fonts are installed in your computer, or other stuff that are affecting text display (like ClearType).

  • Java 6 in Linux includes the “Lucida Sans” font with it. In Ubuntu it’s the package sun-java6-fonts.
    Anyway because Linux doesn’t have “Lucida Sans Unicode” I had to change the font-family line in the body class to make sure it doesn’t fall back to verdana:

    font-family: “Lucida Sans Unicode”, “Lucida Grande”, “Lucida Sans”, Verdana, Arial, Helvetica, sans-serif;

  • I like this post a lot but being honest I use Verdana for windows, it have a similar look, try to use Typetester (it really looks similar and I don’t want to prettend that windows users have to watch a website like a mac ones do).

  • Well seeing as I’ve been pulled back in here to look at some comment tests…
    I may as well take the time to say I’ve just finished a rebuild of the well known <a href=”http://www.ninjakiwi.com/”<NinjaKiwi.com. I used Lucida as described in this post, so really this is where it all started ;-)
    Thanks

  • Slightly off topic because this thread is really about Lucida Grande, but Jelle Desramaults makes a good point about ClearType, and as of this morning I’ve realised that ClearType has implications for many of the fallback fonts as well…

    After stumbling upon a post about browser font rendering differences for Helvetica and Arial on Windows vs Mac, I humbly concede that “Arial, Helvetica” is probably better for the majority than my previously advocated “Helvetica, Arial” :(

    I’ve also posted about this issue over at SitePoint on the forum for Michael Tuck’s thought provoking article on web font stacks.

  • geez you are genius, thanks for tips

  • Brilliant! Thanks for this. It’s just the solution I was looking for. Cheers!

  • The note about Lucida Sans and Unicode is wrong. Using Lucida Sans with Lucida Sans Unicode as fallback makes for really ugly text if you use Unicode characters. The Lucida Sans Unicode faux-bold characters really stand out.

  • I have a question relating to Jonathan Schofield’s idea of putting Lucida Grande first then falling back to the others for Windows users. You said that there is a textbox width issue when using it. Could you then not change the textbox font to Arial or similar so you have font for main contnent, font for bold & italic and font for inputs?

  • I have a question relating to Jonathan Schofield’s idea of putting Lucida Grande first then falling back to the others for Windows users. You said that there is a textbox width issue when using it. Could you then not change the textbox font to Arial or similar so you have font for main contnent, font for bold & italic and font for inputs?

  • @Jon: You could do that, though depending on the types and versions of browsers your site supports, you’ll have to assign a class to each textbox input element to be able to target them effectively in IE6 (as it doesn’t support attribute selectors).

  • Joomla is a top notch CMS and this post is a perfect example why. Thank you for this information.

  • Great post. Thank you

  • Lucida as a viable font face for website is complete garbage. Any visual impact you might get by choosing the font is completely offset by the amount of jiggery-pokery you have to do to get it to work properly.

    Even the most recent versions of Windows dont include the Grande version of the font, and Im yet to see a designer who actually knows how to implement the font properly.

    More mainstream fonts like Arial, Verdana etc at least work consistently every time, and produce readable text.

  • My PC with Vista only has Lucida Sans Unicode, so the bold and italic parts are just.. Arial.

  • Thank you for this interesting discussion. With the advent of CSS3, we can use @font-face to attempt to embed Lucida Grande if not installed. However, since many browsers do not support this yet (and, some that do don’t do a very good job of rendering yet), using your idea, in conjunction with @font-face seems the best solution.

    Code follows:

    @font-face {
    font-family: Lucida;
    src: url(‘images/Lucida_Grande.ttf’) format(‘truetype’);
    font-weight: normal;
    }
    @font-face {
    font-family: Lucida;
    src: url(‘images/Lucida_Grande_Bold.ttf’) format(‘truetype’);
    font-weight: bold;
    }

    body {
    font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Lucida, Corbel, ‘DejaVu Sans’, ‘Bitstream Vera Sans’, ‘Liberation Sans’, Verdana, Arial, Helvetica, sans-serif;
    }
    strong, em, b, i, h1, h2, h3, h4, h5, h6, address {
    font-family: ‘Lucida Grande’, ‘Lucida Sans’, Lucida, Corbel, ‘DejaVu Sans’, ‘Bitstream Vera Sans’, ‘Liberation Sans’, Verdana, Arial, Helvetica, sans-serif;
    }
    code, pre {
    font-family: ‘Lucida Console’, ‘Andale Mono’, Monaco, ‘Courier New’, Courier, monospace;
    }

  • I think it is important to make it look as different as possible. That way people will keep coming back.

  • For copy-heavy pages, I’d rather stay away from Lucida sans family and default to Verdana. It looks good at small font sizes but at larger ones, I prefer the character shapes of Verdana.

  • What I like about the font is that it lets me use the Apple icon that is not available in Windows. Like so:  But I cannot get it to display correctly when posting it on webpages, or chatting with another person, just like my friend Brandon. (Who has Mac OS 10.6.4)

  • Fieeeeeuw lucky that I found this fix!

  • I know it might sound little backdated but I like tahoma or georgia font over any other. I am using georgia for my blog but tahoma mostly for ecommerce sites :) thanks for nice post though :)

  • This article was a lifesaver. I almost abandoned using Lucida Grande, because I hated the way the bolding looked. Lucida Sans has much more proportionate bolding, so now I just combine the two. I understand the article was more about combining lucida sans unicode with lucida sans, but none the less it helped me fix my issue. My fav font is Segoe UI. I noticed you use it on your site. You might want to check it in Windows XP, which uses a different cleartype rendering. Segoe UI looks horrible on XP. For my web app I detect XP and use a different font instead, otherwise I go with Segoe for Windows users and Lucida Grande for Mac Users.

Comments are currently closed.