Can anyone nicely explain what em is as a sizing unit of CSS?
And when we use em as a size unit for a website, why use % for the body? Why not use em too for the body?
The best way to find out what it is, is to look at the CSS standard.
Here you can see that it is defined as the font-size of the element in question, i.e. it is related to the height of the font for the element. The font-size is not a measurement of any specific letter. The actual height of individual letters can be greater or less than the font-size, though typically they will be less. From Wikipedia:
In digital type, the relationship of the height of particular letters to the em is arbitrarily set by the typeface designer. However, as a very rough guideline, an "average" font might have a cap height of 70% of the em, and an x-height of 48% of the em.
One more thing to note, in the CSS standard:
The only exception to this rule is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.
This exception makes sense, otherwise you'd get a recursive definition for the font size.
A commonly used, but wrong, definition is that it is the width of the letter 'M' in question. It used to be defined like this in typography, but that is no longer true these days, and has never been true for CSS. The 'M' is in fact often less wide than 1 em (this depends on the font of course).
EDIT: I stand corrected: in CSS, it's defined as the font size, as per Mark Byers' answer.
(Originally, it was It's the width of the letter M. See http://en.wikipedia.org/wiki/Em_%28typography%29. Compare ex, which is the height of an x.)
An em supposedly represents 1 letter M's worth of width, but in practice is the current font size.
Ems are relative, so if you do:
table { font-size: 2em }
td { font-size: 2em }
Text in your td's would be four times the size of the body text, since the table's font size is twice the body's, and the td's font size is twice the table's.
p { margin-bottom: 1em }
Paragraphs will now have one line break beneath them, of exactly the height of one line of text. (Letters will usually be shorter than the line, but you get the idea.)
'Em' is "x times the current font the user agent is using".
This means that, if the visitor is using 10pt font as the default, 1em equals to 10pt, 2em equals to 20pt and so on.
You may find additional information for the different CSS units here: http://www.w3schools.com/css/css_units.asp
You already have some understanding of 'em' from existing answers but none of them noticed one more thing.
With em's you can create so-called 'elastic' make-up. This means that if you specify all sizes of blocks in em's then your site will keep its proportions after user presses 'Ctrl+' (or maybe another combination in some browsers to enlarge font size).
From Wikipedia:
An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font. Originally the unit was derived from the width of the capital "M" in a particular typeface. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size. So, 1 em in a 16 point typeface is 16 points.
In CSS, "em" is a way to express size relative to the size of the font. "1 em" means "the same size as the current font box." "1.5 em" means the element is sized about 1-1/2 times the font size.
Everything scales nicely that way.
See: CSS Lengths Unit Reference
Related
I'm experiencing some pretty bizarre behaviour from my CSS font-size rules. I'm probably doing something silly myself [this must be the case ;-) ], but I hope someone can point it out for me.
Currently (for testing purposes) I have only one rule for font-size in the stylesheet, that regulates ALL font-sizes, and this is it:
p, div, a, span {
font-size:3em;
}
Now I know 3em is a pretty big font-size (for all I know it should correspond to a width of about 3*16 = 48 pixels on the big screen browsers), but what you see in reality is simply ridiculous. Have a look: http://www.svvreewijkdevaan.nl/nl/
If you think the font size in the menu (which you see on top of the page) is big, scroll down a bit, and you'll find that the letters become so huge that they're not really recognizable as letters anymore.
And in fact, looking in the Firefox inspection tool, I find that '3em' letters are computed to have a font-size of (get this) 34992px, i.e. almost 35 thousand. What does that even mean?
In fact, the real (displayed) font-size (i.e. the width) seems to grow - at the very least - exponentially with the specified em number, rather than proportionally. So for example, if I replace 3em by 3.5em, the displayed font-size becomes at least two times as wide (actually more). Conversely, if I reduce the specified font-size to 1em I get the - normal and expected - size of about 16px. But if I make it 0.7em, the width reduces to maybe 2px (absolutely unreadably small).
Why don't the real (displayed) font-sizes grow proportionally with font-size (in terms of 'em') specified in my stylesheet?
em is based on the font-size of the parent element. Now, if you nest elements for which you have set the font-size in em into each other – those values get multiplied.
Either don’t nest element with font-sizes set in em that much;
set it for less elements (for example only for div or p, and let the descendants inherit the size);
or look into the rem unit instead.
1) I came across THIS ARTICLE today, which states:
The most popular method in working with em values is to set the
font-size on the body to 62.5%. Because the default browser font-size
is 16px, this makes it 10px (without hard-setting it to 10px, which
wouldn't cascade).
What I just quoted (above) essentially means that, I CAN'T set the font-size of the body to 10px directly and then define the font-sizes of other elements in em or % based on that. Isn't it what it meant, or did it get it wrong?
For example, I have body {font-size: 10px;}. And now I set p {font-size: 1.4em;}. Doesn't it mean, the font-size of p is actually 14px? Isn't that cascading? (or is this going to cause me problems on other devices? - - mobiles, tablets, etc.)
2) For any given element, defining its font-size as 1.8em or 180% makes no difference what-so-ever, right? I mean precisely, for an element (whose size we are defining), an em is essentially a decimalized form of %, isn't it?
EDIT: 3) 'em' is often referred to as a very mobile-friendly sizing unit. How about %? Is it just as good, considering Q2?
1) The article is wrong when it says that font size in pixels “wouldn’t cascade” (and this reflects a misunderstanding of what the cascade is). You can use em or % for the font sizes of inner elements if you like. You would be setting font size in pixels for them, just indirectly. The flexibility you get is that things will be easier if you later change the base font size set in pixels. On the other hand, em or % settings may imply rounding that will be treated differently by different browsers in some cases.
If you set body {font-size: 10px;} p {font-size: 1.4em;}, then (unless other style sheets interfere), the font-size of p will be 14px. But this has nothing to do with the cascade. It’s a consequence of basic definitions for units and font-size.
2) For font-size, 1.8em and 180% have the same meaning by definitions. There used to be reasons to favor one or the other, due to browser bugs with the other, but these considerations have lost significance.
3) Yes, using % is just as good.
I'm trying to convert all of my site's margin values to em in place of pixels, but I'm having a hard time trying to figure out what 'em' actually is. I thought it was a set distance based on the users browser settings (default font-size), but a standard 1em is different when applied to h1 or ul for example. Any help?
An em is based on the font size (the widthheight of a capital M), so it is a relative measurement, based on whatever font size applies to the element.
See the results of this markup on jsfiddle:
<div style="font-size:2em">2em<div style="font-size:2em">2em</div></div>
<div style="font-size:14px">2em<div style="font-size:2em">2em</div></div>
"1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses"
http://www.w3schools.com/css/css_units.asp
Stackoverflow relevant EPIC answer here:
Is sizing fonts using "em" still relevant?
The em measure type will depend on the circumstances (the element parent, the element type / element css properties), read a complete and comprehensive explanation on this here:
http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
I'm updating a website that has a lot of sections with the CSS property font-size:larger.
I'd like to replace this so that it is using EMs instead, because it is more explicit what the size will be.
If font-size:larger is applied to a 1em font, how many EMs is the new font? Something like 1.2em?
As mentioned in W3C CSS2 Fonts document:
<relative-size>
A keyword is interpreted relative to
the table of font sizes and the font size of the parent element.
Possible values are: [ larger | smaller ]. For example, if the parent
element has a font size of 'medium', a value of 'larger' will make the
font size of the current element be 'large'. If the parent element's
size is not close to a table entry, the UA is free to interpolate
between table entries or round off to the closest one. The UA may have
to extrapolate table values if the numerical value goes beyond the
keywords.
And below this, says:
Note 2. In CSS1, the suggested scaling factor between adjacent indexes
was 1.5, which user experience proved to be too large. In CSS2, the
suggested scaling factor for a computer screen between adjacent
indexes was 1.2, which still created issues for the small sizes.
Implementation experience has demonstrated that a fixed ratio between
adjacent absolute-size keywords is problematic, and this specification
does not recommend such a fixed ratio.
According to the SitePoint Reference, your guess is exactly right. Most browsers will increase the font size by a factor of 1.2em, but there is no standard that they do so.
The W3C recommendation is that you use em or % for sizing, because sizing of elements on the page will be in relation to each other, and not rely on an arbitrary convention that may not be used in some less-common browsers.
font-size:larger will cause the font-size of the selected element to be larger then the one from its parent container. The standard font-size of CSS is medium. The actual px or em value depends on the client/browser. Normally it's 1em and a common conversion is 1em = 16px.
From what I know, the em keyword in CSS means the current size of a font.
So if you put 1.2 em, it means 120% of the font height.
It doesn't seem right though that em is used for setting the width of divs etc like YUI grids does:
margin-right:24.0769em;*margin-right:23.62em;
Everytime I read about em, I forget what it really represents.
I'm hoping someone can explain it to me so it sticks in my head heeh.
Historically it is the width of an "M" in the font. Hence the name!
In CSS2.1 it is defined to be the same as the font-size.
In many cases it seems more natural to use em rather than points or pixels, because it is relative to the font size. For example you might define a text-column to have a width of 40em. If you later decide to change the font-size, the column will still keep the same number of letters per line.
Traditionally, em is the width of the upper case M. In practise though, an em is the point size of the font.
em dash versus en dash.
It does mean the size of the font, but using it for width/height is useful for creating designs that scale with the font-size. This is becoming less useful now that most browsers can do full page zoom. Before when they could only change the size of the text, using em for width/height would allow those elements to scale also.
An em size is proportional to its containing element.
For example:
<!-- Browser default size (usually 16px) -->
<div style="font-size: 1.00em;">
<!-- 150 % of the container's size: 16 + (16/2) = 24 -->
<div style="font-size: 1.50em;">
This editor keeps it in mind for me (as to how it works).
They are re-calculating exact pixel values to em to make them scalable.
See this on-line calculator for example.