Re: [Design with CSS 3709] em takes font-size from parent not body

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-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com