Which CSS unit should I use?

You will learn some CSS units for customizing the font size of text when creating web pages. There are many units such as pt, pc, ex, but most of the time you should focus on the three most common units: px, em, and rem. Many developers usually don’t understand the difference between these units. So below is a detailed description of these units.

Before proceeding, note that there are two types of unit length. absolutely and Relative.

absolute length

Absolute length units are fixed, and a length represented by one of these will appear exactly as its size.

Screen sizes vary greatly, so we don’t recommend using absolute length units with screens. However, if you know the output medium, such as print layout, you can use it.

relative length

A relative length unit specifies a length relative to another length property. Relative length units scale well between different rendering media.

1.Px (pixel)

Pixels are probably the most used unit in CSS and are very popular for setting the font size of text on web pages. One pixel (1px) is defined as 1/96th of an inch on the print media.

However, computer screens generally have nothing to do with actual measurements such as centimeters or inches. They are only defined to be small but visible. What is considered displayed depends on the device.

Different devices have different pixels per inch on the screen. This is called pixel density. If you use the physical number of pixels on a device’s screen to determine the size of content on that device, it’s difficult to make it look the same on all screen sizes.

That’s where the device’s pixel ratio comes into play. It’s basically just a way to calculate how much space a CSS pixel (1 pixel) occupies on a device’s screen so that it looks the same size when compared to another device.

An example is shown below.

 <div class="container">
     <div>
       <h1>This is a paragraph</h1>
       <p>
         Lorem ipsum, dolor sit amet consectetur adipisicing elit.
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
         omnis at! Officiis praesentium officia, nemo veniam consequatur
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem
         vel ullam aut, quod corporis ratione atque ducimus dolorum.
       </p>
     </div>
   </div>
 

 .container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container div {
  max-width: 500px;
  padding: 5px 20px;
  border: 1px grey solid;
  border-radius: 10px;
}
p {
  font-size: 16px;
} 

output

The top box is what it looks like when viewed on a large screen such as a laptop, and the bottom box is what it looks like when viewed on a small screen such as a phone.

Notice that the text in both boxes is the same size. This is basically how pixels work. This ensures that web content (not just text) looks the same size across devices.

2. M (M)

The em unit got its name from the uppercase “M” (em), since most CSS units come from typography. Uses the parent element’s current font size as a base. Can be used to increase or decrease an element’s font size based on the font size inherited from its parent.

Let’s say you have a parent div with a font-size of 16px. If you create a paragraph element in that div and give it a font-size of 1em, the font-size of the paragraph will be 16px.

However, if you specify a font-size of 2em for another paragraph, it will be converted to 32px. Consider the following example.

    <div class="div-one">
      <p class="one-em">1 em based on 10px</p>
      <p class="two-em">2 em based on 10px</p>
  </div>
    <div class="div-two">
     <p class="one-em">1 em based on 10px</p>
     <p class="two-em">2 em based on 10px</p>
    </div>
   </div>
 

 .div-one {
  font-size: 15px;
}
.div-two {
  font-size: 20px;
}
.one-em {
  font-size: 1em;
}
.two-em {
  font-size: 2em;
} 

output

You can see how the em scales the size of the text and how the current font size inherited from the parent container affects it. Using em is not recommended, especially on pages with complex structures.

Improper use can lead to scaling issues where elements are not properly sized based on the complex inheritance of DOM tree sizes.

3. Rem (Root Em)

Rem works in much the same way as em, the main difference is that rem only refers to the font size of the root element of the page, not the font size of its parent. The root font-size is the default font-size specified by the user in the browser settings or by the developer.

The default font size for web browsers is usually 16px, so 1rem is 16px and 2rem is 32px. But if for example the root font-size is changed to 10px then: 1rem is 10px, 2rem is 20px.

Here’s an example for clarity:

    <div class="div-one">
     
     <p class="one-em">1 em based on container (40px)</p>
     <p class="two-em">2 em based on container (40px)</p>
     
     <p class="one-rem">1 rem based on root (16px)</p>
     <p class="two-rem">2 rem based on root (16px)</p>
   </div>
 

 .div-one {
  font-size: 40px;
}
.one-em {
  font-size: 1em;
}
.two-em {
  font-size: 2em;
}
.one-rem {
  font-size: 1rem;
}
.two-rem {
  font-size: 2rem;
}
 

output

As you can see, paragraphs defined in REM units are completely unaffected by the font size declared in the container and are rendered strictly relative to the root font size defined in the HTML element selector.

Px vs. Em vs. Rem: Who is the strongest unit?

Em is not recommended as it can have complex hierarchies of nested elements. REM will generally scale well with the new default/base font size specified in your browser settings as opposed to PX. This explains why you should use REM when working with textual content in web pages. REM wins the race. Using REM to improve content styling and scaling adds flair to your site as it is ideal for website authors. Proper measurement of your content will determine the look and feel of your website, but you have to be creative.