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

## Point font size conversion chart

From points to: pixels, ems, percent and keywords.

Chart updated (2018) to accommodate sub-pixel rendering.

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.

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.

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

## Socialise: