Font Size Conversion Chart
author: mike foskett incept: 7th April 2010
last modified: 20th April 2010
This is a personal copy of the work on the Devirtuoso site called CSS Font Size Conversion Chart.
| Points | Pixels | Ems | Percent | Keyword | Default sans-serif |
|---|---|---|---|---|---|
| 6pt | 8px | 0.5em | 50% | Sample text | |
| 7pt | 9px | 0.55em | 55% | Sample text | |
| 7.5pt | 10px | 0.625em | 62.5% | x-small | Sample text |
| 8pt | 11px | 0.7em | 70% | Sample text | |
| 9pt | 12px | 0.75em | 75% | Sample text | |
| 10pt | 13px | 0.8em | 80% | small | Sample text |
| 10.5pt | 14px | 0.875em | 87.5% | Sample text | |
| 11pt | 15px | 0.95em | 95% | Sample text | |
| 12pt | 16px | 1em | 100% | medium | Sample text |
| 13pt | 17px | 1.05em | 105% | Sample text | |
| 13.5pt | 18px | 1.125em | 112.5% | large | Sample text |
| 14pt | 19px | 1.2em | 120% | Sample text | |
| 14.5pt | 20px | 1.25em | 125% | Sample text | |
| 15pt | 21px | 1.3em | 130% | Sample text | |
| 16pt | 22px | 1.4em | 140% | Sample text | |
| 17pt | 23px | 1.45em | 145% | Sample text | |
| 18pt | 24px | 1.5em | 150% | x-large | Sample text |
| 20pt | 26px | 1.6em | 160% | Sample text | |
| 22pt | 29px | 1.8em | 180% | Sample text | |
| 24pt | 32px | 2em | 200% | xx-large | Sample text |
| 26pt | 35px | 2.2em | 220% | Sample text | |
| 27pt | 36px | 2.25em | 225% | Sample text | |
| 28pt | 37px | 2.3em | 230% | Sample text | |
| 29pt | 38px | 2.35em | 235% | Sample text | |
| 30pt | 40px | 2.45em | 245% | Sample text | |
| 32pt | 42px | 2.55em | 255% | Sample text | |
| 34pt | 45px | 2.75em | 275% | Sample text | |
| 36pt | 48px | 3em | 300% | Sample text |
Advice:
On small simple sites (like this one!) I tend to set the body element to 100% then use keywords (x-small, small, medium, large, x-large and xx-large) like so:
body {font: 100.01%/150% verdana,helvetica,sans-serif}
#content {font-size: small}
h1 {font: italic bold x-large georgia,"Times New Roman",serif}
h2 {font: italic bold large georgia,"Times New Roman",serif}
h3 {font: italic bold medium georgia,"Times New Roman",serif}
h4 {font: italic bold small georgia,"Times New Roman",serif}
#footer {font-size: x-small}
The body element is slightly greater than 100% to solve any rounding issues which may occur at smaller sizes. It's also stated as a percentage to prevent IE messing up font scaling.
Using keywords simplifies sizing for mobile devices which have set limited font-sizes. Most modern browsers reproduce a very similar keyword size cross-browser. IEv6- gives the biggest size discrepancy but personally I considered that acceptable.
For accessibility reasons I suggest the minimum body content font-size to be Verdana or Helvetica at 75% / 0.75em / 12px / 9pt. With a decent amount of line height 140% - 150%.
A third of your visitors need glasses! In fact some two thirds of your audience need help viewing websites. Amazingly half of them don't wear their glasses or contacts when browsing online.
Have your say…
The commenting system used here is a modified version of comment_rave.