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 - 18th January 2021 (incept: 07-04-2010)

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)
6pt	8px	0.5em	50%		Sample
6.75pt	9px	0.5625em	56.25%	xx-small	Sample
7pt	9.333px	0.5833em	58.333%		Sample
7.5pt	10px	0.625em	62.5%	x-small	Sample
8pt	10.667px	0.6667em	66.667%		Sample
8.25pt	11px	0.6875em	68.75%		Sample
9pt	12px	0.75em	75%		Sample
9.75pt	13px	0.8125em	81.25%		Sample
10pt	13.333px	0.8333em	83.333%	small	Sample
10.5pt	14px	0.875em	87.5%		Sample
11pt	14.667px	0.9167em	91.667%		Sample
11.25pt	15px	0.9375em	93.75%		Sample
12pt	16px	1em	100%	medium	Sample
12.75pt	17px	1.0625em	106.25%		Sample
13pt	17.333px	1.0833em	108.333%		Sample
13.5pt	18px	1.125em	112.5%	large	Sample
14pt	18.667px	1.1667em	116.667%		Sample
14.25pt	19px	1.1875em	118.75%		Sample
15pt	20px	1.25em	125%		Sample
15.75pt	21px	1.3125em	131.25%		Sample
16pt	21.333px	1.3333em	133.333%		Sample
16.5pt	22px	1.375em	137.5%		Sample
17pt	22.667px	1.4167em	141.667%		Sample
17.25pt	23px	1.4375em	143.75%		Sample
18pt	24px	1.5em	150%	x-large	Sample
18.75pt	25px	1.5625em	156.25%		Sample
19pt	25.333px	1.5833em	158.333%		Sample
19.5pt	26px	1.625em	162.5%		Sample
20pt	26.667px	1.6667em	166.667%		Sample
20.25pt	27px	1.6875em	168.75%		Sample
21pt	28px	1.75em	175%		Sample
21.75pt	29px	1.8125em	181.25%		Sample
22pt	29.333px	1.8333em	183.333%		Sample
22.5pt	30px	1.875em	187.5%		Sample
23pt	30.667px	1.9167em	191.667%		Sample
23.25pt	31px	1.9375em	193.75%		Sample
24pt	32px	2em	200%	xx-large	Sample
24.75pt	33px	2.0625em	206.25%		Sample
25pt	33.333px	2.0833em	208.333%		Sample
25.5pt	34px	2.125em	212.5%		Sample
26pt	34.667px	2.1667em	216.667%		Sample
26.25pt	35px	2.1875em	218.75%		Sample
27pt	36px	2.25em	225%		Sample
27.75pt	37px	2.3125em	231.25%		Sample
28pt	37.333px	2.3333em	233.333%		Sample
28.5pt	38px	2.375em	237.5%		Sample
29pt	38.667px	2.4167em	241.667%		Sample
29.25pt	39px	2.4375em	243.75%		Sample
30pt	40px	2.5em	250%		Sample
30.75pt	41px	2.5625em	256.25%		Sample
31pt	41.333px	2.5833em	258.333%		Sample
31.5pt	42px	2.625em	262.5%		Sample
32pt	42.667px	2.6667em	266.667%		Sample
32.25pt	43px	2.6875em	268.75%		Sample
33pt	44px	2.75em	275%		Sample
33.75pt	45px	2.8125em	281.25%		Sample
34pt	45.333px	2.8333em	283.333%		Sample
34.5pt	46px	2.875em	287.5%		Sample
35pt	46.667px	2.9167em	291.667%		Sample
35.25pt	47px	2.9375em	293.75%		Sample
36pt	48px	3em	300%		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;
  line-height: 1.5;
}

The property text-rendering: optimizeLegibility was removed due to purported performance issues in Android browsers.

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.