I have an issue with CSS rem font-size. Here is my code (check on codepen):
body {
font-size: 14px;
}
h1 {
font-size: 2.57rem;
}
<h1>Rem Test</h1>
Rem definition tells that h1 font-size must be between 35px and 36px, but it's actual font-size is 41.2px. And for 36px I must put 2.3rem Could you please help me with this issue? What am I doing wrong?
Because rem (root em) goes from the root element, which is <html>
See the following:
html {
font-size: 14px;
}
h1 {
font-size: 2.57rem;
}
<h1>Rem Test</h1>
There is also a pseudo element called :root which you could use instead (should work in any major browser)
Related
I'm currently setting my font-sizes like this to make it easier with calculations in REM values:
html { font-size: 62.5%; }
body { font-size: 1.6rem; } /* 16px */
However, Bootstrap 5 of course uses the root value (which would be 62.5%) to calculate all of the sizes. It does have variables like $font-size-root and $font-size-base and tried to play with those trying to get it to properly calculate things.
First I tried setting the root to the HTML value and the base to the body value, but that caused the wrong calculations and setting either the base or the root to 1.6rem or 1rem also caused the wrong output.
Does anyone know if it's possible to configure Bootstrap 5 to make it output a value matching with 32px (computed style) when I set this for example:
$h1-font-size: 3.2rem;
That way I could simplify the calculations a lot and Bootstrap would work with the same calculations as the rest of the CSS.
Thanks in advance for the suggestions! I tried a few searches here but couldn't find much related questions sadly
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>
I am using Sapper to create a web app and want to use relative font sizes.
I have set fixed font sizes for different media queries on the body element. Then I want to use rem units for the font-size in subsequent text elements of Svelte components to adjust the font-size to the viewport.
HTML (Svelte component)
<h1>Title</h1>
CSS (of the Svelte component)
h1 {
font-size: 2rem;
}
Global CSS of Sapper
body {
font-size: 12 px;
}
#media (min-width: 600px ) {
body {
font-size: 15px;
}
}
I would expect that the local component CSS is able to read the font-size on the global body element and therefore adjust the font-size in h1 to the viewport size. However, no action is seen. In contrast, using em units works fine.
For Svelte to not remove unused CSS selectors you can use the :global modifier.
To change the font size used by rem values you should style html, not body.
Example (REPL)
<h1>Hello!</h1>
<style>
:global(html) {
font-size: 12px;
}
#media (min-width: 600px) {
:global(html) {
font-size: 15px;
}
}
h1 {
font-size: 2rem;
}
</style>
Sorry, I'm a little unsure of this.
I want my base to be 16px. But all the resources I read about rem use percentages, eg:
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
If I want all my rem sizes to be relative to 16px, do I just make html { font-size: 16px; }?
Why use percentages?
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.
I was reading about rem units in CSS3, and was a little confused. If you use rem, do you still use em or does that replace it?
For example:
.selector {
margin-bottom:24px;
margin-bottom:2.4rem;
font-size:16px;
font-size:1.6rem;
}
or
.selector {
margin-bottom:24px;
margin-bottom:2.4em;
margin-bottom:2.4rem;
}
Just trying to figure out if rem takes the place of em, or if it's just another unit.
Rem is the em size for the root (html) element. That means once you define the html element's font-size, you can define all rem units relative to that.
For example:
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
Rem is supported in Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer, but for older browsers you still have to use em, percent or px.
No, it’s a different unit. em is based on the font-size of the parent, while rem is based on the root font-size, which I believe is the font-size of the html element.
Rem is just one more unit, it doesn't replace em like em didn't replace pixel.
Oldish topic, but I think it needs some more clarity.
Both em and rem are relative units, but rem is always relative to the html font size (the “root” element) rather than the inherited font size.
Never use px, or pt for that matter, on the screen. By hard coding the font size, you ignore the user’s personal preferred font settings and make zooming less cooperative.
Both em and rem have a useful role to play. Neither is perfect for all occasions. Here are some examples:
Use rem to avoid compounding sizing:
ul#something li { font-size: 1.2rem; }
… or …
ul#something li { font-size: 1.2rem; }
The first one will result in nested lists having progressively larger sizes, since the em unit will inherit from a parent li element.
Use rem to set sizes independently:
article { font-size: .8rem; } /* article base font size */
article>h2 { font-size: 2rem; } /* … except for h2 */
And, of course you can use both:
div#something { font-size: 1.2rem; } /* based on html size */
div#something>h2 { font-size: 2em; } /* based on div#something */
Two years down the track, now, and we can use it, safely ignoring Legacy Browsers.
I noticed that some stylesheets have something like this:
body { font-size: 62.5%/1.2em; }
I got a warning "unexpected token /" when I wrote this in NetBeans. And if I changed the EM value, say,
body { font-size: 62.5%/1em; }
the computed font-size remained 16px.
My question is, Is it standard compliant to write something like that? And how to computed the actual font-size?
In CSS2, the font-size property does not allow a value of the form x/y.
What you're using is the font short hand property, which allows x/y as a short-hand of font-size: x; line-height: y;. So either use
body { font: 62.5%/1.2em sans-serif; }
/* ^^^^^^^^^^ the font-family is needed. */
or
body {
font-size: 62.5%;
line-height: 1.2em;
}