What are Rem units? (and how to use them in CSS) (2023)

Of the many HTML styling options that CSS allows, font size is a crucial property—especially when it comes to display responsiveness. Also, there are several ways to dictate the font sizeCSS🇧🇷 Of these, Rem units prove to be exceptionally flexible and relatively intuitive.

What are Rem units? (and how to use them in CSS) (1)

Rem units (short for "root-em") determine the font size of an element relative to the size of the root element. By default, most browsers use a font size of 16 pixels. So if the root element is 16px, an element with value1 Dingwill also be equal to 16px. Therefore, REM units are useful for resizing CSS elements relative to the root element size - even if you don't know what the default font size will be.

In this article, we'll look at what Rem units are and how to use them effectively for your styling needs.

What is CSS?

What are Rem units? (and how to use them in CSS) (3)

With responsive websites, the size of the web elements changes with the size of the viewport. With CSS, you can declare font size using absolute units like pixels (px) or relative units like percentages, em or rem units.

Because pixels are absolute units, they are not scaled with the viewport. So 1px represents a unit on a physical device, regardless of the device size. Therefore, it is often easier to create responsive websites if you use a relative unit such as percent, em, or rem.

Percentages are relative to a parent element or a property of that element. They are commonly used to set the width and height of an element.

Em units are specifically relative to the parent, allowing an element to be scaled in the context of its parent. consider aptag nested in aArticleElement with a font size of 18px:

 
.article {

Font size: 18px;

}

p {

font size: 2em;

/* sets the font size = 36px */

}

assignment ofpelement has a font size of2emthere is a real size of 36px - double thatArticleElement Which.

What is Rem CSS?

Similar to em units, rems are relative units. However, they refer to the root element - usually theHTMLElement itself. Most browsers set the default font size to 16 pixels. However, you can change that. For example, to change the font size to 14 pixels, add the following to your style sheet:

 
html {

Font size: 14px

}

After adjusting the size ofHTMLelement you can specify the sizes of all other elements with rem units as a percentage of that size (expressed as a decimal).

What are Rem units? (and how to use them in CSS) (4)

For example, assuming the root object's default font size is 16 pixels, you would format a paragraph with a font size of 12 pixels0,75 Restweil 12 ÷ 16 = 0,75:

 
p {

Font size: 0.75 rem;

}

Doing these calculations every time you want to convert a rem unit to pixels can quickly become frustrating. Consider the following values, obtained by converting 14px, 18px, and 20px to rem units:

(Video) Learn CSS Units In 8 Minutes

  • 14px = 0.875rem
  • 18px = 1.125rem
  • 20px = 1.25rem

These values ​​aren't easy to remember, and you may have to fish out your calculator more times than you'd like to confirm them.

Fortunately, the 62.5% trick aims to solve these problems. In general, when the root font size is set to 62.5% of the default, the reference value becomes 10 pixels, making the above values ​​1.4 rem, 1.8 rem, and 2.0 rem, respectively.

But why set the root font size to 62.5% instead of 10 pixels?

One of the main advantages of relative units is their scalability, regardless of the physical screen size. Changing the root value with an absolute unit means the content is difficult to read or navigate. The 62.5% trick ensures that developers can easily scale the values ​​without having to worry about the type of device the content is being viewed on.

Implementing the 62.5% trick in your CSS would look like this:

 
html {

Font size: 62.5%;

/* change a default font size from 16px to 10px */

}

h1 {

Font size: 2.4 rem;

/* font size = 24px */

}

h2 {

Font size: 1.6 rem;

/* font size = 16px */

}

p {

Font size: 1.2 rem;

/* font size = 12px */

}

As you can see, calculating rem units with a 10 pixel basis makes things easier. However, there is a chance that the 62.5% cheat will increase your workload. If your body needs to be 12px in size, you will end up having to set most of your module or element font sizes to 12px. In this scenario, you could set the body size to 12 pixels. So keep that in mind when using this trick.

Using Rem in media queries

Ömedia query specificationstates that media queries are (almost) always independent of an internal style in the document.

Therefore, the rem units used in media queries depend on the browser's default size or the custom size in the browser settings - not the size specified in the style sheet.

