As a rule of thumb, you should always use relative font sizes to make the reading comfortable to your visitors. By doing so, users can actually resize your text and are not forced to get closer to their monitor. CSS provides two useful relative lengths for this purpose: ems and percentages. However, browser are really quirky when it comes to font resizing with these lengths. During all these years, fortunately, some developers found out two useful font size constants that form the base of a successful font sizing:
- 62.5% – equals to 10px
- 76% – equals to 12px
First example with 62.5%:
body {font-size: 62.5%;} /* 1em = 10px */
h1 {font-size: 2em;} /* 1 * 2 = 20px */
Second example with 76%:
body {font-size: 76%;} /* 1em = 12px */
p {font-size: 1.1em;} /* 1 * 0.1 = 13px */
As you can see, it's very simple to make font size calculations using these constants.