html { font-size:100.01%; }
body { font-size:1em; }
The explanation for this comes from "CSS: Getting Into Good Coding Habits:"
This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
This link has been bookmarked by 287 people . It was first bookmarked on 29 Jan 2008, by nostariel tinuviel.
-
26 Jun 12
-
12 Feb 12
-
09 Jan 12
-
03 Jan 12
-
08 Dec 11
-
19 Nov 11
-
11 Nov 11
-
29 Oct 11
-
22 Oct 11
-
14 Oct 11
-
09 Oct 11
-
27 Sep 11
-
29 Aug 11
-
09 Aug 11
-
and can be almost as precise
-
as pixels for designers
-
Computers use kerning to adjust the horizontal space each letter occupies on the screen, making them equidistant and balanced. Originally, the metal block was trimmed or “kerned” to make the
-
em is actually a vertical measurement
-
vertical space needed for any given letter in a fon
-
If the font size is 16px, then 1em = 16px.
-
All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
-
1em = 16px, 0.5em = 8px, 10em = 160px
-
o make calculating child lengths easier.
-
html{ font-size:100%; }
-
1 ÷ parent font-size × required pixel value = em value
-
Pixel to ems conversion table
-
-
04 Aug 11
-
What is an Elastic Layout?
An elastic layout scales with users’ text size.
More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they need to.
Elastic design uses em values for all elements. Ems are a relative size, written like this:
1em,0.5em,1.5emetc. Ems can be specified to three decimal places like so:1.063em. “Relative” means:
-
-
19 Jul 11
-
27 May 11
Ian ChiaExplanation of the "em" unit in CSS for elastic layouts - useful for printable pages within a digital magazine or textbook
-
12 May 11
-
28 Apr 11
-
03 Apr 11
-
14 Mar 11
-
28 Feb 11
-
16 Feb 11
-
03 Feb 11
-
27 Dec 10
-
30 Nov 10
-
29 Nov 10
-
25 Oct 10
-
23 Oct 10
-
We want it to be 740px wide to comfortably fit an 800×600px viewport like the example
-
1em = 16px. Therefore, 1px = 1 ÷ 16 = 0.0625em.
-
0.0625em × 740 = 46.25em
-
add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
-
Leading (pronounced “led–ing”) was traditionally the insertion of lines of lead underneath rows of text. It is expressed in CSS as
line-heightbut instead of adding space below, it increases the space above and below each line of text. -
The heading font size will be 18px. The paragraph font size will be 12px with an 18px line height. 18px will be our basic leading—the most important value for our interface. Everything else will be proportional to that.
-
-
26 Aug 10
-
09 Aug 10
-
An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter “M”.
-
Computers use kerning to adjust the horizontal space each letter occupies on the screen, making them equidistant and balanced. Originally, the metal block was trimmed or “kerned” to make the horizontal padding around each letter the same.
-
So, in CSS, an em is actually a vertical measurement. One em equals the vertical space needed for any given letter in a font, regardless of the horizontal space it occupies. Therefore:
If the font size is 16px, then 1em = 16px.
-
Before we start throwing ems around a stylesheet, we need to know what the default font size is in the browser. Luckily, we do:
All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
-
We know that 1em is always equal to the font size of the parent element, therefore:
1 ÷ parent font-size × required pixel value = em value
-
For your bookmarks: Pixel to ems conversion table for font sizes.
-
-
30 Jul 10
-
17 Jun 10
-
28 May 10
-
18 Apr 10
-
10 Apr 10
-
09 Apr 10
-
01 Apr 10
-
- They are calculated based on the font size of the parent element. E.g. If a
<div>has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. - If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
Elastic design uses em values for all elements. Ems are a relative size, written like this:
1em,0.5em,1.5emetc. Ems can be specified to three decimal places like so:1.063em. “Relative” means: - They are calculated based on the font size of the parent element. E.g. If a
-
All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
-
The
<body>inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems! -
However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave:
html{ font-size:100%; } -
Add Sticky Note
-
-
Let’s give our
<body>some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this:html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; } -
1 ÷ 16 × 740 = 46.25em
(1 ÷ parent font-size × required pixel value = em value)
-
Add Sticky Note
-
Useful online calculator:
http://pxtoem.com/
-
-
While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
-
Set a 12px font size with 18px line height and margin for paragraphs
-
Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em.
Add line height and margin properties to the CSS:
p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; }Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
-
To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:)
h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; } -
Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one:
See an example here. (Would have posted the code put it was coming out really ugly!)
I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
-
Thanks Will, interesting point, but that is solved with a simple
font-size:1emon the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
-
-
26 Mar 10
-
17 Feb 10
-
04 Feb 10
-
26 Jan 10
-
17 Dec 09
-
26 Nov 09
-
18 Nov 09
-
15 Nov 09
-
13 Nov 09
-
24 Oct 09
Mylene BruneauComment calculer et appliquer les fontes en EMs et un layout liquide
-
10 Oct 09
-
09 Oct 09
-
14 Sep 09
-
08 Sep 09
-
04 Sep 09
-
21 Aug 09
-
12 Aug 09
-
29 Jul 09
-
23 Jun 09
-
17 Jun 09
-
08 Jun 09
-
29 May 09
-
28 May 09
-
23 May 09
-
21 May 09
-
11 May 09
-
05 May 09
-
23 Apr 09
-
13 Apr 09
-
10 Apr 09
Morgaine LeFayeThis article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.
-
26 Mar 09
-
24 Mar 09
-
14 Mar 09
-
06 Mar 09
-
04 Mar 09
-
02 Mar 09
-
26 Feb 09
-
19 Feb 09
-
17 Feb 09
-
Elastic design uses em values for all elements. Ems are a relative size,
-
-
09 Feb 09
-
03 Feb 09
-
20 Jan 09
-
05 Jan 09
-
26 Dec 08
-
15 Dec 08
-
06 Dec 08
-
28 Nov 08
Richard Kendall"This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm."
webdev webdesign tutorial tips programming typography layout css em elastic
-
17 Nov 08
-
31 Oct 08
-
18 Oct 08
-
08 Oct 08
Jon Baldivieso"As I've said lately — if you're just going to read one article on CSS layouts this year, let it be this one" -- limi
-
07 Oct 08
-
06 Sep 08
-
29 Aug 08
-
23 Aug 08
Michael JoyceMore accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they nee
css elastic em framework typography webdesign webdev xhtml fromDelicious
-
21 Aug 08
-
18 Aug 08
-
13 Aug 08
Public Stiky Notes
body { font-size:1em; }
The explanation for this comes from "CSS: Getting Into Good Coding Habits:"
This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
http://pxtoem.com/
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.