Responsive CSS: em's wont resize lower than &l

Question

I am coding my first responsive layout using CSS @media queries. I've added the <meta name="viewport" content="width=device-width"> to my html so I have a strict series of device-width based font-size layouts. And, I'm using em's to (hopefully) give the most consistant browser resizing with html, body {width/height:100%; font-size: 1em}.

In my smallest case, I want to put the <h2> tag at a relatively small em in the range of < 0.5em. However, once I go below that amount it no longer resizes. The only option I can see is to switch back to pixels and to use some small 10px amount.

Maybe I could think about this a different way? Or maybe I am missing something in the specs for em. Any advice is appreciated.

Answer 1

Browsers all have a base font-size. Generally, that should be between 14px and 18px. If you don't specify a body font-size, 1em will equal the default font-size. Your example works for me, however, 0.5em = 50% of 14-18px => 7-9px. That is way too small to be properly readable.

Reference:http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/

You can specify a bigger body font size (e.g, 24px), and in that case 0.5em will equal 12px, which is small, but still okay.

Additional note: be careful with setting

html, body {
font-size: 1em;
}

For me (in Google Chrome), this produced a different (smaller) font-size than

body {
font-size: 1em;
}

Answer 2

Most browsers have a "minimum font-size" setting that cannot be overridden. In Opera, the default minimum size is 9px. Since the default font-size for body text is 16px, .5em would calculate out to be 8px.