Home → Helpful Resources → All About Fonts → Font Size Conversion Chart
2.2. 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 |
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.
source: http://websemantics.co.uk/resources/font_size_conversion_chart/