Cheat Sheet – HTML CSS Font Size Comparisons & Conversions


Pixels Ems Points Percents
8px 0.5em 6pt 50%
9px 0.55em 7pt 55%
10px 0.625em 7.5pt 62.50%
11px 0.7em 8pt 70%
12px 0.75em 9pt 75%
13px 0.8em 10pt 80%
14px 0.875em 10.5pt 87.50%
15px 0.95em 11pt 95%
16px 1em 12pt 100%
17px 1.05em 13pt 105%
18px 1.125em 13.5pt 112.50%
19px 1.2em 14pt 120%
20px 1.25em 14.5pt 125%
21px 1.3em 15pt 130%
22px 1.4em 16pt 140%
23px 1.45em 17pt 145%
24px 1.5em 18pt 150%
26px 1.6em 20pt 160%
29px 1.8em 22pt 180%
32px 2em 24pt 200%
35px 2.2em 26pt 220%
36px 2.25em 27pt 225%
37px 2.3em 28pt 230%
38px 2.35em 29pt 235%
40px 2.45em 30pt 245%
42px 2.55em 32pt 255%
45px 2.75em 34pt 275%
48px 3em 36pt 300%

Pixels Are Relative to the Screen Resolution and Give the Designer the Greatest Control and Precision

Ems Are Relative to the Parent Element and the Most Accessible Option Because They Allow Browser Defaults to Modify Them

Percentages Are Relative to the Surrounding Text

Points Are Units of Measure Not Relative to A Screen and Should Only Be Used For Printing

Browser Defaults Are Usually 16px/1em



This site uses Akismet to reduce spam. Learn how your comment data is processed.