Hi.

I have a case where i set h2 elements font size to 18px. When i use firebug to tell elements computed settings i get such list:

font-family arial
font-size   18px
font-weight 600
font-style  normal
color   #FFFFFF
text-transform  none
text-decoration none
letter-spacing  normal
word-spacing    0
line-height 22px
text-align  start

When i look at the page in browser though, the font size is not 18 px though, its less. When i take screenshot and measure its Caps height its 14px. Now obvious question would be if i have scrolled in or rather out with my browser - i havent. All other elements display their correct size - elements where i have set width 995 px do measure to be 995px wide on screenshot.

Another obvious thing would be that some other rule overwrites the h2 height. Nope, that is also not the case, as the style i have written is :

#body #content #yellow h2 {color:#FFFFFF;font-size:18px;font-weight:600;line-height:22px;}

You cant be more specific like that. I do use css reset but reset.css is before style.css in my html head:

<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">

The same problem is with h1 also. I have set its height to 24px but it displays with 18px height.

Only thing i could guess, that is causing the problem is that h2 element is before h1 element in html:

        <div id="content" class="fr">
            <div id="yellow" class="fr">
                <h2>H2 header element</h2>
                <img alt="alternate text" src="img/samba-hydro.jpg"/>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
            </div>
            <h1>H1 header here</h1>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>

That div#yellow is sort of article inside an bigger article and creates third column inside 2nd, content, column. And this is not the cause either, as far as i can test it. setting !important changes nothing either.

How can this be fixed?

Edit: Looks like setting font size with pt instead of px seems to give the desired results. Can someone explain though, why size in pixels does not result in actual desired size.

Alan

1 answer

3
points

There are a couple of factors you need to take into account. The size of the font and the height of a character are not the same thing, different fonts at the same size will have characters at different heights. This from Wikipedia:

In metal type, the point size of the font described the size (height) of the metal body on which the typeface's characters were cast. In digital type, the body is now an imaginary design space, but is used as the basis from which the type is scaled.

The other thing to take into account is that, when you're using measures like pt, font size is calculated based on the DPI of the display. So the fact that the text happens to have a height of the number of pixels you want on your screen doesn't mean it's going to look that way on anyone else's screen.

Try this for a full introduction to typography on the web.

Answered over 6 years ago by Rob Crowther