Most users won’t adjust their browser’s font settings, so the most common default font-size – the one to generally design against – is 16px. For some texts, this size works well, for others, something larger or smaller might be more suitable.
Regardless, the font-size of the
<body>should be declared using the % unit of measure, even if the value is 100%. For example, to set the main text, on average, to 12px, use the following expression (keeping in mind that 12px is 75% of 16px)
Whenever possible, line-height values should be set as a number, without any units. Applied to the
<body>element, this will insure consistency in the proportion of line-height throughout the document, regardless of variations to font-size.
For example, if the
<body>line-height is set to 1.25, then the computed line-height will always be 1.25 × the font-size of the element, unless stated otherwise. If the<body>font-size is set to 100%, it will typically have a computed size of 16px, which yields a line-height of 20px (16 × 1.25 = 20). If the font-size is increased to 150% (which, on average, is 24px), then the line-height will automatically adjust to 24 × 1.25 = 30px.
Once the font size of the
<body>has been established, most other elements can be sized in relation to it, using the em unit of measure. (Some elements may still need to be sized independently from the main text, such as ones designed to shrink-wrap a background image. These should generally be sized in px).
During the development process we've to calculate some values from time to time. To reduce the braindamage, here's the most common math for that tasks:
(1) (2) (3)
(pixel-value / base-font-size) * 1em = em-value
1) Pixel value to convert into em
2) Base font-size
3) The unit value we want to convert in
(320px / 16px) * 1em = 20em
(1) (2) (3)
(em-value * base-font-size) * 1px = pixel-value
1) Em value to convert into pixel
2) Base font-size
3) The unit value we want to convert in
(20em * 16px) * 1px = 320px
body {
font-size: 16px;
line-height: 20px;
}
h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 19px; }
h6 { font-size: 11px; }body {
font-size: 100%;
line-height: 1.25;
}
h1 { font-size: 2.00em; }
h2 { font-size: 1.50em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.00em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }More in User Agent Style Sheets:
- Internet Explorer: http://www.iecss.com/
- Webkit: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
- Mozilla: http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
- http://kevinburke.bitbucket.org/markdowncss/
- http://jasonm23.github.io/markdown-css-themes/foghorn.html
- http://jasonm23.github.io/markdown-css-themes/markdown5.html