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>
Related
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)
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.
Is there any method to create a css tag which increases the font size? Something like:
<style>
p {
font-size: 100%;
}
lrg {
font-size: +40%;
}
</style>
<p>Hi <lrg>Tom</lrg>!</p>
In the above example, the default text size is 100% but the text size of that inside the tag is 140% (100+40).
Is there any way to receive similar results??
You can use em units:
span {
font-size: 1.4em; /* 40% bigger than the parent */
}
<p>Hi <span>Tom</span>!</p>
The correct way to do is the following:
<style>
p {
font-size: 100%; /* This is actually redundant as it does not change the font size */
}
.lrg {
font-size: 140%; /* 40% increase */
}
</style>
Then use it like this:
<p>Hi <span class="lrg>Tom</span>!</p>
Think about it this way: the percentages multiply and setting a value above 100% increases the previously set font size, while setting a value below 100% decreases the previously set font size.
Same goes for using em units. Use a number above 1.0em to increase and number below 1.0em to decrease font size.
In addition to the other answers, consider using font-size: larger. However, you cannot randomly invent your own new HTML tags. That's what classes are for:
/* Define a CSS class that makes the font larger */
.lrg { font-size: larger; }
<!-- Use a span tag with the new class -->
<p>Hi <span class="lrg">Tom</span>!</p>
I would like to set up a responsive skin suing less. But I would like to use rems for mobile and px for desktop.
How do I do this?
Thanks
Since you are using less, you don't necessarily need to distinguish those, you can just use the fallback notation via a mixin:
// the size of your base element
#base-size: 16px;
div {
.font-size(18px);
}
.font-size(#size){
font-size: unit(#size,px);
font-size: unit(#size/#base-size,rem);
}
compiles to:
div {
font-size: 18px;
font-size: 1.125rem;
}
Im reading about optimal font sizing and layout sizing...and Im looking into em instead of px.
From what I understand, if I make the css like this;
html {
font-size: 16px;
}
body {
font-size: 1em;
}
It will force the browser to make 16px = 1em, and that will enable me to do width and height properties by calculating desired pixels/16, right?
Almost all browsers gave their default font size as 16px.
So if you simply set font-size:100% on your body tag then work from that you'll be golden.
Here's a good site that I use for calculating font-sizes from your base size:
http://riddle.pl/emcalc/
In the settings tabs simply change it to 16px and that's you set.
You are correct, and so is #Billy Moat.
You're not really gaining anything by explicitly declaring the 16px value on the HTML element - browsers tend to do that anyway.
Another trick that you can use is the "62.5%" trick.
If you declare:
body { font-size: 62.5% }
You can make further declarations in em's that map neatly to pixel measurements. e.g.:
h1 { font-size: 3em; /* equals 30px */ }
h2 { font-size: 2.4em; /* equals 24px */ }
.nav { width: 50.5em /* equals 505px */ }
That's because 10/16 = .625. So with this trick, you can rebase your measurements and not have to do the math later of dealing with a 16px base.
The only trick of this method is that once you declare a font size for an element, all children elements have to have their em values based on that parent's value (this is true of all relative units of measurement).