In this article, we will talk about REM, EM, and Px. What is and Why do we use rem units?
What is REM In CSS?
Rem (root em) stands for root element's font-size .
The font size/text size of the root element can be used to define REM. This means that 1rem means total the font size of the html element, which is set to 16px by default in most browsers. As a result, even if you don’t know what the default font size will be, rem units are useful for scaling CSS elements in relation to the size of the root element.
Why do we use rem units?
As previously stated, rem units denote the size of the root element. Because a user can change the default size of this element in their browser settings, the webpage can scale to match their preferences.
However, using absolute units such as pixels creating accessibility barriers. Pixels override the root font size of the document, so the user’s preferences are ignored. As a result, whenever possible, use rem units for any scalable elements.
Font Sizing with Rem Units.
The main disadvantage of using rem for font sizing is that the values are difficult to be using. Let’s look at some familiar font sizes expressed in rem units, assuming that the base size is 16px:
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
Syntax:
:root {
font-size : 1rem;
}
What is EM In css?
An em is a CSS unit that measures font size/text size from the top of the cap height to the bottom of the font’s lowest descender. The em was named because it was originally equal to the width of the capital letter M.
Note:- When EM units are used on the font-size property, the size is related to a parent’s font size. When used on other characteristics, it is related to the element’s font size.
The first statement uses the parent’s reference in this case.
Why we use EM?
The primary reason to use em or percentages is to permit the user to adjust the size of the text without causing the layout to break.
Font Sizing with em Units.
The font size for scalable text is expressed in em. One em is equal to 16px or 12pt by default. Its value is proportional to the font size of the parent element. Syntax
The syntax of the CSS font-size (em) property is as follows −
Syntax:
:root {
font-size : 1em;
}
What is PX in Css?
It has no connection with the current font and is rarely related to physical centimeters or inches. The px unit is designed to be small but visible, allowing a horizontal 1px wide line with sharp edges to be displayed (no anti-aliasing)
Why do we use px in css?
Because px attributes were the de-facto standard, the majority of CSS examples on the internet use them. In concept, pt, in, and a wide range of other units could be used, but they didn’t handle small values well, forcing you to resort to fragments, which took much longer to type and were more difficult to reason about. If you would want a thin border, you could use 1px with px, but withpt , you’d have to use 0.75pt for consistent results, which is inconvenient.
The syntax of the CSS font-size (px) property is as follows −
Syntax:
:root {
font-size : 20px;
}
| Unit | Type of Unit | Size Calculation | Use Case |
|---|---|---|---|
REM |
Relative | Based on the parent font size | Sizing elements relative to viewport, e.g. width, height |
EM |
Relative | Sizing elements relative to the parent, e.g. margin, padding | Sizing elements relative to the viewport, e.g. width, height |
PX |
Absolute | Fixed size | Sizing elements with fixed dimensions, e.g. font size, border |
_
Originally published at Simplified Dev on May 7, 2023.
_
Top comments (1)
Nice explanation Saurabh,
It is worth adding that if readers want to know more about font units they can find it at MDN, the authoritative site for web technology.
Kind regards, Tracy