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
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.
I'm having trouble writing maintainable CSS code when font size is specified with EM units as opposed to PX units. I've been accustomed to writing CSS code like this:
body {font-size: 12px;}
body .sidebar {font-size:11px;}
body .sidebar .loadmore {font-size:10px;}
body .sidebar .warning {font-size:13px;}
The idea is that on many pages through out the site, there's a lot of text that should have 12 pixel font-size. I take advantage of the rules of specificity to override the 12px font size in special areas of the site.
Let's say I rewrote the above code as:
body {font-size: 12em;}
body .sidebar {font-size:11em;}
body .sidebar .loadmore {font-size:10em;}
body .sidebar .warning {font-size:13em;}
If I replaced px with em in the code above, my understanding is that I lose the advantage of rules of specificity. Line 3 of the code would be interpreted as " 10 em of 11 em of 12 em" which is not at all the same meaning as " override all previous rules and use 10 em of (what is the default?)". Is what I've stated correct?
edit If what I've said is correct, then how does one write a font size rule such as "use font size X for all elements, but use font size Y on side bars"?
John the specificity that you are talking about will occur in the way that you have stated. A reference as to why can be seen: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/.
Edit As a reply to your edit please consider what jnylen posted in the comments of your original post.
A font size of 12 em as you have listed for body {font-size: 12em;} is going to scale the default font size to 12x it's current size. If you would like to use em's you need to consider at what scale rate you wish to use them and do the math. If you want to set fixed sizes with nested statements you need to stick to fixed attributes (pixels). The advantage of em's as stated in the article that I linked is that you can set a default size, say 12 px and then use em to scale them. For example in mobile based websites.
Yes, em values "multiply" together when the elements they apply to are nested. It's not necessarily a specificity issue - if you specified the rules individually for .loadmore and .sidebar you would see the same issue, since .sidebar contains .loadmore.
Here's an example of a way to work with this: http://jsfiddle.net/PJWrW/
I usually use either px or percentage units for font sizes, to make it explicit that I'm setting an absolute font size or modifying the parent font size.
I sometimes use em units for defining dimensions like paddings and widths, since an em unit is basically the width of a letter at the current font size.
As far as I know, if you're using em's for font size, there is no one way to set a standard font size for elements in a left hand side bar (or elsewhere for that matter) whilst setting the specific size of some elements in that side bar. If you use em's you'll have to specify the sizes of all elements in that side bar.
Personally I usually use px for font sizing, simply because you can set a standard font size for certain elements as you say in your post.
The only convincing arguments I have heard for using em over px regard scaling issues that are no longer really a problem (IE6 doesn't allow you to change font size manually if you use px but most people stopped hacking for IE6 a while back) The only real situation I can see using em as an advantage is if you want to implement functionality whereby the user can change the font size via JavaScript like here
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.
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
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.