Mikke.Learns

Relative CSS units in webdesign

January 31st, 2019

CSS has several different units for expressing a length. We can divide them into two main groups, relative and absolute. Relative units specify a length relative to other lengths, while absolute units are fixed lengths that always appears at exactly that size.

In this blog post, we will take a closer look at the relative units.

Relative

The length of relative units are all based on other length properties and are best suited for creating responsive and scalable designs.

  • em; relative to the font size of the element on which it’s used.

  • ex; relative to the x-height of the chosen font.

  • % (percent); relative to the parent element.

  • rem; relative to the font size defined on the root element.

  • ch; relative to the width of the “0” (zero) in the current font.

  • vw; relative to the viewport’s width.

  • vh; relative to the viewport’s height.

  • vmin; relative to the viewport’s width or height, whichever is smaller.

  • vmax: relative to the viewport’s width or height, whichever is bigger.

em

The em unit is relative to the font size of the element on which they are used. The root element doesn’t inherit anything tho, so 1em here is the default font size specified in the browser preferences, usually 16px.

<div class="parentDiv"> <p> <span></span> </p> </div> .parentDiv { font-size: 10px; } .parentDiv p { font-size: 4em; /* 40px */ } .parentDiv p span { font-size: 0.5em /* 20px */ }

em stands for emphemeral unit. It’s an old typographic unit known as “em square”. It was a blank square with all sides as long as the width of a capital “M” (hence the name em), normally the widest glyph in a font set.

In CSS on the other hand, em represents the width of a lower-case “m”.

em is a popular unit for building flexible and responsive layouts and designs since it scales proportionally. It’s a preferred choice when working with widths.

But be aware, the ems can get a bit messy due to inheritance. As mentioned, the em is relative to the font size of the current element, but the element can inherit values from any parent. So unless absolute units are used, there are a lot of values that can have an effect on your ems, and it can be difficult to locate it.

ex

This one was new to me. Where em represents the width of an “m”, ex represents the height of the lower-case letter “x”.

p { , font-family: Arial; font-size: 10ex; /* Equal to ten times the size of "x" in the chosen Arial font. */ line-height: 5ex }

relative-css-units

Percent

The percent value is always relative to another value, be it another property in the element itself or a parent. It’s commonly used for creating a fluid and responsive web pages as well as for widths and heights for divs and other containers and for scaling images.

rem (root em)

The rem unit is relative to the font-size defined on the root element, e.i. the HTML element. But remember that the HTML element inherits from the browser font size settings unless explicitly overridden by an absolute unit.

html { font-size: 1rem /* Equal to browser font size setting */ } .div { font-size: 1rem; /* Equal to HTML */ } We can stop inheritance from browser settings by using an absolute unit on the root element:

html { font-size: 20px } .parentDiv { font-size: 1rem; /* 20px */ } .parentDiv p { font-size: 2rem; /* 40px */ } .parentDiv p span { font-size: 0.5em /* 10px */ } ch According to https://drafts.csswg.org/css-values-3/#ch, ch is defined as:

Equal to the used advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it. (The advance measure of a glyph is its advance width or height, whichever is in the inline axis of the element.)

So unless you are using a monospaced font, a ch can vary greatly, depending on the font you are using. Here we can see the difference when setting 30ch using three different fonts (Monospace, Impact and Georgia):

relative-css-units-2

vw, vh, vmin and vmax

These are relative to the width and height of the current viewport, which in this case is the browser window. These units work great for typography when you want to size elements based on viewport and not a parent or root element.

Here is an element set to 50vw and 50vh. It takes up 50% of the viewport (browser window):

relative-css-units-3

One unit on any of the values is 1% of the viewport axis. If the viewport is 60cm wide, 1vw is equivalent to 0.6cm. 1vmin is equal to 1vw or 1vh, whichever is smaller, and 1vmax is equal to 1vw or 1vh, whichever is larger.

These viewport units are only supported in the newest browsers, so we should provide a fallback.

h1 { font-size: 40px; /* Fallback */ font-size: 5.4vw; }

What should I use?

There are a lot of opinions and discussions on how to best use these units. I think it’s great to have so many choices. It gives us a lot of opportunities and room for experimenting and being creative.

But from what I’ve learned, here are some tips:

  • You should not override the font-size the HTML-element inherits from the browser settings. This removes the user’s ability to optimize for best viewing.

  • Use rem or em if you want to change the font-size of the HTML-element.

  • Use em if you want the size to be relative to other values than the html font size. This allows for scalability within the context of a specific element.

  • ems can get messy due to inheritance.

  • rem, vh and vw are best choices for typography.

  • Use rem for anything that we want to scale in accordance to the root element, which is pretty much everything.

  • Use rem for media queries.

  • Use percent for multi column layout.

  • Many set their html font-size to 16px and their body font-size to 62.5%. That makes it possible to set ems or rems in increments of “1 REM=10px”.

  • Break the rules and experiment!

Absolute units

I will write about the absolute units in a later post, but for reference, here they are:

  • px; pixels (1px = 1/96th of 1in).

  • pc; picas (1pc = 12 pt).

  • pt; points (1pt = 1⁄72 of 1in).

  • in; inches (1in = 96px = 2.54cm).

  • cm; centimeters.

  • mm; millimeters.