1

This question is basically an extension of this one about an issue I was having with vertical centering. Finding the answer to that question created a need for this question.

Have a look at this JSFiddle. It sets up a container to be 60px tall.

.container {
    background-color: lightgreen;
    height: 60px;
    max-height: 60px;
    line-height: 60px;
    font-size: 60px;
}

In Firefox, it is 60px tall in all cases. In Chrome, the text height is actually taller than 60px (sometimes 69px, sometimes other values).

I can reduce the font-size to 52px to get it to line up as exactly 60px tall in Chrome (thus giving me a perfectly 60px tall inline element and allowing me to vertically center reliably) but that is specific not only to Chrome, but to the computer.

How can I get a consistent font height?

Community
  • 1
  • 1
brentonstrine
  • 21,694
  • 25
  • 74
  • 120

3 Answers3

0

If you try 

font-size: 3.29em;

Does that work across browsers?

SomeGuy
  • 246
  • 2
  • 10
  • Nope. :D It decreases/increases font size consistently. This could only work if `em`s were applied inconsistently between browsers *in the exact inverse* to how the line-height is inconsistent between browsers. – brentonstrine Dec 05 '14 at 02:40
0

Each browser has it's own preset styles that you might need to override. Set this at the top of your css to remove any defaults:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, time {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

And then style however you wish after.

calyxofheld
  • 1,538
  • 3
  • 24
  • 62
  • 1
    I'm familiar with CSS normalizers. In fact, JSFiddle has one built in. [This](http://jsfiddle.net/brentonstrine/gys9neme/7/) is what it looks like with the CSS normalized. Doesn't actually fix the issue. – brentonstrine Dec 05 '14 at 01:53
0

I was having similar issues with texts contained in buttons and input fields. If you are using web font services like Fontsquirrel, as I am, make sure you check the font optimization option "Vertical Metrics" to "No Adjustment", under Expert Mode. Fontsquirrel defaults seems to mess up with these things.

wolfitoXtreme
  • 111
  • 3