Skip to content

px, em, rem?

Use em only for sizing that needs to scale based on the font size of an element other than the html (root) element.

Use rem unit for elements that scale depending on a user's browser font size settings. Use rem as the unit for most of your property value.

For complex layout arrangement, use percentage (%).

User can change the font-size within the browser setting (difficult to find). This has no effect if px are used (main reason to discard px?)

  • Pixels are ignorant, don’t use them. ?
  • Use rem for sizes and spacing.
  • rem and em units are computed into pixel values by the browser, based on font sizes in your design.
  • em units are based on the font size of the element they’re used on.
  • rem units are based on the font size of the html element.
  • em units can be influenced by font size inheritance from any parent element
  • rem units can be influenced by font size inheritance from browser font settings.
  • Use em units for sizing that should scale depending on the font size of an element other than the root.
  • Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.
  • Use rem units unless you’re sure you need em units, including on font sizes.
  • Use rem? em? units on media queries. Found both as best practices (em seems also to work with safari)
  • Don’t use em or rem in multi column layout widths - use % instead.
  • Don’t use em or rem if scaling would unavoidably cause a layout element to break.

Tip

When creating layouts it’s often easier to think in pixels but output in rem units.

You can have pixel to rem calculations done automatically via a preprocessor like Stylus / Sass / Less, or a postprocessor like PostCSS with the PXtoRem plugin.

Use % for font-size

Tailwind

Do not use @apply just to make things look “cleaner”.

If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.