Css style

Which CSS unit should you 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, etc., but in most cases you should focus on the three most popular units: px, em, and rem. Many developers generally don’t understand what the differences between these units are; therefore, below is a detailed explanation of these units.


Before continuing, note that there are two types of length units: absolute and relative.


Absolute lengths

Absolute length units are fixed, and a length expressed in one of them will appear exactly as that size.

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

Unity The description
cm centimeters
millimeter millimeters
in inches (1in=96px=2.54cm)
px* pixels (1px = 1/96th of 1in)
pt dots (1pt = 1/72 of 1in)
pc picas (1pc = 12pt)

Relative lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different render media.

Unity Related to
em* Relative to the element’s font size (2em means 2 times the current font size)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the “0” (zero)
rem* Relative to root element font size
vw Relative to 1% of viewport width*
vh Relative to 1% of viewport height*
vmin Relative to 1% of smallest viewport dimension*
vmax Relative to 1% of largest viewport dimension*
% Relative to parent element

1.Px(pixel)

The pixel is probably the most used unit in CSS and is very popular when it comes to defining the font size of text on web pages. A pixel (1px) is defined as 1/96th of an inch in print media.

On computer screens, however, they are usually not tied to actual measurements like centimeters and inches as you might think; they are simply defined as being small but visible. What is considered visible depends on the device.

Different devices have a different number of pixels per inch on their screens, which is called pixel density. If you used the number of physical pixels on a device’s screen to determine the size of content on that device, you’d be hard-pressed to make things look the same on screens of all sizes.

This is where the pixel ratio of the device comes in. It’s basically a way to calculate how much space a CSS pixel (1px) will take up on the device’s screen, making it 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;
}

production

The top box shows how it looks when viewed on a larger screen like a laptop, and the bottom box shows how it looks when viewed on a smaller screen, like a phone.

Notice how the text in both boxes is the same size, that’s basically how the pixel works. This helps web content (not just text) to look the same size on all devices.

2. Em (M)

The em unit gets its name from the capital letter ‘M’ (em) because most CSS units come from typography. It uses the parent element’s current font size as a base. It can be used to increase or decrease 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 16 pixels. If you create a paragraph element in this div and give it a font size of 1em, the font size of the paragraph will be 16 pixels.

However, if you give another paragraph the font size of 2em, it will result in 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;
}

production

You can see how em can increase the text size and how it is affected by the current font size inherited from the parent container. It is not advisable to use them, especially in complex structured pages.

If used incorrectly, you may experience scaling issues where elements may not scale correctly 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 refers to the font size of the root element on the page rather than the font size of the parent. The root font size is the default font size specified either by the user in their browser settings or by you, the developer.

A web browser’s default font size is usually 16px, so 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 clarify things:

   <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;
}

production

As you can see, paragraphs defined with REM units are completely unaffected 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 better?

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 browser settings, as opposed to PX. This explains why you should use REM when working with textual content on your web pages. REM wins the race. Better styling and scaling your content with REM adds flair to your site as it is ideal for website builders. Point-in-time measurements of your content will dictate how your website looks, but you’ll need to get creative.