Connecting Tech Pros Worldwide Forums | Help | Site Map

Understanding EM

fleemo17@comcast.net
Guest
 
Posts: n/a
#1: Nov 7 '05
I'm trying to get my head around the EM concept. By saying p
{font-size:1.0em;} am I, in effect, saying that paragraphs in this
document should use the browser's default font size or whatever they
set it to in the browser's preferences? For example, if the user set
the font size to 24 point text, specifying p {font-size:1.0em;} would
result in paragraph text displaying at 24 points, with H1 text being
relatively larger than 24 points?

-Fleemo


Darin McGrew
Guest
 
Posts: n/a
#2: Nov 7 '05

re: Understanding EM


<fleemo17@comcast.net> wrote:[color=blue]
> I'm trying to get my head around the EM concept. By saying p
> {font-size:1.0em;} am I, in effect, saying that paragraphs in this
> document should use the browser's default font size or whatever they
> set it to in the browser's preferences?[/color]

Technically, you're setting the font size of the paragraph to whatever the
font size of the paragraph's parent element is. Something could change the
font size of its parent element (e.g., BODY, DIV), and that would affect
the font size of the paragraph.

But in principle, you're setting the font size to whatever the font size is
set to in the browser's preferences. If the user hasn't changed the
browser's preferences, then this will be the browser's default font size.

Another caveat: MSIE has a bug with em units. You can work around this bug
by adding

body { font-size: 100% }

to your style sheet. Or you can work around this bug by avoiding em units
and using percentages for font-size instead.
[color=blue]
> For example, if the user set the font size to 24 point text, specifying
> p {font-size:1.0em;} would result in paragraph text displaying at 24
> points, with H1 text being relatively larger than 24 points?[/color]

Assuming that there's a rule like

h1 { font-size: 200% }

somewhere--in the document style sheet(s), user style sheet(s), or
user-agent style sheet(s)--then yes, the H1 elements would be displayed
relatively larger than the default font size (200% of 24pt = 48pt in this
example).
--
Darin McGrew, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, darin@htmlhelp.com, http://www.HTMLHelp.com/

"How long is this Beta guy going to keep testing our stuff?"
Spartanicus
Guest
 
Posts: n/a
#3: Nov 7 '05

re: Understanding EM


fleemo17@comcast.net wrote:
[color=blue]
>I'm trying to get my head around the EM concept. By saying p
>{font-size:1.0em;} am I, in effect, saying that paragraphs in this
>document should use the browser's default font size or whatever they
>set it to in the browser's preferences?[/color]

That depends on inheritance, see
http://www.w3.org/TR/CSS21/cascade.html#inheritance
[color=blue]
>For example, if the user set
>the font size to 24 point text, specifying p {font-size:1.0em;} would
>result in paragraph text displaying at 24 points, with H1 text being
>relatively larger than 24 points?[/color]

No, an <h1> isn't going to be a descendant element to a <p>, so
specifying a size for a <p> will have no effect on <h1>s. To suggest a
font size that inherits down to all elements you need to specify it on
the <body> element.

Btw, given certain browser bugs it is generally wiser use % for font
sizing.

--
Spartanicus
Closed Thread