Scary title, eh.

I'm trying to use only ems for font sizing on a site but the way it's working out is biting me.

#body font size is set to 62.5% so that 1em = 10px.

I have a big div with font-size:1.2em. The problem with this being that specifying font sizes in ems for divs in the big div results in relative font sizes, meaning a header div at 6em is now too big, because it's relative to 1.2em.

How can you work with this relativity and how exactly does it work (is 1.2 multiplied by 1.6)?

2 answers

1
point

The simple way is to only declare font-size on the text containing elements.

so your big div doesn't have a font-size declaration, but the p and h within it do.

e.g. don't do

#big-div{font-size:1.2em}

do:

#big-div p {font-size: 1.2em}
#big-div h1{font-size: 6em}

if you want to cascade font sizes in ems, you'll need to do pretty complicated math (http://www.clagnut.com/blog/348/)

Or you reset the child elements back to 1em as suggested in that article...

Answered about 6 years ago by Tony Crockford
kemie 247
0
points

Tony has a good point. I would very much recommend using one of these tools.

online em calculator

air based em calculator

pixel to em converter

Answered about 6 years ago by kemie