# 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: )*

## 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.

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.

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.

## Social links and email client: