Grow your CSS skills. Land your dream job.

About ems for font sizes

  • # March 5, 2010 at 12:50 pm

    Hi everybody,
    There is something I really don’t understand in CSS when using ems for font sizes.

    I usually set font size of the body to 62.5% and then use em for all the other font sizes. Now look at this code:

    Code:
    div.post {
    font-size: 1.4em;
    }
    div.post span.post-date {
    font-size: 1.1em;
    }

    I would expect that the font size of the post date will be equivalent to 11px, but it’s actually equivalent to 110% of 1.4em which is bigger than 14px.

    I did a little bit of research and found out that this behavious is normal, but in those circumstences, how am I supposed to set font sizes accurately? is there a trick to make all the font sizes relative to the one of the body? Or am I missing something?

    # March 5, 2010 at 1:49 pm

    This happens when you are using ems with nested elements. In your case the span is nested in the div.post. You are essentially multiplying 1.4em by 1.1em making it 1.54em in size. You will want to either explicitly name the size (11px, in this case) or figure out how to get it to 11px by "multiplying" 1.4ems. Try .8em for your span element and you should achieve your desired effect.

    Reggie.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".