What are the differences between em and % in terms of text resizing and for fixed width site? Is em more hyped than %?

Question

What are the differences between em and % in terms of text resizing and for fixed width site? If I'm using em or % only for text sizing in a fixed width site and body is set as

{body:font-size:100%}

and what is these best practice to use in css for text sizing for fixed width in terms of accessibility and mobile device friendlies?

What is the difference between % and em for using ctrl + 0 to resizing text in browser?

Which is better and why one should be used over another? What is the problem with % and what i the benefit of em

please give explain with live example .

Answer 1

Both are ways of specifying relative measures. The difference lies in what are they relative to.

% is relative to the container

em is relative to the font size

So for a practical example check this em example and increase the font size (CTRL and +), you'll see that the divs that contain the text increase their size too.

In this other page, when you do the same, the div's don't increase they size.

source

Answer 2

An em comes from the typographical term of the same name. It is the width of the letter 'm' in the current font. If you set a width to, say, 10em, then the width will be fixed at 10 times the width of an 'm'.

% is a number of hundredths of a whole. It describes a size that is dependent on its potential maximum. So, assuming a simple web page viewed in a browser window, with no columns or anything, a width of 50% means half (50/100) of the width of the window. The actual width will change with the width of the window. If you printed the page out, then the width changes to half the width of the printable area on the paper.

Which one you use depends on whether or not you need the dimension in question to adjust with window size. If you need it to adjust, use %. If you need it to remain a fixed dimension, use em.

EDIT: Ah, relating to the font-size descriptor. Referring to some online docs I use, font-size with a % makes the font size relative to its parent. What's the parent of body? A good question that my reference doesn't answer. I would assume it's either a higher-level specifier (i.e. one that would be overridden) in the CSS, or the document default.

As for em, that one takes the length in ems (as defined above) and converts that to a font size (by, say, converting to mm then to points). Since most fonts don't have an em equal to the line height, I wouldn't expect 1em to mean the same as 100%.

Answer 3

I think the best choice is to declare the font-size of the body (and perhaps of the HTML element) in 100%:

body,html {font-size:100%;}

So the font size will be relative to the browser/user specification. Then declare em for text and its container:

div {font-size:1em;width:32em;}

That permits, as Pablo said, to container to be scaled relatively to its texts. So, if the font size grows the container grows too and you have the same words in a line, no matter the size choose by the user. A width of 30 - 35 em is a width that permit read comfortably, and you have a fixed width, fixed to the font size.