em unit is, and how it works in CSS.
As is the case with many topics I write about, I’ll probably learn a thing or two while writing this. So I hope this will serve as a nice summary of what em units are all about and how you can use them in your designs.
Ah-em — Definition Please
The spec gives us a very simple definition for the em unit:
Equal to the computed value of the ‘font-size’ property of the element on which it is used.
In other words, if you have the following CSS:
.element {
font-size: 20px;
}
Then this means 1em defined on that element, or any of its children, would be equal to 20px. Here’s proof.
So if you did this:
.element {
font-size: 20px;
width: 4em;
height: 4em;
}
Then that means that the width and height of the element (defined here as 4em x 4em) would compute to 80px x 80px (20px * 4 = 80px).
Let’s em-phasize This
The key to remembering this is based on what an actual “em” unit is, and where it comes from. According to Wikipedia’s article on em:
An em is a unit of measurement in the field of typography, equal to the currently specified point size. The name of em is related to M. Originally the unit was derived from the width of the capital “M” in the given typeface.
The article goes on to explain that although the em unit was originally based on the width of the letter “M”, this is no longer the case, and now the em unit generally refers to the point size of the font.
With this method of calculation, in a CSS file there is no strict definition for what an ‘em’ is; it all depends on what else is going on in your stylesheet. So theoretically, if you’ve declared a whole slew of length values using ems on various elements on your page, changing a single font size has the potential to throw your whole layout off.
What if “font-size” Isn’t em-ployed?
In the example above, and the JSBin I linked to, I’m explicitly defining a font-size. The em unit is subsequently derived from that ‘base’ setting. But what if the element doesn’t have a specified font size?
In that case, since the font-size property inherits through the document tree, the em unit’s value will be derived from whatever is actually inherited. If no font size is specified anywhere in the document, then the value of a single em unit will be equal to 16px, which is the default (and I believe that works the same in all browsers).
“rem” Should Be Automatic for the People
This is a good time to bring up CSS3′s new addition: the rem unit. The rem unit (or “root em” unit) has pretty good browser support: IE9+, FF3.6+, Chrome, Safari 5+, and Opera 11.6+.
From what I can see, the rem unit is pretty straightforward. It lets you base your em units on a ‘root’ unit defined on the <html> element. This way, you could go nuts with font-size settings in all sorts of places in your stylesheet, but any ‘ems’ you define would always be based on the root em unit from your root element (the <html> element).
And as is the case with em, if you don’t define a font-size value on the <html> element, then the root em unit will be the default 16px.
Carpe di-em
Sick of the puns yet? Well, too bad. :)
Having worked in the web design and development field for about 12 years now, it’s taken me a while to break free from fixed-width, pixel-based designs. Although I’ve started doing responsive layouts, I’m still hooked on pixel units. While this might be fine for layout elements, I think for typography, the em unit should be the go-to unit.
While it is possible to do an entire layout with just em units, I think for responsive layouts it’s probably best to use pixels or percentages — and, as mentioned, use ems for typography.
So if you’re like me, let’s seize the day — and start using the super intuitive ems and rems wherever it’s practical and sensible.
If You Can’t Beat em — Join em
Oh and if anyone comments on this article, you have to include an ‘em’ pun. :)
Source : http://www.impressivewebs.com/understanding-em-units-css
No comments:
Post a Comment