You are going to learn a few CSS units for customizing the font-size of text when building web pages. There are many units such as pt, pc, ex, etc., but in most cases you should focus on the three most popular units: px, em, and rem. Many developers don't usually understand what the differences between these units are; so, below is a detailed explanation of these units.

Before proceeding, note that there are two types of unit lengths: absolute and relative.

Absolute Lengths

The absolute length units are fixed, and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for a printed layout.

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.

1. Px (Pixel)

Pixel is probably the most used unit in CSS and are very popular when it comes to setting the font-size of text on webpages. One pixel (1px) is defined as 1/96th of an inch in print media.

On computer screens however, they are not usually related to actual measurements like centimeters and inches like you may think; they are just defined to be small but visible. What is considered visible is dependent on the device.

Different devices have a different number of pixels per inch on their screens, which is known as pixel density. If you used the number of physical pixels on the screen of a device to determine the size of content on that device, you would have a problem making things look the same across screens of all sizes.

That's where device pixel ratio comes in. It's essentially just a way to calculate how much space a CSS pixel (1px) will take up on the device's screen that will enable it look the same size when compared to another device.

Below is an example:-

        <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 how it looks when displayed on a larger screen like a laptop, and the bottom box is how it looks when displayed on a smaller screen, like a phone.

Notice how the text in both boxes is of the same size, That's basically how the pixel works. It helps web content (not just text) look the same size across devices.

2. Em (M)

The em unit got its name from the uppercase letter 'M' (em) as most CSS units come from typography. It uses the current font-size of the parent element as its base. It can be used to scale up or scale down the font-size of an element based on the font-size inherited from the parent.

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

However, if you give another paragraph the font-size of 2em that will translate to 32px. Consider the example below:

           <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 em can scale up the size of text and how it is affected by the current font size inherited from the parent container. It's not advisable to use em, especially within complex structured pages.

If not used properly, you may run into scaling problems where elements might not be sized properly based on a complex inheritance of sizes in the DOM tree.

3. Rem (Root Em)

Rem works almost the same as em, but the main difference is that rem only references the font-size of the root element on the page rather than the parent's font-size. The root font-size is the default font-size specified either by the user in their browser settings or by you, the developer.

The default font-size of a web browser is usually 16px therefore 1rem will be 16px and 2rem will be 32px. However, in a case where the root font-size is changed to 10px for example; 1rem will be 10px and 2rem will be 20px.

Here is an example to make things clearer:

           <div class="div-one">
     <!-- EM -->
     <p class="one-em">1 em based on container (40px)</p>
     <p class="two-em">2 em based on container (40px)</p>
     <!-- REM -->
     <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, the paragraphs defined with REM units are completely undisturbed by the font size declared in our container and are strictly rendered relative to the root font size defined in the HTML element selector.

Px vs. Em vs. Rem: Which Unit Is the Best?

Em is not recommended due to the possibility of having a complex hierarchy of nested elements. REM is usually scaled appropriately with the new default/base font size specified in the browser settings as opposed to PX. This explains why you should be using REM when working with text content on your web pages. REM wins the race. Better styling and scaling your content with REM add flair to your site as it is ideal for website creators. On-point measurements of your content will dictate the look and feel of your website, however, you'll need to get creative.