This article should be immediately added to your bookmarks. Despite that today most of you use responsive fonts and auto-scaling, an information with chart of font sizes and easy-to-use points to pixels converter will defenitely make you a better designer. As you used to it, we keep sharing sources and links that will make you professional. This time we will show you a chart of font sizes stated in points, pixels, ems, percent and keywords. Less talk, more info:
| Point | Pixel | Em | Percent | Keyword | Default sans-serif |
|---|---|---|---|---|---|
| 6pt | 8px | 0.5em | 50% | Sample | |
| 7pt | 9px | 0.55em | 55% | Sample | |
| 7.5pt | 10px | 0.625em | 62.5% | x-small | Sample |
| 8pt | 11px | 0.7em | 70% | Sample | |
| 9pt | 12px | 0.75em | 75% | Sample | |
| 10pt | 13px | 0.8em | 80% | small | Sample |
| 10.5pt | 14px | 0.875em | 87.5% | Sample | |
| 11pt | 15px | 0.95em | 95% | Sample | |
| 12pt | 16px | 1em | 100% | medium | Sample |
| 13pt | 17px | 1.05em | 105% | Sample | |
| 13.5pt | 18px | 1.125em | 112.5% | large | Sample |
| 14pt | 19px | 1.2em | 120% | Sample | |
| 14.5pt | 20px | 1.25em | 125% | Sample | |
| 15pt | 21px | 1.3em | 130% | Sample | |
| 16pt | 22px | 1.4em | 140% | Sample | |
| 17pt | 23px | 1.45em | 145% | Sample | |
| 18pt | 24px | 1.5em | 150% | x-large | Sample |
| 20pt | 26px | 1.6em | 160% | Sample | |
| 22pt | 29px | 1.8em | 180% | Sample | |
| 24pt | 32px | 2em | 200% | xx-large | Sample |
| 26pt | 35px | 2.2em | 220% | Sample | |
| 27pt | 36px | 2.25em | 225% | Sample | |
| 28pt | 37px | 2.3em | 230% | Sample | |
| 29pt | 38px | 2.35em | 235% | Sample | |
| 30pt | 40px | 2.45em | 245% | Sample | |
| 32pt | 42px | 2.55em | 255% | Sample | |
| 34pt | 45px | 2.75em | 275% | Sample | |
| 36pt | 48px | 3em | 300% | Sample |
Interesting note: a third of your site visitors wear glasses. Pity but true. So don’t forget this when playing with font sizes.
Also be careful with heights and lengths / widths. Ideal line width for scanning or reading still remains the same at 45—75 characters for paragraphs which works out at 34rem approx. Line heights should increase as the width decreases.
The minimum font size should never be smaller than 10px (and only for small print, asides, captions). Always ensure height is not set on text blocks.
To use font-size calculator and find some more original advices go to Font size conversion article.