Skip to main content

A chart of font sizes stated in points, pixels, ems, percent and keywords.

- (update: )

Font Size Conversion Chart

Font Size Conversion Chart
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

There's a good online PX to EM conversion calculator available.

Photoshop note

If your document is set at 72dpi (or 72ppi) then while inside Photoshop points = pixels but that's not true in a browser. Always state sizes in pixels to web developers.

For example my current laptop (using Opera Developer 38.0): 1 inch (25.4mm) of screen width (measured with a rule) = 128px (pixels) = 96pt (points) = 8pc (picas). Technically that shouldn't be the case, but it is.

Recommendations

These days (2016) It's best practice to let the device / browser make the base font decisions. As far as I've seen they usually default to 16px but I doubt that applies to an Apple watch.

When seting a font size I mostly use the rem unit, which references the pages root font-size and eliminates cascade issues. Though in the rare case where I'm relying on the cascade, I fallback to em.

Language CSS
html {
  font-family: sans-serif;
}
body {
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

Personally I'm very careful with line 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, which does sound counter intuitive. With a base line-height: 1.5 it will only change by ±0.065 between 320px (20rem @ 16px) and 34em (544px @ 16px) so, unless you're a perfectionist, it could be ignored.

The minimum font size should never be smaller than 10px. And that's for small print, asides, captions, or the like and not body copy itself. I'm very pleased to finally see font size increasing generically across the web.

Always ensure height is not set on text blocks. By all means use min-height but if the user increases the font-size by 200%, for accessibility, a set height is likely to crop the text and the page fails WCAG.

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.

Socialise: