initialize body font-size by em, %, or px?

Question

I used to use em for my body font-size, like body {font-size: 1em;}

but I just found that if use em in my setting, I write width: 56.25em, it is not as same as width: 900px. But if I write body {font-size: 16px}, it will work.

here is my fiddle example, you can click "px", "%", "em" to see my question.

If I want to set width with em, should I write body {font-size: 1em;} ? thanks

Does this help? http://stackoverflow.com/questions/609517/why-em-instead-of-px — ZZ9, Jul 26 '14 at 02:15

score 0 · Answer 1 · answered Jul 26 '14 at 02:20

0

in order to set the width with em, it is better to set the body font-size with px. I optimize it after for mobile then I ensure a smooth transition on mobile viewport with the transition property. here is my setting:

body { 
    font-family: 'Open Sans', sans-serif;
    font-size: 16px; 
    font-weight: 400;
    text-align: center;
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in; 
    transition-timing function: linear, ease-in; 
    text-rendering: optimizeLegibility; 
}

answered Jul 26 '14 at 02:20

william.eyidi

2,315
4
27
39

What do you mean by "smooth transition on mobile viewport"? – BoltClock Jul 26 '14 at 03:13
when the text will be resized, it will take 0.5s and it creates an better effect while resizing. – william.eyidi Jul 26 '14 at 03:17
Is that just something that your application does? I don't know of any common situations where the text will be resized. – BoltClock Jul 26 '14 at 03:19
simple, I have a couple of media queries for different screen size, and i want some of my header to be smaller. I will define a small font size. this way while re-sizing the window the transition will be smooth. cheers – william.eyidi Jul 26 '14 at 03:32

Ryan Mitchell · Answer 2 · 2014-07-26T04:53:54.563

I would strongly advise against setting the body font-size in terms of px, as this overrides any browser settings the user may have put in and thus is a bad accessibility decision. Personally, I see no reason to set the body font-size at all, except maybe for mobile; but if you need to set it, it's probably best to set it as a percentage or in ems.

Let me give a personal example. I have intermittent eye problems. On good days, I use the "normal" font-size (16); whereas on bad days, I increase the font-size in my browser (in Chrome, Settings->Advanced->Font Size) to 18, 20, or even higher.

Today, I have the size set higher. In your Fiddle, clicking on % or em shows me the larger font size I set and hoped to see across all sites, whereas clicking on px overrides that setting and forces me to either zoom in or manually override the styles myself.

As a side note, the whole point of setting widths in terms of ems is that an object with width 5em has a varying width in pixels but a constant width in proportion to the font-size of the element. If you really want something to have a definite width in px, you should specify px; if you want it to vary with the font-size (e.g., a column width), you may well want to use ems.

initialize body font-size by em, %, or px?

2 Answers2