Font Size Conversion Chart
author: mike foskett incept: 7th April 2010
last modified: 6th August 2011
| 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 |
This is a personal copy of the work on the Devirtuoso site called CSS Font Size Conversion Chart.
There's also a good online PX to EM conversion calculator available.
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. Also note even IEv8 doesn't resize fonts stated in px.
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 Arial, Verdana or Helvetica at 75% / 0.75em / 12px / 9pt. With a decent amount of line height 140% - 150%.
If you are using very small fonts, 10px or less, I advise using Verdana as it's actually designed to work at small sizes. At larger sizes Arial appears to be clearer.
There is a common practice where the body element is set to 62.5% which has the effect of equating (sort of) em to px. For example: 1em = 10px; 0.8em = 8px, and 2.5em = 25px.
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. Capcha method by Hardcode NL.
1
CATHYBauer30
02 10 2011
Some time before, I needed to buy a good car for my organization but I didn't have enough money and could not purchase anything. Thank God my fellow adviced to try to take the <a href="http://bestfinance-blog.com/topics/mortgage-loans">mortgage loans</a> at creditors. Thence, I did so and was happy with my auto loan.