Question

My current project is entirely based on ems.

html

<div class="tiny">
    This is some tiny text which is tiny.
</div>

<div class="small">
    This is some small text which is small.
    <div class="tiny">
        And this is some tiny text inside small text which should be as tiny as the other tiny one.
    </div>
</div>

css

.tiny {
    font-size:0.7em;
    line-height:1.7;   
}

.small {
    font-size:0.8em;
    line-height:1.3em;  
}

In this case the tiny text inside the small text is smaller than the normal tiny text.

First off, why is that? Secondly, how can I fix this or make it the same size?

http://jsfiddle.net/DFKtF/

Thank you in advance!

Answer 1

The em unit mostly denotes the font size of the element itself, but in the value of font-size (where that would make no sense), it denotes the font size of the parent element. So in your example, the quantity 0.7em means 0.7 times the font size of the enclosing element, which already has a reduced font size.

To deal with this, simply select the number accordingly. If you want tiny text that is 0.7 times the copy text font size, and the enclosing element has font size of 0.8 times the copy text size, you’ll need the number 0.7/0.8, i.e. .small should have font-size:0.875em.