Consolas smaller than Verdana - html

Question

I'm writing a webpage where I want to use one font for normal text and another for code, so I have the following CSS:
body {
font-family:Verdana, sans-serif;
font-size:100%;
}
code, pre {
font-family:Consolas, monospace;
}
This works except that the Consolas text comes out considerably smaller than the Verdana text. I can sort of fix it by adding font-size:1.2em; to the code, pre settings, but that feels like a hack, particularly since the number isn't derived from anything other than trial and error.
Is this something that happens to be a quirk of the particular fonts involved, or am I doing something wrong?

Answer 1

Alas this is because Consolas has a smaller x-height than Verdana. You can indeed "sort of fix it" by using a larger font size, but if the user doesn't have Consolas the page will fall back to the default monospace font, which will appear too large.
The proper solution lies in CSS3's font-size-adjust. Alas it isn't very well supported at all; as far as I know then only mainstream browser to support it is Firefox.

Answer 2

When you define a font-size in CSS, what you're doing is defining a concept known as an "em square" or "em box" even if you aren't using em units.
The em square gets its name because in the days of metal press printing, each letter was put in its own metal "box" and in traditional typefaces the uppercase Latin M typically filled the width of an entire box, defining the sizes for the entire family. Hence, the em box. Although the original em box was defined by the width of the M, the em unit itself refers to the maximum allowable height of a character. This was just a result of the box created for the uppercase M.
In short, all of the letters in a font family need to fit inside the em box, but they don't have to take up the whole thing. So when you set an em box with a given width, all you are doing is defining the maximum allowable space for the lettering to be placed in. From there, the typeface designer's choices in kerning, geometry, ratios, etc. will determine just how much of that box their lettering will take up. This is why you are having to use two different font sizes to make the lettering appear to be the same.

Answer 3

The font sizes are the same. But in Verdana, characters are generally taller than in most fonts (in the same size). For example, “H” in Verdana is taller than “H” in Consolas. This is a font design issue.
The solution is to use matching fonts. If you really want to use Verdana for copy text, Lucida Console is probably the best choice for a monospace font. If you want to use Consolas as monospace font (fine!), then use another “C font” for copy text, such as Cambria (serif font) or Calibri or Candara (sans-serif fonts).
Although the font sizes are the same here (on browsers that I tested), it is best to make sure of it, since browsers often apply something like font-size: 90% on code and pre and some other elements. The conditions for this to happen are somewhat obscure, and explicitly setting font family to something else than the generic monospace seems to prevent that on modern browsers. But it’s still a useful precaution to set
pre, code, samp, kbd, tt { font-size: 100%; }

Answer 4

The first line is in Verdana and the second is Consolas. Both 12pt. Consolas is slightly shorter, but not so much as in 20% difference. Check the parent elements of your pre, since em font sizes are cummulative - e.g. if body is 0.9em and pre is 0.9em, the result would be 12pt * 0.9 * 0.9 = 9.72pt
If you are trying to match only the height but ignoring the width, then 1.16em looks about right, and it is really the quirk of the font and you are not doing anything wrong.
Edit
Looks like you are doing nothing wrong =) Left is from fiddler, right is from WordPad