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.
Related
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>
When I tried to use em units with media queries I noticed that the unit is based on browser's default font size, not on the html root.
It working odd when I'm gonna to set 20em for element width when breakpoint is min-width: 20em. Both units in this case ar not equal because the element's 20em is based on the html font-size and media query is based on the default browser font size.
Is there a way to achieve the same size for both using em unit without defining additional, separate variable only for breakpoints (#bp-size: 16.250em)?
html {
font-size: 0.813em; // 13px (assume default browser font-size: 16px)
}
.box {
width: 1em; // 13px x 13px
height: 1em;
background-color: #000;
// Problem
#size: 20em;
#media screen and (min-width: #size) { // 320px (20 x 16px) why not 260px?
width: #size; // 260px (20 x 13px)
background-color: #f00;
}
}
<div class="box"></div>
I asked this question not long after yours. I finally found the definitive answer from the html-gods buried deep in the Media Queries page.
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
It doesn't matter what you set in your html, media queries will always be set on the browsers initial font-size attribute.
This is very possible -- What you're looking for is rem rather than em:
#size: 20rem;
rem is relative to the root element, whereas em is relative to the current element. See W3 and TutsPlus for further information in this regard.
Hope this helps! :)
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>
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).