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 - (update: )

16px ≡ 1rem

Font-size conversion calculator

From:

To type:

Font Size Conversion Chart

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

Font Size Conversion Chart
Browser default considered as :root {font-size:16px}
Point Pixel Em Percent Keyword 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

Recommendations

These days (2017) 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.

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: