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.
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.
There were lots of articles about different measures in CSS, but actually I couldn't find any of them answering my question!
when we set a font-size for example to 16px, which part of glyphs or characters will set to 16px ? (is it x-height, Cap-height or ... ) ?!
and how can i control over the height of my characters accurately in css ? (something like using ex unit, but for the whole height of the characters)
This completely depends on how the vector images were defined in the font.
When defining a font you have a "document", just like you would when using Adobe Illustrator or any other vector editing tool. The document would be 100% height. If the person building the font did not stretch the glyph to the height of the document it would never be as high at the defined size.
For text characters (typefaces) there are guides on how descenders, "g, y", capital height "A vs. a" and ascenders will appear etc., but not for glyphs. So there is no real point-of-measure.
Getting a glyph to size correctly is sometime a matter of trial and error. Ideally the glyph should be the same height as a capital letter (E) but sometimes glyphs are different sizes for a reason. For example, a trademark (™) is designed to be a superscript. It is smaller but is designed to be in proportion to the base font size.
For a more detailed look at how fonts are defined see: Typeface Anatomy.
The font-size property sets the size of the font, which equals the height of the font, which does not equal any dimension of any character, except by accident. It is simply a reference quantity, which is typically sufficient to accommodate the entire vertical space occupied by characters, including descenders, ascenders, and common diacritic marks, but not any sequence of diacritic marks. Normally, “Q”, “É”, “þ”, and “Å” all fit inside the font height, which thus needs to be larger than the height of “E” and “A” for example. But this is not a law; in some fonts, e.g. “Å” extends above the top of the font height
Accidents include characters that have been defined to have dimensions that equal the font size. For example, EM SPACE can be expected to have width equal to the font size, but even this applies (according to the Unicode standard) just “nominally” and may vary by the condensation factor. (The EM DASH may have the width of one em, but this is not part of its definition, contrary to what its name suggests.)
The size of the font is surely larger than the x height and larger than the height of capital letters (partly because some capital letters have descenders). The very popular belief that the font size (the em unit) equals the width of “M” is patently false, as even the simplest check can prove.
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.