Weird text alignment issue in CSS when bolded Lucida Sans - html

Question

I was creating some HTML/CSS to display a key, but ended up with a weird vertical misalignment if the text for the title vs the text for the items.
After a lot of experimenting I found that the problem only seems to happen when the text is bolded, and furthermore only when using the Lucida Sans font.
You can see a demonstration of this problem here... http://jsfiddle.net/Ufa69/
HTML...
<div class="key">
<div class="t1">title:</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class="key">
<div class="t2">title:</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
CSS...
body {
font-family: "Lucida Grande","Lucida Sans","Arial",sans-serif;
}
.key {
padding: 2px;
font-size: 10px;
overflow: hidden;
border: 1px solid #666666;
background: #eeeeee;
margin-bottom: 4px;
}
.t1, .t2 {
float: left;
margin-right: 4px;
}
.t2 {
font-weight: bold;
}
.item {
float: left;
margin-right: 4px;
}
In the demo you'll see that the text aligns correctly in the first div, but in the second it's misaligned. The only difference between the two is that the second one used bold.
You might be thinking, "So, use a different font".
But there's the catch - Lucida Sans is the default font for jQuery UI.
So I'm hoping that some clever CSS-guru can maybe find another way to get this text to behave correctly when bolded.
(The problem appears for me on Windows in Chrome, Firefox, and Safari, but not IE)

Answer 1

they are misaligned because bold and normal text allocates space differently as if bold increased font-size comparing to a normal text.
My solution here is to increase font-size to the normal text so that it will be still normal text but same size as the bolded one.see my update to your fiddle below.
.t1{
font-size:12px;
}
http://jsfiddle.net/Ufa69/1/
NOTE: there are a lot of options you can do so the bold and normal text align properly. You can use tables td's or divs with fixed widths.

Answer 2

Maybe I'm not good for this kind of thing. But I ain't see the misaligned issue, it really seems aligned here. (Chrome v31)
Things that happen:
To make font bold, a couple of pixels are added in font letter to do the effect.
Obviously, it gets more visible in text with small size.
Each browser, and even version, renders the font differently.
Each text, each line of text, have their font-size and the line-height. By default, line-height is auto and will squeeze to height of content. All this behavior is called, line box.
In text, with font-size: 10px, line-height will be a couple of pixels higher.
As much you will increasing line-height size, the content gets more space to go up, down, middle, etc, as defined in attribute: vertical-align
As size is added to the text, fatally it will increase line-height too.
So, I have a lot of options to do to make up this. Almost all, by changing font-size, line-height, vertical-aligns, margins.. and it's very hard to accomplish a strictly successful result.
One particularly that is often used and I like is just reduce the size of bold text in 1 or 2px.
.t2 {
font-size: 9px;
font-weight: bold;
}
You can also limit height & line-height of wrapper container to improve to leave it more equal.
See fiddle to confirm you like the result.

Answer 3

Nice ..
I saw that line-height differs from your .t2 (11px) and .item (14px) but even firebug doesn't mention 'why' or inheritance.
Fix line-height to 14px all around with .key{line-height:14px;}.
[edit]
After seeing it in action, i can't figure out why the line height is not inherited from .key classes elements to their children <div>
I fiddled here the same solution of 'line-height' but applied to children divs.
.key,.key div{line-height:14px;}

Answer 4

Some browsers apparently use odd box height calculations. This can be seen even in a simple setup like
<style>* { font-family: Lucida Sans }</style>
<p>foo<p style="font-weight: bold">foo
Inspecting this in Chrome dev tools shows the height of the first p element as 15 pixels, the height of the second p elements as 14 pixels. This makes little sense; we could expect a boldface font to require more height, but hardly less. Note that height calculations are up to browsers and do not necessarily use line-height values directly.
In your case, the best workaround is probably to use some logical table markup rather than floating. In a table, lines normally get aligned even though the box heights vary.

Answer 5

CONCLUSION: small sizes of Lucida Sans bold renders incorrectly (on some systems).
After a lot of testing all sorts of options, like setting line-height, using tables, trying different sizes, and vertical-alignments, and making measurements, I finally concluded that the problem is simply with the rendering of small sizes of Lucida Sans bold.
If you create two divs with borders, one using regular Lucida Sans at 10px and the other using the bold version, you can see that the bold one is noticeably shorter (in height).
When aligned to top, the bold font is a couple of pixels higher than the normal font.
Align to bottom, and it's a couple of pixels lower than the normal.
Even aligning to middle, it's still a pixel higher than the normal.
The BAD NEWS:
Lucida Sans is a default font for jQuery UI, and is generally a very popular font, which means this affects a lot of web pages.
It's not consistent across browsers, so tweaking
it to work for Chrome might throw it out on IE.
The GOOD NEWS:
It only happens on small versions of the font. I found that anything 13px or larger seems to render correctly.
At these small sizes you can easily substitute "Arial", "Helvetica" or similar, without anyone noticing the difference.
Thanks to everyone who gave their ideas, like using tables, line-height, etc. In the end though I think the only sane option is to avoid small versions of Lucida Sans. You can still use it for most of your web page, and just substitute with a similar more reliable font for sizes less than 13px.