Skip to main content

Font size conversion: 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 charts provided.

Mike Foskett - (incept: )

Font-size conversion calculator

From:
Change result unit to:

Point to pixel, pixel to point, font size comparison chart

Compare significant points, or significant pixels, with their equivalents in: pixels (px), points (pt), ems, percent (%) and keywords. Chart accommodates sub-pixel rendering.

Font size conversion table
Default considered as a 96dpi viewport with :root {font-size:16px}
Em / rem Percent Keyword Sans-serif (default)
6pt8px0.5em50%Sample
6.75pt9px0.5625em56.25%xx-smallSample
7pt9.333px0.5833em58.333%Sample
7.5pt10px0.625em62.5%x-smallSample
8pt10.667px0.6667em66.667%Sample
8.25pt11px0.6875em68.75%Sample
9pt12px0.75em75%Sample
9.75pt13px0.8125em81.25%Sample
10pt13.333px0.8333em83.333%smallSample
10.5pt14px0.875em87.5%Sample
11pt14.667px0.9167em91.667%Sample
11.25pt15px0.9375em93.75%Sample
12pt16px1em100%mediumSample
12.75pt17px1.0625em106.25%Sample
13pt17.333px1.0833em108.333%Sample
13.5pt18px1.125em112.5%largeSample
14pt18.667px1.1667em116.667%Sample
14.25pt19px1.1875em118.75%Sample
15pt20px1.25em125%Sample
15.75pt21px1.3125em131.25%Sample
16pt21.333px1.3333em133.333%Sample
16.5pt22px1.375em137.5%Sample
17pt22.667px1.4167em141.667%Sample
17.25pt23px1.4375em143.75%Sample
18pt24px1.5em150%x-largeSample
18.75pt25px1.5625em156.25%Sample
19pt25.333px1.5833em158.333%Sample
19.5pt26px1.625em162.5%Sample
20pt26.667px1.6667em166.667%Sample
20.25pt27px1.6875em168.75%Sample
21pt28px1.75em175%Sample
21.75pt29px1.8125em181.25%Sample
22pt29.333px1.8333em183.333%Sample
22.5pt30px1.875em187.5%Sample
23pt30.667px1.9167em191.667%Sample
23.25pt31px1.9375em193.75%Sample
24pt32px2em200%xx-largeSample
24.75pt33px2.0625em206.25%Sample
25pt33.333px2.0833em208.333%Sample
25.5pt34px2.125em212.5%Sample
26pt34.667px2.1667em216.667%Sample
26.25pt35px2.1875em218.75%Sample
27pt36px2.25em225%Sample
27.75pt37px2.3125em231.25%Sample
28pt37.333px2.3333em233.333%Sample
28.5pt38px2.375em237.5%Sample
29pt38.667px2.4167em241.667%Sample
29.25pt39px2.4375em243.75%Sample
30pt40px2.5em250%Sample
30.75pt41px2.5625em256.25%Sample
31pt41.333px2.5833em258.333%Sample
31.5pt42px2.625em262.5%Sample
32pt42.667px2.6667em266.667%Sample
32.25pt43px2.6875em268.75%Sample
33pt44px2.75em275%Sample
33.75pt45px2.8125em281.25%Sample
34pt45.333px2.8333em283.333%Sample
34.5pt46px2.875em287.5%Sample
35pt46.667px2.9167em291.667%Sample
35.25pt47px2.9375em293.75%Sample
36pt48px3em300%Sample

Font recommendations

It's generically a good idea to allow the device / browser make the base font-size decisions. As far as I've seen they usually default to 16px.

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, for scalable typography, it's the way to go. There's a Fluid-responsive font-size calculator available to help with that.

Font size guidelines

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.

Erik D. Kennedy has some well-thought-out guidelines for font size on text heavy pages, such as blogs or articles, and also covers interaction heavy pages, such as email apps. Font Size Guidelines.

Font units

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.

Kathleen McMahon has an in-depth piece covering why we should use relative units in CSS when setting type. Pixels vs. Relative Units in CSS: why it’s still a big deal.

Media queries

Zell has the best advice I've read for cross-browser, accessible, media queries and concludes 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 34em (544px) 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 544px (34em @ 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.

Matej Latin has an article which covers Vertical rhythm amongst other good typography practices.

Font coding

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 fixed height is likely to crop the text and the page fails WCAG.

Avoid pixels! 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 to view websites. Amazingly half of them don't wear their glasses or contacts when browsing online.