How to set base size for rem

Question

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?

`rem` is relative to the root element, which is the `html` element — sol, Jan 25 '18 at 20:56

score 106 · Accepted Answer · edited Oct 21 '21 at 16:34

106

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>

edited Oct 21 '21 at 16:34

Eugen Konkov

22,193
17
108
158

answered Jan 25 '18 at 20:57

TimoStaudinger

41,396
16
88
94

2

Is there any way to override it? I understand that kind of defeats the purpose, but a bunch of other elements will be screwed up if I change that. – Jeremy Thomas Jan 25 '18 at 20:58
1

You can use `em` instead, which relates to the font size of the parent element. – TimoStaudinger Jan 25 '18 at 20:59
4

"Override that"...um, that's what setting font-size on `html` is doing... – Kevin Jantzer Jan 25 '18 at 20:59
1

Depending on the browser you might get different results. For example, i am using FF on a mac, 3rem computes to 52.8px when the base is 16px – Huangism Jan 25 '18 at 21:00
Maybe you can do it using some js? – Alex78191 Oct 28 '21 at 08:51

score 26 · Answer 2 · answered Jan 25 '18 at 21:00

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.

score 4 · Answer 3 · edited Feb 07 '23 at 13:30

4

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.

edited Feb 07 '23 at 13:30

Lee Goddard

10,680
4
46
63

answered Jul 22 '22 at 07:21

CHALK100

135
1
7

You are setting the root font size when you do this so the rem mesurement will be influenced by this when setting a font size – CHALK100 Jul 23 '22 at 00:21
1

That's the kind of thing you should put in your answer. – General Grievance Jul 25 '22 at 15:29
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32307582) – Akshay Jul 29 '22 at 06:07

score 3 · Answer 4 · answered Feb 11 '23 at 10:16

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.

score 1 · Answer 5 · edited Jun 07 '23 at 02:21

1

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>

edited Jun 07 '23 at 02:21

Darren Griffith

3,290
3
28
35

answered Jun 06 '23 at 18:20

championac

11
1

Great formatting for a first post! – Darren Griffith Jun 07 '23 at 02:15

How to set base size for rem

5 Answers5

Linked