Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Units Best Practices

CSS units

Recommendations of unit types per media type:

Media Recommended Occasional use Infrequent use Not recommended
Screen em, rem, % px ch, ex, vw, vh, vmin, vmax cm, mm, in, pt, pc
Print em, rem, % cm, mm, in, pt, pc ch, ex px, vw, vh, vmin, vmax

Relative units

Relative units play nicely with both screen and print media types and should be the most frequently used CSS units.

Unit Description
% percentage, relative to the same property of the parent element
em relative to font size of the element
rem relative to font size of the root element
ch relative to width of the "0" (ZERO, U+0030) glyph in the element's font
ex relative to x-height of the font

Absolute units

Physical units (e.g. cm, mm, in, pc, and pt) should only be used for print style sheets, while pixels (px) should only be used for the screen. While there are consistent conversions among all of these absolute length units, depending on the device, CSS units can actually mean different things. For example, while 1cm in CSS should print as one physical centimeter, there's no guarantee that 1cm in CSS results in one physical centimeter on the screen.

Unit Description cm mm in pc pt px
cm centimeter 1cm 10mm
mm millimeter 1/10cm 1mm
in inch 2.54cm 25.4mm 1in 6pc 72pt 96px
pc pica 1/6in 1pc 12pt 16px
pt point 1/72in 1/12pc 1pt 4/3px
px pixel 1/96in 1/16pc 3/4pt 1px

Viewport units

Viewport-percentage length units should be used with caution, as there is still some lingering bugs with their implementation.

Unit Description
vw relative to 1% of viewport's width
vh relative to 1% of viewport's height
vmin relative to 1% of viewport's smaller dimension
vmax relative to 1% of viewport's larger dimension

Contexts

Document-level

Assume the root font size is 16px but don't require it to be so. Either declare the font size as 100% or don't declare the font-size property at all.

html {
  font-size: 100%;
}

Borders

Most likely use px, as most of the time, the border shouldn't need to scale.

.Component {
  border-bottom: 1px solid #ccc;
}

Font-size

Font-size should only be applied at the lowest possible child elements, in order to minimize its cascading impact on relative units. While both of the following two examples are essentially equivalent, only the first is recommended.

DO:

.Component {
}
.Component-heading {
  font-size: 1.2em;
}
.Component-body {
  font-size: 0.9em;
}

DO NOT:

.Component {
  font-size: 1.2em;
}
.Component-heading {
  font-size: 1em;
}
.Component-body {
  font-size: 0.75em;
}

Padding and margin

In order to ensure consistent use of whitespace throughout the application, given a component could be used in a variety of contexts, it may be best to use rem for margin and padding than em.

.Component {
  margin: 1rem 0;
  padding: 1rem;
}

Media queries

Only use em within media query definitions, never pixels. Until there's wider rem support within media queries, rem should be avoided in media queries as well.

@media (min-width: 20em) {
  .Component {
    background-color: blue;
  }
}
@aflashyrhetoric

This comment has been minimized.

Copy link

commented Apr 13, 2016

Great overview/reference!

@equinusocio

This comment has been minimized.

Copy link

commented Dec 14, 2016

A tiny error:

em - relative to font size of the element

EM is relative to font size of the parent element. Not the element itself.

@fregante

This comment has been minimized.

Copy link

commented Dec 15, 2016

@equinusocio no, em is relative to the closest font-size definition.

html {
  font-size: 10px;
  border-width: 1em; /* 10px */
}
body {
  font-size: 20px;
  border-width: 1em; /* 20px */
}

It only follows the parent's if you are setting the element's own font-size

html {
  font-size: 10px;
  border-width: 1em; /* 10px */
}
body {
  font-size: 2em; /* 20px */
  border-width: 1em; /* 20px, not 10px, because it follows its own font-size */
}
@fregante

This comment has been minimized.

Copy link

commented Dec 15, 2016

https://www.w3.org/TR/css-values-3/#font-relative-lengths

the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the font-size property itself, in which case they refer to the computed font metrics of the parent element

@equinusocio

This comment has been minimized.

Copy link

commented Jan 14, 2017

In realtà sono giusti entrambi i casi perche comunque se il font-size non è dichiarato nell'elemento stesso l'em fa riferimento alla prima dichiarazione che trova nei parent, fino ad arrivare alla root e al font-size impostato dal browser. Quindi di default, è relativo al font-size più vicino si, ma che per forza è un parent (se non espresso appunto nell'elemento stesso)

@gsklee

This comment has been minimized.

Copy link

commented Apr 28, 2017

You probably wanna add ic into the Relative Units section which is relative to the width of the CJK "水" (WATER, U+6C34) character in the element's font.

@gsklee

This comment has been minimized.

Copy link

commented Apr 28, 2017

The last link inside the gist also seems to be dead.

@pmmueller

This comment has been minimized.

Copy link

commented Nov 15, 2018

Thank you for this very nice overview!

About "Media Queries in em only" - that seems to be more of a myth than a fact or an actual recommendation.

Way back there were zoom problems in browsers, but in the 2012 article you cite the author has added this to the article in 2015:

You should note that the zooming behavior has long since been made consistent in browsers (i.e. fixed). Keep that in mind if you cite or otherwise put stock in this post. I never meant to be absolutely prescriptive about ems as units—use whatever feels natural and appropriate for your design strategy.

In other words: Media Queries in px are no problem.

Also there is a question about this from Stephen Hay to Ethan Marcotte right at the beginning of the "Speaker Panel | CSS Day 2014": https://vimeo.com/102847187#t=30s

Ethan prefers MQs in em but thinks that "it's more stylistic" and that "pixels are just fine".

@cjblomqvist

This comment has been minimized.

Copy link

commented Mar 7, 2019

Thanks for the post, and thanks @pmmueller for adding your note about this!

@bn-l

This comment has been minimized.

Copy link

commented May 8, 2019

Why not use ch and ex frequently? They seem perfect for width and height

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.