Musings

I understand that the overall goal is to stay responsive, but what is the purpose of avoiding pixels?

The purpose of avoiding any absolutely¹ sized units like px (includes in, mm, and cm) is to allow our content to be as responsive as possible with the least amount of work. Absolutely sized units are only one type of unit. In this post I’ll go into more detail about the others.

Font-relative units

As j6m8 covered in depth already (see bottom of this post) we can size things based on the font size. This includes relative to the current font size (em, ex²), relative to the root font size (rem), and absolutely sized based on the font (pt, pc). Since the most common and useful of these have already been covered, I recommend to read this article to find out more about ems and I’ll skip ahead to the next type.

Viewport-relative units

These units are relative to the viewport – meaning the size of the window that the element is being rendered in. They include vw (viewport width), vh (viewport height), vmax (the max of vh or vw), and vmin (the min of vw and vh).

They are sized by using a percent of the viewport. For example 1vw is equivalent to 1% of the viewport’s width. This is the same regardless of how nested the element is. In other words it ignores the size of its parent(s).

Relative to the parent

The % unit is relative to the element’s parent, given it’s in the same stacking context³. This means that if a parent has width:500px and the child has width:50%, the child’s width will be equivalent to width:250px.

As always, you should check the support of the units that you’re using, but most all of these are supported

One of the common “gotchas” of using ems, exs, and % for fonts is that they stack on each other, meaning that they are relative to their parent’s font size.

For more reading, you can take a look at the W3 spec or CSS Tricks article on the subject.

So what’s the purpose?

Well, as I stated earlier, the purpose is to make our content as responsive as possible with the least amount of effort on our part. By having multiple unit types, it gives us more freedom to create layouts and size our elements the way that we want to. This will save us time and effort.

Instead of sizing our elements absolutely, requiring several media queries to resize them in order to be responsive, we can more often than not use a relative unit to reduce the need of media queries. This way our page can resize based on the current context of the page and parent’s properties, requiring less work to make our elements fit nicely on the page.

Using relative units also allows us to make changes to the content more easily in the future. Instead of having to rethink all of our layout because a new element is slightly larger than the previous, we can let our sizing and positioning be more malleable. This give us more breathing room as to what’s acceptable. Having relative sizing also goes hand in hand with how we position our elements which is for another post.

em units are responsive by design.

What is an em?

The term ‘em’ comes from old typographical calculations, where ‘em’ actually refers to the letter M. One ’M’ unit was once the width of the uppercase letter M, which was, at least on early printing presses, the same size width-wise as it was height-wise. A useful byproduct of this was that typographers could equate 1em to the same measurements as the point-size; that is, 12pt fonts were 12pt tall, and so 1em = 12pt.^Wikipedia. This came in handy for other typographical marks, like the em-dash (or M-dash), [—], which is one em wide (the same width as an M) or an M-space (guess how big it is.)

(Nowadays, fonts vary so dramatically that M is rarely 1em wide or tall; but that’s another discussion^(Co.Design) altogether.)

So why is it useful?

Web design actually has two units based on the em unit; one called em (which is, go figure, one em) and one called rem, which stands for ‘root-em’ and really means, ‘the font-size of the root element’. These are incredibly useful for responsive web-design, and we’re about to see why.

Different browsers have different root-font-sizes. On your computer screen, your 12-pt type is quite considerably larger than it would appear on your phone; this is because ‘pts’, at least in web-design, are a somewhat arbitrary measurement (they’re not really; 72pt = 1in, but few displays actually adhere to that rule).

However, this means that each display will know what size to make something in order to keep it legible; 6pt on a monitor is obnoxiously small — on a phone, it’s virtually invisible. If you rely on the root-em, then, everything will be scaled appropriately.

Here’s a quick example of this: Let’s say you have a button that has the text “Submit” and a ✓. If you set the check-icon’s size to 20px, it may be the same size as your 12pt text on your computer, but your phone’s browser may display differently, and you’ll wind up with a mismatched icon.

By setting the icon’s height to 1em, you can be sure that no matter what the display or browser, your icon will always be the same height as a line of text.