The FlawsLucida 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 FixWhat 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 {
font-family: "Lucida Sans", "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 and strongs 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 {
font-family: "Lucida Sans", "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.
(This article was originally published at SixThings, and is featured with permission.)
|
[close]