(Video) Simple Explanation Of rem & em CSS Units

This means that the 62.5% trick doesn't work on the media query block and 1 rem in it is equal to 16 pixels or the value provided by a user.

See this example with a media breakpoint of32St:

 
html {

Font size: 62.5%;

/* Font size: 10px */

}

h1 {

Font size: 2.4 rem;

/* Font size: 24px */

}

@media(width <= 32rem) {

h1 {

font size: 2rem;

}

}

The breakpoint here is not 32×10px = 320px, but 32×16px = 512px.

Why should you use Rem units?

As already mentioned, rem units refer to the size of the root element. Because a user can set the default size for this element in the browser settings, the size of the web page can be adjusted to the user's preference.

However, using absolute units like pixels creates accessibility barriers. The pixels override the document's root font size, which means user preferences are ignored. Therefore, use Rem units for all scalable items whenever possible.

Rem units vs percents

Typically, percentages are best used to define element widths because they provide a more flexible solution than Rem units. This is especially true in a multi-column layout. Setting column widths to percentages ensures that they are always scaled according to the viewport size.

For example, in a two-column layout, you can use percentages to subdivide the container:

 
.coluna1 {

Width: 75%;

}

.coluna2 {

Width: 25%;

}

This allows columns to be resized proportionally to the size of the viewport.

Rem vs. I united

While rem units are relative to the root element, em is relative to the parent element.

(Video) Em & Rem in 3 Minutes

To illustrate how it works, consider the parent and child font sizes shown below. The size of the parent is in pixels and the size of the child is in units.

 
.pai {

Font size: 18px;

}

.Sohn {

font size: 2em;

/* Font size: 36px */

}

The child's actual font size is 2 × 18px = 32px.

If the parent element has no defined font size, em checks the next parent element in the DOM tree - all the way down to the root element - until it finds an entity to reference.

When em is used in metrics other than font size, its value is derived from the font size of that element. Here is an example ofh1Using nested em units in adivElement:

 
div {

Font size: 12px;

}

h1 {

font size: 2em;

Padding: 1.5 inches;

}

here theh1The font size is 24px (2×12px). From this value, the padding value is calculated as 1.5 × 24px = 36px.

The problem with em is that the font size increases when you nest elements.

Check out this example of a CSS style nested list:

 
<Style>

div {

Font size: 15px

}

I {

Font size: 2em

}

</style>

(Video) CSS em and rem explained #CSS #responsive

<body>

<div>

<ul>

<li>Drink (30px)

<ul>

<li>Tee (60px)

<ul>

<li>Chá preto (120px)</li>

<li>Grüner Tee (120px</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

When using em units in this way, the font sizes of the list items are compounded and increased with each nested level:

What are Rem units? (and how to use them in CSS) (5)With rem units you can avoid this effect because the font size of all elements in the document is derived from the font size of the HTML element.

Em units are useful when the size of a child element needs to be proportional to the parent element. In general, if you use em units, they are better suited for elements with a non-standard font size.

For example, when formatting a navigation component, you want its padding, margin, width, and height elements to scale with it. You can use em units in these properties and rem units for font size.

Using Rem, Em and Percentages in CSS

Rem units allow you to define sizes relative to the root element. As such, they differ from other size alternatives in units—which depend on a parent—or percentages, whose actual values ​​depend on the property they're used on.

When designing accessible websites, you should avoid pixel scaling of text elements. Due to their absolute character, they are not scalable. Instead, opt for rems, ems, and percentages. Use rem units to create elements to be scaled depending on user preferences and em units for elements to be scaled depending on their parents. To create fluid layouts, use percentages.

Of course there are exceptions to every rule. Use trial and error and your best judgment and prioritize scalability and accessibility in your web design.

Subjects:

FAQs

How to use REM and em in CSS? ›

em is a CSS unit relative to the font size of the parent element, while rem is a CSS unit relative to the font size of an html element. Both of these are scalable units, meaning they give us the ability to scale elements up and down, relative to a set value.

How to set 1 rem to 10px in CSS? ›

In order to easily use rem, we can modify 1rem to be equal to 10px and then make the following computations: X / 100 * 16px = 10px => X = 62.5 => if we want 1rem to be equal to 10px, then we have to set the font-size on our site to be 62.5% of the default font-size.

What is 1.5 rem in CSS? ›

16px = 1rem (base) 18px = 1.125rem. 20px = 1.25rem. 24px = 1.5rem.

What is 0.5 Rem font size? ›

Responsive Font Sizing with rem

1rem = 16px. 1.5rem = 24px. 0.5rem = 8px.

Should I use REM or em for font size? ›

EM is relative to the parent element's font size, so if you wish to scale the element's size based on its parent's size, use EM. REM is relative to the root (HTML) font size, so if you wish to scale the element's size based on the root size, no matter what the parent size is, use REM.

How do I use REM instead of px? ›

1 rem = 16 pixels.

So all you have to do is divide the units of your design in pixels by 16.

How to convert px to rem in CSS? ›

For example, using a px value divided by the base, we can have a px percentage converted to rem by multiplying to 1rem. So in the case of --r24 , it stores the value of 24 divided by --base (16) , then we convert to rem * 1rem . Now we can refer to --r24 as a "relative" pixel representing 24px in Rem.

Should I use REM or px CSS? ›

When choosing between pixels and rems in CSS, you should almost always use rems. It's a simple rule to follow. This article explains why. CSS has a lot of different units that you can choose from.

What is 1rem equal to? ›

rem values are relative to the root html element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).

