Access options:

Font Size Conversion Chart

author: mike foskett incept: 7th April 2010

last modified: 29th April 2012

Example font to display:
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

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.

Site search & complementary navigation:

Site search:

Online tools

Text tools

New to site

Most popular

Inspect report: