What's the correct way to set a base REM value in CSS?
yes that's right. You need to make your html font-size
to 16px
as your base font-size and then use rem
with the rest. Rem
sizes the element relative only to html
while em
sizes relatively to its nearest parent.
How to set base size for rem
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>
Setting the value of REM for all the properties in CSS
We've covered this in comments, but essentially the answer is to set the base font size to 10px rather than 62.5%.
html { font-size: 10px; }
Now, all your rem values work from 1rem = 10px. which mean your calculations actually got a lot simpler.
- 1.5rem = 15px
- 2rem = 20px
...and so on.
Now margin: 1rem
really does mean margin: 10px
.
Should I use px or rem value units in my CSS?
TL;DR: use px
.
The Facts
First, it's extremely important to know that per spec, the CSS
px
unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the
px
unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.That said, up until 2010 (and the mobile zoom situation notwithstanding), the
px
almost always did equal one physical pixel, because all widely available displays were around 96dpi.Sizes specified in
em
s are relative to the parent element. This leads to theem
's "compounding problem" where nested elements get progressively larger or smaller. For example:body { font-size:20px; }
div { font-size:0.5em; }Gives us:
<body> - 20px
<div> - 10px
<div> - 5px
<div> - 2.5px
<div> - 1.25pxThe CSS3
rem
, which is always relative only to the roothtml
element, is now supported on 99.67% of all browsers in use.
The Opinion
I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.
In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as em
s). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px
, they wouldn't scale when changing the browser's font size option.
Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.
Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody1 does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).
1 - within statistical error, naturally
If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)
One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.
So my answer is use pixel units. I use px
for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use em
s anyway.
Set Bootstrap 5 to custom REM font size
rem
units are based on the font-size of the html
element and the default size is 16px.
To achieve what you are doing, simple set the font-size: 10px
to html
. Example:
html { font-size: 10px; }
body { font-size: 1.6rem; } /* This will be 16px */
Now, doing it in Bootstrap 5 requires you to change the SCSS/CSS3 variable for body font-size. Below is an example of how to do it using CSS:
html { font-size: 10px; }
:root {
--bs-body-font-size: 1.6rem; /* Overwrite this variable */
font-size: var(--bs-body-font-size);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<p>This is 1.6rem or 16px.</p>
</body>
</html>
Setting root font-size not affecting rem units in Safari for margin, padding, etc
Maybe that's some trouble with Safari setting minimum font sizes. Safari does not allow fonts to be "too small", so I guess your scaling does not work as expected in Safari.
This was discussed here:
Media Queries issue: Safari not scaling elements in REM
Zurb F5: changing base-font-size and rem-base is confusing
According to the _settings.scss file 'If you want your base font-size to be different and not have it affect the grid breakpoints, set $rem-base to $base-font-size and make sure $base-font-size is a px value.'
So that's what I've done and the font size increases, but the grid stays the same (although you will need to move the $rem-base so it's AFTER the $base-font-size.)
So it goes from:
// This is the default html and body font-size for the base rem value.
$rem-base: 16px;
$base-font-size: 100%;
To:
// This is the default html and body font-size for the base rem value.
$base-font-size: 22px;
$rem-base: $base-font-size;
It's not something I've done before but hopefully it helps you!
Related Topics
How Reliable Is Double-Slash Comment in CSS
HTML 5 Autofocus Messes Up CSS Loading
Display HTML5 Error Message/Validation on Hidden Radio/Checkbox
How to Style The Drop-Down Suggestions When Using HTML5 <Datalist>
Child Div in Parent Div, Float:Left
How to Get Rid of White Spaces Between Spans Without Manipulating The HTML
Table Row Borders in HTML5 Without Gaps
Position Div Box at The End of After Ensuing Elements
How to Change CSS of Website If Accessed Through a Mobile Browser
Conditional CSS in CSS Not Working
Use CSS Variable with SCSS Darken and Ligthen Filter
How to Remove Unused CSS Using Webpack 4
CSS: Blue Border in Ie and Firefox Only
Yii2 - Detailview Widget Float Left