Should I use REM for padding? ›

Try to always use rem for font-size. And utilize the benefit of em for the proportionate padding if you need to.

How do you calculate REM size? ›

To calculate REM, divide the expected font size output by the default font size. For most browsers, the default font size is 16px.

What is 2 rem font-size in CSS? ›

2rem will always be equal to 36px , no matter where you use in your CSS.

What is 1.2 rem in font-size? ›

font-size units
wordspxrem
large18px1.2rem 1.3rem
x-large24px1.4rem 1.5rem 1.6rem
xx-large32px2.0rem
6 more rows

What is 4 rem in CSS? ›

For the height of the p tag, rem refers to the font-size of the root element. So height: 4rem on the p tag will be interpreted as 4 times 18px which is 72px.

What font size is best for eyes? ›

Adjust text size and contrast - Text should be three times the smallest size you can read from a normal viewing position, which is about 20-30 inches from your monitor. As for contrast, black print on a white background is usually the best combination for comfortable reading.

Is font size 7 too small? ›

A minimum text size of 2.5mm (x-height 1.2mm) or 7 point is the smallest size that most people (and regulators) are likely to consider readable.

Does REM scale with screen size? ›

What's the point? Using rem in all units of your CSS allows you to increase the size of your page (either by layout change or screen size) by simply increasing or decreasing the font-size in the html element.

Is bigger font better for eyes? ›

The larger font size is easier to read and produces far less eye strain.

What is 1 rem in px? ›

rem is a relative unit related to the root font sizes(the r in rem rem actually stands for root). So most of the time 1rem = 16px , however, if the root font-size was changed (remember this could be done by the users or the developer) e.g. to 24px then 1rem = 24px.

What is the best font size unit CSS? ›

Using em Units

A more suitable CSS unit for font sizes is the em. The em is a scalable unit, 1em is equal to the current font size; so if the parent's font size is 16px, 1em is 16px and 2em is 32px. The important thing to remember is that the em unit is relative to its parent.

Should we always use REM? ›

Using REM (or another relative length value) for font-size is a must for accessibility, because px in some browsers doesn't resize when the browser settings are changed. Some people, for example, need to zoom maybe up to 400% to be able to read your text, due to a visual impairment.

Should I use px or REM 2022? ›

The truth is, if you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible.

What is 1.6 rem in pixels? ›

That would still make 1.6rem = 16px. This now means that if the user's default browser font-size is changed to, for example, 20px, 1.6rem would now equal 20px.

How many REM is 20px? ›

px to rem conversion if :root font-size is 16px
10px0.625rem
20px1.25rem
21px1.3125rem
22px1.375rem
23px1.4375rem
50 more rows
Jan 27, 2014

