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?
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.