problem assigning font size value em for html element

[prathoven]

Hi, everyone

I’m stucked in the wierd problem. I google it but can’t find solution. Here’s the problem:

http://jsfiddle.net/prathoven/dm4Dk/

If px is assigned it works. I’m stuck here with curiosity. Thanx.

[Paulie_D]

You are encountering the fact that the size ’em’ inherits its base size from the parent, in this instance the li.

Thus in your example, the size is 1.8×1.8 which = 3.24? [or is it 1.8+0.8=2.6?? I always get confused]

See: http://jsfiddle.net/tvgbW/1/

[David_Leitch]

The unit of measure em is calculated on the selector’s parent element. Therefore ul li is 1.8 times the base font and ul li em is 3.24 times the base element, because it’s 1.8 * 1.8 (ul li’s font-size).

To solve this, you can either use rem, which is based on the root element (so, the html or body font-size), or you can set ul li e to 1em.

Sorry if my explanation is a bit confusing :)

@Paulie_D Too fast for me :D

[Paulie_D]

@David_Leitch No problem, of course rem is the answer but browser support is [very limited](http://caniuse.com/#search=rem “very limited”) [IE9+] at the moment AFAIK.

[David_Leitch]

I was thinking that rem support was a bit limited, but couldn’t remember how much so; thanks for the link :)

Just out of interest, do you think it’s still worth the time to use rem, with em fallback, despite the limited support? i.e.:

ul li{
font-size: 1.2rem;
font-size:1em;
}

Or should it be something to keep in mind, but wait until more widespread support?

[Paulie_D]

>Or should it be something to keep in mind, but wait until more widespread support?

I think this purely because I don’t want to set two properties every time at the moment.

However, if you wanted to future-proof then there is no reason you couldn’t use both now (of course the rem setting should be after the em setting….no?).

Personal choice I guess.

[David_Leitch]

Ah yes, sorry. Had meant to put them the other way round; blame it on trying watch a movie at the same time as typing :)

Good point, @joshuanhibbert

[Paulie_D]

Ah…multi-tasking. :)

[prathoven]

Thanx all for helping me figuring it out.
So the buttom line is font size of for <.em> here is double of parent of li.

I think i won’t use rem because its not widely supported and moreover to save few bytes!

[Author]

Posts