Font size isn't accurate

[Clinton Labombard]

I used a fixed-width font, set the font-size to 20px, and so I could determine its boundaries I gave the letter a background-color.

Next I added an image and set the height and width both to 20px.

The result was the font was smaller than the image. I even measured with a ruler to make sure I knew which one was off and for certain it was the font. So, my question is, how do I get a font to accurately size according to it's css tag?

[Clinton Labombard]

Not even a guess?

[coopersita]

My guess would be that fonts aren't exact because not all letters are the same size. Some drop like 'p', others rise like 'g'. Caps are the only ones that may actually be the 20px.

Did you try different fonts (arial, georgia, courier, etc.)? Or just one? It may also be that the font you tried is just designed that way...

You'd have to ask a graphic designer that know typography pretty well.

[DrDoc]

Got some brief and relevant HTML/CSS?

[Clinton Labombard]

<span style="background-color:#00dd00;font-size:50px;font-family:courier new;">M</span><img src="" style="background-color:#aaaaff;height:50px;width:50px;"><br>
<img src="" style="background-color:#aaaaff;height:50px;width:50px;">

[DrDoc]

This is so not the answer you want to hear -- use an image.

I was playing around with the example you gave, and I cannot figure out how to do what you want in a way that is simple and straightforward. There are ways, but they include extra elements and other quirky workarounds.

One example:

<span style="background-color: #00dd00; height: 50px; width: 50px; float: left; position: relative;"><span style="font: 85px 'courier new'; position: absolute; top: -17px;">M</span></span><img src="" style="background-color: #aaaaff; height: 50px; width: 50px;">

[Clinton Labombard]

Ya.. using an image is what I figured. I wouldn't have thought of using spans like that, but that's a lot of hassle over something that should be a lot simpler. However, thank you very much for the solution.

[iamlost]

Try this:

* Add vertical-align: top; to the <span>. This appears to be enough for FF(win) and Opera(win).

* Add vertical-align: top; to the <img>. This seems to correct for IE(win) and have no affect on FF and Opera.

One problem I did see was that my FF showed nothing (for image place holder) at all without a correct image path and image. With images properly sourced all looked like what I think you are trying to achieve.

[Clinton Labombard]

No no no, it isn't the image I've a problem with, but the font. The image size is correct, and I double-checked that assumption with a ruler. However, the font doesn't size correctly unless you use all the extra code Doc showed and some of that looks like there isn't a dependable formula that works for any font... which is kinda what I'm after...

[DrDoc]

How many images are we talking?

[Fotiman]

Keep in mind that even if you get a font at exactly the pixel height you want, the user's settings can totally change that. For example, in Firefox you just press Ctrl ++ to increase the text size, and Ctrl +- to decrease it. You should not rely on a fixed size for your fonts as that may not be what the end user sees.

[Clinton Labombard]

"How many images are we talking?"

Replacing every letter in the text in question, which could be 1 to a zillion. Yes, crazy. But what if?

[DrDoc]

So, why not just use text altogether?

[Clinton Labombard]

If I can determine the exact font width (and maybe height), then I can create a multi-column layout that spans several pages horizontally. Or other interesting tricks, I'm sure.

[DrDoc]

Font width you can always determine by using a monospaced font.

[Clinton Labombard]

[deleted by zen-smacked poster]