How many REM is 1px? ›

So if we take the default size as an example, than 1px represents 0.0625rem and, in the other direction, 1rem represents 16px .

What is rem in CSS example? ›

To recap, the rem unit means "The root element's font-size" (rem stands for "root em"). The <li> elements inside the <ul> with a class of rems take their sizing from the root element ( <html> ). This means that each successive level of nesting does not keep getting larger.

What is REM unit based on? ›

The rem unit, short for root em is a relative unit that'll always be based upon the font-size value of the root element, which is the <html> element. And if the <html> element doesn't have a specified font-size, the browser default of 16px is used.

What Is REM in unit? ›

rem, unit of radiation dosage (such as from X rays) applied to humans. Derived from the phrase Roentgen equivalent man, the rem is now defined as the dosage in rads that will cause the same amount of biological injury as one rad of X rays or gamma rays.

Should I use REM for images? ›

It's a better practice to use rem instead of pixels if you want a responsive website. This is because pixel is an absolute unit while rem is a unit relative to your root's font-size. Imagine that you have all your elements in pixels and want to scale everything when your window is smaller.

How much REM is enough? ›

For healthy adults, spending 20-25% of your time asleep in the REM stage is a good goal. If you get 7-8 hours of sleep, around 90 minutes of that should be REM.

What percentage should be REM? ›

REM sleep comprises about 20 to 25 percent of total sleep in typical healthy adults. NREM sleep and REM sleep continue to alternate through the night in a cyclical fashion.

What if my REM is high? ›

Getting an unusually large amount of REM sleep in a given night is often an indication that you are sleep deprived. Your body routinely gets most of its REM sleep later in the night, during the final hours that you are asleep.

Is REM font size responsive? ›

Use REM Values to Create Responsive Websites

You can quickly create a responsive page in a modern browser with REM values, meaning you can do media queries with REM. With REM, you don't have to write tons of media queries either, worry about zoom functions, higher pixel density, or screen size.

Is REM the same as px? ›

Pixels are an absolute unit, so when you set the font size to 24 pixels, it's going to be 24 pixels. Rems, on the other hand, are relative units that are based on the document's font-size. The document's default font size is 16 pixels, so 1.5rems x 16px is the equivalent of 24 pixels.

How to convert 4 rem to px? ›

64px / 16px = 4rem

To convert rem value into px multiply this value by 16.

What does 2rem mean in CSS? ›

The font-size of this div element is 2rem, which translates to 2 x the browser's font size.

Why do we use REM instead of px? ›

Using REM (or another relative length value) for font-size is a must for accessibility, because px in some browsers doesn't resize when the browser settings are changed. Some people, for example, need to zoom maybe up to 400% to be able to read your text, due to a visual impairment.

Should I use REM for width and height? ›

By default, body text size for websites is 16 pixels, whereas Medium uses a size of 21 pixels for better legibility, which is why they keep it constant by px. Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

Should I always use REM? ›

Always use REM for font-size to be consistent.

Videos

1. px vs rem: what to use for font-size in your CSS
(Coder Coder)
2. Are you using the right CSS units?
(Kevin Powell)
3. Correct way to use em / rem css units
(codeOnline)
4. Stop using pixels in your CSS! How and why to use REM and EM.
(Ian Lenehan)
5. The Difference Between Rem Em and Px CSS | When to use which? (Understanding PX Em Rem Elementor)
(Tristan Parker)
6. CSS Units of Measurement [rem, em, vw, vh, px, %]
(codeSTACKr)

References

Top Articles
Latest Posts
Article information

Author: Arielle Torp

Last Updated: 09/12/2023

Views: 6487

Rating: 4 / 5 (61 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Arielle Torp

Birthday: 1997-09-20

Address: 87313 Erdman Vista, North Dustinborough, WA 37563

Phone: +97216742823598

Job: Central Technology Officer

Hobby: Taekwondo, Macrame, Foreign language learning, Kite flying, Cooking, Skiing, Computer programming

Introduction: My name is Arielle Torp, I am a comfortable, kind, zealous, lovely, jolly, colorful, adventurous person who loves writing and wants to share my knowledge and understanding with you.