em adjust size according to screen size,
yes but confused
does em depend upon browser settings? which settings?
or does em depend upon screen resolution?
or help what does it depend upon and from where can these elements be changed to observe the difference in sizing when "em" is used
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
Quote from w3schools
The tricky thing to remember about em as a unit of size when coding CSS is that it is cumulatively relative and, once a base font size has been established, treated roughly like percentages.
Thus picture a <strong> inside a <p> like so:
<p>foo <strong>bar</strong></p>
with the following rules:
p {font-size:0.8em;}
strong {font-size:1.0em;}
Contrary to first impressions, the word bar will not be bigger than the word foo; the words will be the same size - the font size inside the strong tag is set to 1.0 em relative to 0.8 em, or 0.8 em.
By the same token rules like so:
p {font-size:0.8em;}
strong {font-size:0.8em;}
Will not result in foo and bar being the same size; foo will be 0.8em relative to it's container's font size while bar will be 0.8em relative to it's container's font size, or ~0.64em relative to foo's container.
or more exactly, a em is the height/width in pixels of a "M" character in the current font-family/font-size. unless it's a monospace font, a "|" and a "M" represent different widths in pixels...
em is related to the current font size - as set by css on parent elements. Historically em was taken as the width of the letter M. However since not all fonts include M now that cannot be guaranteed!
The good thing about it is that it will make non-text elements scale with font size if the user changes the font size using their browser settings.
As quoted for w3schools, the em is the "current font size" and everywhere you see 'em' it can be replaced, as to meaning, by the words "current font size".
font-size is 20px then 1 em is 20px. (current font size is 20px).
font-size set to 0.7 em then the font size changes to 14px. (0.7 x current font size = 14px) and one em is now 14px.
If browser default font size is 16px, and font size not set, then:
current font size = default font size = 16px = 1em.
If browser default font size is set to,say, 30px then:
current font size = default font size = 30px = 1em
Screen dpi exists to translate lengths specified in inches into pixels so when font size is specified in points.
font size in pixels =[( font size in points)/72] x screen dpi
To that extent the em depends upon screen resolution i.e. the screen dpi set via the Control Panel.
http://www.emdpi.com/screendpi.html
For computers the em was never the width/height of the letter 'M".
Related
I have two sites on which the font is set by
* {
font-family: "Varela Round", sans-serif;
}
Since the font-size is not specified, the browser use his standard values for each element. But if I set the size to 0.9em the size is really small. The output of window.getComputedStyle(element).fontSize also shows different px values. If I set font-size: 13px the size is everywhere the same.
But if I set the size to 0.9em the size is really small.
Yes, it is a relative size.
The body becomes 90% of the font size of the html.
A section inside the body becomes 90% of the body (so 81% of the html).
A p inside the section becomes 90% of the section (so 72.9% of the html)
And so on.
If I set font-size: 13px the size is everywhere the same.
Absolute units do not vary based on the font size of the parent element.
This explanation is summarized from the site Css Font Size
The reason for this is the fact, that px is not relative to other elements. % and em instead are relative to their parent which results in the following effect:
Since 100% = 1em the two units can almost (see % vs em) be used analogously.
One solution is to use rem, which acts similar to em but does not inherent the value from the parent.
An other is to set a default size for the main element e.g. body and then set the font-size relative to the parent for all elements.
The css of a major site I am looking at has what appears to be a strange way of managing their font sizes in CSS. First, the body selector has this:
body {
font:62.5%/1.5 Helvetica,Arial,FreeSans,sans-serif;
}
Then later on to get a custom size for the h2 font they do:
h2 {
font-size:3em;
}
If you change the font directives in either of these places, the font size of h2 will change and look incorrect. So they are clearly managing the font size via the combination of these directives, and I want to know why they would do it this way....
Questions:
Why is the h2 font not simply over-riding the body font? It's like the body font is acting as a multiplier on its size....
What is the motivation for this design?
Thanks,
Jonah
Why is the h2 font not simply over-riding the body font? It's like the body font is acting as a multiplier on its size....
Because in CSS, em is a relative unit of measure. Thus 3 ems of 62.5% of the base size means 187.5% of the base size for <h2> elements.
What is the motivation for this design?
Setting a percentage value for the body element means that — % being a relative unit of measure too — the user can resize text in an entire page using his browser's text size setting. I would guess that a value like 62.5% is in case the browser default font size makes the entire body copy too large (remember that this is being applied on the body element). My site uses 90%, which isn't that small but you get the idea.
1em is equal to the default font size. The default text size in browsers is 16px. Unless you change the default, that is.
Here the default is being defined as 62.5% of the browser's default, with a line height of 1.5.
3em is 3 times the default size set.
So when you change the body default it affects every place the em size unit is used, including the h2 tag with is 3 time the default setting.
Usually the browser defines a default font size of 16px. em however, is a relative unit. So for example, if you have a setting a font size for a container/div of
1 em = 1 times 16px = 16px
1.5 em = 1.5 times 16px = 24px
2 em = 2 times 16px = 32px
Therefore by setting it to 62.5%, it reduces down to your reference font size to 10px default.
which means this technique makes it easier when you are visualizing your font sizes in px,
1 em = 10px
1.5em = 15px
2em = 20px
I am still not clear what does size in em mean?
I have worked px, pt in CSS.
What would 0.8, 1.0 and 1.2 em mean?
I have seen height's in CSS like:
height: 0.8em; or height: 1.2em;
How is it calculated?
The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example, Chinese), but all fonts have a height. The term has therefore come to mean the height of the font – not the width of the letter "M."
Let's look at a simple example where we use the em unit to set font sizes:
<html>
<style>
h1 { font-size: 2em }
</style>
<body>
<h1>Movies</h1>
</body>
</html>
When used to specify font sizes, the
em unit refers to the font size of the
parent element. So, in the previous
example, the font size of the h1
element is set to be twice the font
size of the body element. To find what
the font size of the h1 element will
be, we need to know the font size of
body. Because this isn't specified in
the style sheet, the browser must find
it from somewhere else – a good place
to look is in the user's preferences.
So, if the user sets the normal font
size to 10 points, the size of the h1
element is 20 points. This makes
document headlines stand out relative
to the surrounding text. Therefore:
Always use ems to set font sizes!
More Info
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
Here's a link to other CSS units:
http://www.w3schools.com/cssref/css_units.asp
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.
more here
Paul is correct, however its "M" not "m". However this is an esoteric definition derived from typesetting/printing and isnt of much use in this case. In terms of whats going to be useful to you you its a percentage of font size.
An em is the width of the letter "m" (in your current font and size).
Em is the size of a character. It will vary depending upon the font size. If the font size is 24 then 2Em will be equal to the space it should take to hold two characters of the font size 24.
As quoted from wiki.
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.
FYI:
En is half of Em. 0.5Em
An em means "ephemeral unit" it is relative to the current font size of its parent element. For instance, the text in an <h1> heading is 2em by default. This comes from the fact that an <h1> inherits its text size from its parent element, the <body> of the document. If I set my <body> font-size to 16px (font-size: 16px;). My <h1> being 2em would inherit a size of 32px, because 2em is twice the size of 1em. In this case 1em=16px so 2em=2x16px=32px. Now if you create an HTML document with the following
<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>
Then you define following CSS rule.
body {font: normal 16px Arial, Helvetica, sans-serif;}
Open the page in a web browser (Chrome) and open the browsers development tools (ctrl+shift+I), you'll see the default font-size for an <h1> is 2em. You will also see on the styles tab that it is "Inherited from body".
While still in the Development Tools for this scenario you can see on the Box Model diagram that the <h1> margin is 21.440px on the top and bottom margins. If you look in the CSS defaults for <h1> you can see the margin-block-start: 0.67em; and margin-block-end: 0.67em; Remember sizing is relative to the font size of the parent element, so 0.67em is relative to the <h1> font size not the font size of the <body>, you can verify this with a little math, 0.67em x 32px=21.440px and this is the size of the margin of the <h1> in the Box Model diagram. For more information try http://www.123webconnect.com/convert-px-em.php
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.