Strange, but clearly specific font-sizes when using ems

Question

I have noticed that websites that use ems for fonts generally have strange, but clearly specific numbers for example: in a popular reset css - normalize.css I found that has a h3 set to 1.17em, h4 to 1.33em and h5 to 1.67em, why is this? Is there a calculator or something that I should be using to calculate every font-size?

I have been adjusting the font-size in ems for headings, p, captions, etc, but with no calculator or anything, I simply make it bigger or smaller until I think it looks good. In other words, my website has font-sizes 0.7em,0.9em, 1em, 1.1em, etc, even a 4em (i like big h1).

Is this bad? Have I been ignoring an important fact when using ems for font sizes?

Answer 1

As you know, em units in font sizes allow the sizes of text elements to retain their proportions relative to other text elements.

There is a method for scalable text in which a "baseline" font size is set on the HTML or BODY element. I generally set this "baseline" font size to 10px because it's a nice round number and makes ems throughout the site easier to calculate. Say a title is 15px in my design. I would set that title to 1.5em (1.5 x 10px = 15px). You might notice seemingly odd values due to such calculations.

"Fractional" values might also look unusual. For example, "1.33em" is essentially "1 ⅓ em" and "1.67em" is essentially "1 ⅔ em". These accomplish font sizes that are one third and two thirds larger than the baseline, respectively.

If you are designing on-the-fly (without a design comp), you're probably okay just adjusting until it looks right. It's always a good idea to test things by changing your browser's zoom and/or font-size defaults to see how your pages react.

Answer 2

Showdev does a good job of telling what ems do, however to answer your question about why you see things set this way.

This article does a good job explaining how to achieve a consistent sizing of text across all browsers. This jist is that 14px in IE7 is not the same as 14px in Firefox. Ems give a more consistent result. http://alistapart.com/article/howtosizetextincss

Also, just to give an expanded explanation. Ems are relative to the font size of the parent element. So if I have:

body {
  font-size: 14px;
}
p {
  font-size: 1em;  /* 14px */
}
h2 {
  font-size: 1.5em; /* 21px */
}
#myDiv {
  font-size: 16px;
}
#myDiv h1 {
  font-size: 2em; /* 32px */
}