Phew, what a title, am I right? 😅

So…you want to build a website (or maybe, don’t want to, but NEED to)…and you’re starting to get your content inputted, but now are wondering what all these crazy abbreviations mean and how to size your content properly. WTF?!

Let’s break it down…

px

First off, the good ole-fashioned px, or pixels, used to be the gold standard for sizing anything and everything on the web. You’ve probably used px in Adobe programs, Microsoft Word, or the like, to set text sizes. It is still used occasionally, but for most use-cases, has been rendered obsolete by the following units of measurements below.

Pixels, or px, are not scalable, they are absolute units, and therefore not very useful in responsive web design.

em

An em, or element, is a reactive unit of measurement that will change depending on its parent or root element. Meaning, em will inherit its size from its parent element (i.e. a container, div, row, column, etc).

This is especially helpful to build a truly responsive website, as the size of certain elements will change depending on the size of the screen they’re being viewed on.

rem

An rem, or root element, is very, very similar to an em. However, it can make creating a hierarchy of typography styles a little easier.

For example, I could set something like:

:root {
  font-size: 30px;
}

Which is essentially saying, 1rem is now equal to 30px

So then, you can style a heading (h1) or paragraph (p) based on a percentage of this size. You can get really mathematical with the calculations if you want to, but I usually just eyeball it.

h1 {
font-size: 2rem;
}

p {
font-size: 0.5rem;
}

Hot tip: Both em and rem can be used even more precisely with decimal points, whereas px only works as an integer (non-decimal).

Kinda hurts the brain a little…maybe that’s what they wrote this song about? 🤔

%

%, or percentages, are also responsive units of measurement like em and rem, but are probably a lot easier to comprehend (and therefore use). They are sized based on a percentage of their parent element. Ultimately, it’s all up to your personal preference and experience level.

#custom-div {  
  background: url(photo.jpg);
  background-repeat: no-repeat;
  background-size: 50%;
}

vh / vw

vh and vw are also percentage-based measurements, but instead of being based on their parent element, they are based on the current screen size—which is also known as the “viewport” size. This responsively calculates the size of an element based on the user’s browser’s window size.

1vw = 1% of viewport width
1vh = 1% of viewport height

div {
width: 100vw;
height: 50vh;
}

This div will be 100% wide and 50% tall

TL;DR: These are my recommendations on how to use these units of measurement on your website:

• Use em or rem for things like: font-size, padding, margin
• Use % for width or height of containers, divs, or other large components
• Use vh and vw to size sections as a percentage of the screen size (for example, I use this a lot to force sections with background images to be full-screen (vh) and/or full-width (vw))
• Only use px for very minor things, for example: border-width

Cheatsheet:

• em: Relative to the parent element
• rem: Relative to the root element (HTML tag)
• %: Relative to the parent element
• vw: Relative to the viewport’s width
• vh: Relative to the viewport’s height

Now…go forth, and experiment!