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.
Related
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 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.
What is the difference between px, em and ex? And when you define font-size in CSS, do you use px, pt or em?
em : the font-size of the relevant font
ex : the x-height of the relevant font
px : pixels, relative to the viewing device
Pixels (px) are browser dependent. It is the absolute size that you would see on your screen.
Em are sort of like percentages. Ems is referring to the base text size. The value of 1 em means the same thing as a value of 100 percent. But you can also say it in the opposite way: A percentage value is just an em multiplied by 100.
Points(pt) are what you would want to use in print media.
CSS Length Units:
Absolute: Inches(in), centimeter(cm), milimeter (mm), points (pt), picas (pc)
Points are standard typographical measurements that have been used by printers and typesetters for decades and by word-processing programs for many years. Traditionally, there are 72 points to an inch (points were defined before widespread use of the metric system). Therefore, the capital letters of text set to 12 points should be one-sixth of an inch tall. For example, p {font-size: 18pt;} is equivalent to p {font-size: 0.25in;}.
Picas are another typographical term. A pica is equivalent to 12 points, which means there are 6 picas to an inch. As just shown, the capital letters of text set to 1 pica should be one-sixth of an inch tall. For example, p {font-size: 1.5pc;} would set text to the same size as the example declarations found in the definition of points.
These units are really useful only if the browser knows all the details of the monitor on which your page is displayed, the printer you're using, or whatever other user agent might apply. On a web browser, display is affected by the size of the monitor and the resolution to which the monitor is setand there isn't much that you, as the author, can do about these factors. absolute units are much more useful in defining style sheets for printed documents, where measuring things in terms of inches, points, and picas is common. As you've seen, attempting to use absolute measurements in web design is perilous at best.
Relative: em (em-height), ex (e-height), px. The first two stand for and "x-height," which are common typographical measurements; however, in CSS, they have meanings you might not expect if you are familiar with typography.
em: one "em" is defined to be the value of font-size for a given font. If the font-size of an element is 14 pixels, then for that element, 1em is equal to 14 pixels.
ex: refers to the height of a lowercase x in the font being used. Therefore, if you have two paragraphs in which the text is 24 points in size, but each paragraph uses a different font, then the value of ex could be different for each paragraph. This is because different fonts have different heights for x
px: tiny boxes of color in a monitor are pixels. In general, if you declare something like font-size: 18px, a web browser will almost certainly use actual pixels on your monitor after all, they're already there but with other display devices, like printers, the user agent will have to rescale pixel lengths to something more sensible. In other words, the printing code has to figure out how many dots there are in a pixel, and to do so, it may use the 96ppi reference pixel.
Conclution
Because of this potential for rescaling, pixels are defined as a relative unit of measurement, even though, in web design, they behave much like absolute units.
Rrefrence: css the definite guid by eric meyer
what is the difference px,em and ex?
http://www.w3.org/TR/CSS21/syndata.html#length-units describes those and the other length units available in CSS
And when you define font-size in css, do i use px,pt or em?
As a rule of thumb, use percentages on screen and pt for print.
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