Skip to main content

Convert pixel-point-em-rem-percent

Freely convert between pixels (px), points (pt), ems or rems, and percent (%) values. Primarily for font-sizes and media queries. Calculator and chart provided.

Mike Foskett - (incept: )

16px ≡ 1rem

Font-size conversion calculator

From:

To type:

Point font size conversion chart

From points to: pixels, ems, percent and keywords.
Chart updated (2018) to accommodate sub-pixel rendering.

Points font size conversion
Browser default considered as :root {font-size:16px}
Point Pixel Em Percent Keyword Sans-serif
6pt 8px 0.5em 50% Sample
7pt 9.333px 0.583em 58.333% Sample
7.5pt 10px 0.625em 62.5% x-small Sample
8pt 10.667px 0.667em 66.667% Sample
9pt 12px 0.75em 75% Sample
10pt 13.333px 0.833em 83.333% small Sample
10.5pt 14px 0.875em 87.5% Sample
11pt 14.667px 0.917em 91.7% Sample
12pt 16px 1em 100% medium Sample
13pt 17.333px 1.083em 108.3% Sample
13.5pt 18px 1.125em 112.5% large Sample
14pt 18.667px 1.167em 116.7% Sample
15pt 20px 1.25em 125% Sample
16pt 21.333px 1.333em 133.333% Sample
17pt 22.667px 1.417em 141.7% Sample
18pt 24px 1.5em 150% x-large Sample
20pt 26.667px 1.667em 166.7% Sample
22pt 29.333px 1.833em 183.333% Sample
24pt 32px 2em 200% xx-large Sample

Pixel font size conversion chart

From pixels to: points, ems, percent and keywords.
Chart updated (2018) to accommodate sub-pixel rendering.

Pixel font size conversion
Browser default considered as :root {font-size:16px}
Pixel Point Em Percent Keyword Sans-serif
8px 6pt 0.5em 50% Sample
9px 6.75pt 0.5625em 56.25% Sample
10px 7.5pt 0.625em 62.5% x-small Sample
11px 8.25pt 0.6875em 68.75% Sample
12px 9pt 0.75em 75% Sample
13px 9.75pt 0.8125em 81.25% small Sample
14px 10.5pt 0.875em 87.5% Sample
15px 11.25pt 0.9375em 93.75% Sample
16px 12pt 1em 100% medium Sample
17px 12.75pt 1.0625em 106.25% Sample
18px 13.5pt 1.125em 112.5% large Sample
19px 14pt 1.1875em 118.75% Sample
20px 15pt 1.25em 125% Sample
21px 15.75pt 1.3125em 131.25% Sample
22px 16.5pt 1.375em 137.5% Sample
23px 17.25pt 1.4375em 143.75% Sample
24px 18pt 1.5em 150% x-large Sample
26px 19.5pt 1.625em 162.5% Sample
28px 21pt 1.75em 175% Sample
30px 22.5pt 1.875em 187.5% Sample
32px 24pt 2em 200% xx-large Sample
34px 25.5pt 2.125em 212.5% Sample
36px 27pt 2.25em 225% Sample
38px 29pt 2.35em 235% Sample
40px 30pt 2.5em 250% Sample
42px 31.5pt 2.625em 262.5% Sample
44px 33pt 2.75em 275% Sample
46px 34.5pt 2.875em 287.5% Sample
48px 36pt 3em 300% Sample

Recommendations

These days (2018) It's generically a good idea to allow 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.

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

Responsive Typography

Responsive Typography directly contradicts this advice as it manipulates the root font-size directly and, from what I've seen so far, it's the way to go.

Font sizes

When setting 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.

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.

Media queries

The best advice I've read for cross-browser, accessible, media queries is to use em units rather than rems or pixels.

Line length

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

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.

Vertical rhythm

Setting the optimal vertical rhythm can be difficult at best. There's a tool called Syncope which provides a calculator to help get the settings right.

Generally

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.

Avoid pixels, especially on widths. Why? Have a gander at Pixels are dead.

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.