CODEWITHSUNDEEP
css
Jeremy Thomas
Jeremy Thomas

Reputation: 6674

How to set base size for rem

I have a simple question, where do you declare the base size that rem is calculated from?

<body>
  <h1>Something</h1>
</body>

I can see that the font-size is <body> is set to 16px and the <h1> is set to 3rem, yet the font is rendering at 30px when I'd expect 48px. Can any parent redefine the base?

Upvotes: 100

Views: 118514

Answers (6)

Muhammad Azam
Muhammad Azam

Reputation: 254

Root element of page is html, we need to specify Size of this element as we need all other sizes will be in rem unit The default font size for the html element is 16px which will considered as 1rem.

SCSS based Example:

html {
  font-size: 16px; /* you can chose any size here 16 is default */
  @media screen and (max-width: 991px) {
    font-size: 62.5%;
  }
  @media screen and (max-width: 767px) {
    font-size: 50%;
  }
  @media screen and (max-width: 600px) {
    font-size: 45%;
  }
}

you can adjust percentage according to your use case

Upvotes: 0

championac
championac

Reputation: 21

Set the font size for the html element as follows. The default font size for the html element is 16px. rem base size is always set on the html element not body.

<html style="font-size:16px">
<body>
     <h1>Rem Sizing</h1>
</body>
</html>

Upvotes: 2

Erik van Velzen
Erik van Velzen

Reputation: 6972

To add a best practice to previous answers: root font size should be expressed as a percentage.

html {
    font-size: 110%;
}

This practice scales the font relative to the users system/browser settings. Your site will be consistently sized up/down compared to other websites. (assuming those websites also follow best practices).

Even more respectful to the user is to not touch the root font size at all so that they have a consistent reading experience across websites and can reliably use accessibility settings.

Upvotes: 10

CHALK100
CHALK100

Reputation: 175

Just set the font size for the html element:

html {
    font-size: 10px;
}

You are setting the root font size when you do this so the rem measurement will be influenced by this when setting a font size.

Upvotes: 6

TimoStaudinger
TimoStaudinger

Reputation: 42460

rem

Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).

Source

In other words, change the font size of your html element, and the calculation base for rem will change.

Example:

<html style="font-size: 10px">
...
</html>

Upvotes: 122

davethegr8
davethegr8

Reputation: 11595

rem units are based on the font-size of the html element, not the body element. The default size is usually 16px on html, however that's not guaranteed, and users can change that default value. A common practice is to manually set the font-size explicitly on html, usually to that 16px value, and then use rems in other places to set the final display value.

However, that practice has accessibility problems for when users want or need to increase the default font size, so you should design your pages and layouts so that they can adapt to different sizes.

From https://developer.mozilla.org/en-US/docs/Web/CSS/font-size:

rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

Upvotes: 29

Related Questions