DEV Community

Discussion on: 15 CSS Relative units, how many do you know? em, rem, ex, cap, ch, ic...

Collapse
dan503 profile image
Daniel Tonon
html {
  /* 1rem = 10px */
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}
Enter fullscreen mode Exit fullscreen mode

Now 1rem = 10px for easy unit conversions and the default font size of the site remains at the expected default of 16px. 😁

It also still allows font scaling since it doesn't involve px units.

Collapse
bytegasm profile image
Bytegasm! Author • Edited on

Neat. I've seen a lot of devs prefer this. However, I've personally gotten used to 16px.

Here's the article from 2004 where this technique was first introduced.

Collapse
dan503 profile image
Daniel Tonon • Edited on

Ok if you really must use px units for fonts then please install this postcss npm plugin into your build process

npmjs.com/package/postcss-pxtorem

Using px units on any font setting on your site is an instant WCAG AA accessibility fail.

w3.org/TR/UNDERSTANDING-WCAG20/vis...

Same goes for things like vw in font size settings. It should be combined with rem in a calc function to ensure that text is still able to be resized.

Collapse
rainstormza profile image
Supakorn Thongtra

I personally like .625em :)