em takes font-size from parent not body

[Lawrence Farrell]

I have a bunch of pages on my site where the fonts are resizeable.  I am using JavaScript to change the font-size in the body and using em units throughout the pages to make the text proportional throughout.  I am using a control from a third part.  Actually quite a few of them.  These controls get nested.  I have test in the inner-most level that is set to 1em.  What SHOULD happen is that when the font-size is changed on the body, that change should cascade to these inner elements.  However, there is a problem (therefore, this post ;)  )  Somewhere along the line the 3rd party control is setting the font to 12px. No matter what I do to the body's font-size, the inner-most elements are unaffected.  Unfortunately, I think that is EXACTLY right in the way it was designed.  However, that doesn't mean I have to like it!  I want my em units to be based on the body's size not the containing element's.  Is there any way to get that done?


Thanks in advance!
--Larry--

[Brandtley McMinn]

Hey Larry,

Not sure if you've looked into rem values, but they're the same as em only they reference the parent value. Kinda like using inherit, but a bit different. I usually define my base like this:

body { ... font-size: 62.5%; line-height: 1em; ... }

So anything else I do from there is:

.example { ... font-size: 1.6rem; line-height: 2rem; }

The reason I use 62.5% is because it mods the browser's default font-size to around 10px (most browsers use 16pt as a base size) so any em/rem value I use is a base 10 multiple, which is easy for me to keep straight.

Normalize CSS (http://necolas.github.com/normalize.css/) sets all this up for you, but I would highly suggest using rems with a pixel based fall back prefacing your declarations:

.example2 (font-size: 16px; line-height: 20px; font-size: 1.6rem; line-height: 2rem; }

Just like vendor prefix fall-backs.

Hope this helps,

--
Brandtley McMinn - Owner/Creative Director
http://giggleboxstudios.net
@brandtleymcminn

Lawrence Farrell

Tuesday, April 17, 2012 2:37 PM

I have a bunch of pages on my site where the fonts are resizeable.  I am using JavaScript to change the font-size in the body and using em units throughout the pages to make the text proportional throughout.  I am using a control from a third part.  Actually quite a few of them.  These controls get nested.  I have test in the inner-most level that is set to 1em.  What SHOULD happen is that when the font-size is changed on the body, that change should cascade to these inner elements.  However, there is a problem (therefore, this post ;)  )  Somewhere along the line the 3rd party control is setting the font to 12px. No matter what I do to the body's font-size, the inner-most elements are unaffected.  Unfortunately, I think that is EXACTLY right in the way it was designed.  However, that doesn't mean I have to like it!  I want my em units to be based on the body's size not the containing element's.  Is there any way to get that done?


Thanks in advance!
--Larry--

--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-d...@googlegroups.com
To unsubscribe: css-design-...@googlegroups.com