Sizing with ems and rems

Baba Umar — Fri, 24 Jan 2025 18:38:33 +0000

What is an em?

The word "em" originated from the letter M and an em is a measurement equal to the size of a capital M in pixels on a screen. This is by default 16x if a font-size isn't set. So 1em = 16px.

The em unit also defaults to the font-size of a parent element for children elements if the font-size isn't set.

Where do I use ems?

ems are a relative CSS measuring unit. Examples of other some other measuring units are :

"px" - pixels
"vw" - viewport width
"in" - inches

So you use it in places where you'll use length units such as for paddings, margins and font-sizes to name a few.

How it works

Let's take font sizing as an example use case. Say we have a text paragraph like below:

 <p> This is an example </p>

This looks like this in your browser:

Using pixels

By default, it has a size of 16px. We can increase this size by specifying a pixel value in the CSS.

p {
 font-size: 32px; /* double the current size (i.e 2 * 16px) */
}

Now it looks like this in your browser!

Now we have a bigger text

Using ems

We can achieve the same effect using em units. If we want to double the size like we did with pixels, we simply do:

p {
 font-size: 2em; /* double the current size (i.e 2 * 1em [16px]) */
}

We can still see the we have the same larger size text as in the pixel example.

If we want to reduce the size relative to the default font size we can do this:

p {
 font-size: 0.5em; /* half the current size */
}

This basically means:
0.5 * 16px(1em) = 8px

Hence the new size of the text is even smaller at 8px as seen below:

To see the ems in comparison. We can have three html elements with different em values as seen below:

HTML

  <p class= "one"> I am 0.5 em or 8px </p>
  <p class= "two"> I am 1em or 16px and the default font size on browsers </p>
  <p class= "three"> I am 2em or 32px which is double the size above me </p>

CSS

.one {
 font-size: 0.5em; 
}

.two {
 font-size: 1em; 
}

.three {
 font-size: 2em; 
}

This is displayed as:

Why do we use ems?

Two main examples are:

Accessibility: If a user is trying to zoom in to see larger text on screen, using ems allows the browser to seamlessly resize the text based on the zoom.
Flexible layouts: If you have a group of UI elements like a button input and maybe some text and you want to resize them all at once, paddings and margins included, setting an em value allows you to resize them from a single reference i.e the default em unit which is the font-size of the containing element (root or a parent element)

Dangers of em unit

ems can be computationally expensive because they are relative, especially when they are used in complex CSS math.
Compounding: So remember em units are relative to the root or parent font-size, if you set/change that value, the change is passed down to the children and they take the value from the nearest parent.

Let's take this example:

HTML

  <div class= "parent"> I am parent with size 1em or 16px
    <div class= "child"> I am child with size 2em or 32px 
      <div class= "grandchild"> I am grandchild with 3em or 96px because my parent is 32px!</div>
    </div>
  <div>

CSS

.parent {
 font-size:1em; 
}

.child {
 font-size: 2em; 
}

.grandchild {
 font-size: 3em; 
}

This is the compounding effect, and can lead to unwanted experiences as a user may think that the font size of the grandchild would be 3 * 16px = 48px

How do we prevent this? rem units

To prevent this, we have rem units which are relative to the root element.

What this means is that it an em will always be the HTML root element font-size of 16px, preventing compounding, this means the example above now looks like this

HTML

  <div class= "parent"> I am parent with size 1em or 16px
    <div class= "child"> I am child with size 2em or 32px 
      <div class= "grandchild"> I am grandchild with 3em or 48px because my parent is the root element 16px!</div>
    </div>
  <div>

CSS

.parent {
 font-size:1rem; 
}

.child {
 font-size: 2rem; 
}

.grandchild {
 font-size: 3rem; 
}

References

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems
W3Schools: https://www.w3schools.com/cssref/css_units.php
Youtube video: https://www.youtube.com/watch?v=dKvEwtqkVCs

How to use a loading animation in your Vue app

Baba Umar — Tue, 24 Aug 2021 02:35:34 +0000

Why do we need loading animations?

Loading animations simply allow us to notify the users of an ongoing process(e.g. data retrieval, validation etc.)

You can build your own using HTML and CSS here's the link to a W3schools tutorial or you can visit Loading.io to see a lot of cool designs.

How do we use loaders in Vue

In this article we will set up a simple loader to run when we try to retrieve data from an API. To get started:

1. Set up a Vue project
Requirements for Vue CLI:

Node
An open command line terminal on your computer

To get started:
Install the Vue CLI to easily create a new Vue project from your terminal:

Once it has been installed, enter the code below to create a new vue project:

To see how to setup a Vue CLI project, click here

2. Set up a simple Vue file
The basic Vue SFC(Single File Component) has three sections
<template></template> - This holds your HTML
<script></script> - This holds your Javascript
<style></style> - This holds your css

Here is a sample Vue file:

3. Set up the HTML container for the data

4. Set up the CSS and layout for the container
I've set up a simple flexbox with centered content:

5. Setting up data retrieval and loading animation
We can have a sample loading animation here:
This is done in the JavaScript section and we will be using NBA boxscores. Here's how we'll do it:

Create data object and set loading to true
Add a method to get data to the methods list
On created, fetch the data, append to the HTML component and set loading to false to disable loading animation

6. Finally reference the updated data in the HTML
All together now:

That's it! Now when you try to retrieve data from the endpoint, the loading animation will show first for better UX.

DEV Community: Baba Umar

Sizing with ems and rems

What is an em?

Where do I use ems?

How it works

Using pixels

Using ems

HTML

CSS

Why do we use ems?

Dangers of em unit

HTML

CSS

How do we prevent this? rem units

HTML

CSS

References

How to use a loading animation in your Vue app

Why do we need loading animations?

How do we use loaders in Vue