CODEWITHSUNDEEP
css
its_me
its_me

Reputation: 11338

Isn't it okay to define relative font-sizes for child elements when the parent element uses Pixels (px)?

1) I came across THIS ARTICLE today, which states:

The most popular method in working with em values is to set the font-size on the body to 62.5%. Because the default browser font-size is 16px, this makes it 10px (without hard-setting it to 10px, which wouldn't cascade).

What I just quoted (above) essentially means that, I CAN'T set the font-size of the body to 10px directly and then define the font-sizes of other elements in em or % based on that. Isn't it what it meant, or did it get it wrong?

For example, I have body {font-size: 10px;}. And now I set p {font-size: 1.4em;}. Doesn't it mean, the font-size of p is actually 14px? Isn't that cascading? (or is this going to cause me problems on other devices? - - mobiles, tablets, etc.)

2) For any given element, defining its font-size as 1.8em or 180% makes no difference what-so-ever, right? I mean precisely, for an element (whose size we are defining), an em is essentially a decimalized form of %, isn't it?

EDIT: 3) 'em' is often referred to as a very mobile-friendly sizing unit. How about %? Is it just as good, considering Q2?

Upvotes: 0

Views: 98

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

1) The article is wrong when it says that font size in pixels “wouldn’t cascade” (and this reflects a misunderstanding of what the cascade is). You can use em or % for the font sizes of inner elements if you like. You would be setting font size in pixels for them, just indirectly. The flexibility you get is that things will be easier if you later change the base font size set in pixels. On the other hand, em or % settings may imply rounding that will be treated differently by different browsers in some cases.

If you set body {font-size: 10px;} p {font-size: 1.4em;}, then (unless other style sheets interfere), the font-size of p will be 14px. But this has nothing to do with the cascade. It’s a consequence of basic definitions for units and font-size.

2) For font-size, 1.8em and 180% have the same meaning by definitions. There used to be reasons to favor one or the other, due to browser bugs with the other, but these considerations have lost significance.

3) Yes, using % is just as good.

Upvotes: 1

Related Questions