Page 1 of 3 A CSS rule is made up of a number of different pieces. There's the selector (the part before the brackets), the properties (the part before the colon), and the values (the part after the colon). Some values are just keywords, such as "none" or "bold" or "inherit." But others have a unit as part of the value, such as "500px," where "500px" is the value, and "px" is the unit of measurement. In this article and its follow-up article, we're going to focus on a single unit of measurement: the em unit. Why two whole articles on a single unit of measurement? Two reasons: the em is not well understood like the pixel or the percentage, and the em allows you to do some really cool things with CSS.
Most people first encounter the em as a way to size text using CSS. There's more to the em unit than just font sizing, however. It can be used as a length unit on any property that takes a length. The properties that we will apply the em unit to, in this article and the next, are:
We'll be working with some example files in this tutorial, so click on the Download Support Files link at the bottom of the page to download the examples on to your computer. Be ready to open them up in Dreamweaver and preview them in both Firefox and Internet Explorer.
The term em comes from traditional typography, where it referred to the height of the font in use. Thus, em was not a fixed unit, like a point, but was dependent on the font. If 12 point text was in use, an em equaled 12 points. If 36 point text was in use, an em equaled 36 points.
This is the same in CSS. An em simply refers to the font size, either the font size of the parent element or the font size of the element itself. To find out when it refers to the parent's font size and when to its own, read on.
The em unit is often used to size text because it allows the user to scale the font if necessary, increasing the usability and accessibility of your page. Just like a percentage, the value of em (when used in the font-size property) is based off of its parent's font size, which is ultimately based off of the browser's default font size.
Open up layout.html in Dreamweaver. It's a simple page about one of my cats, Styx, with the barest of styles applied.
Image 1: With no font sizes applied, the paragraph and list text of
layout.html appears in the browser's default size, with the heading text a default
percentage larger.
Switch to Code View to view the styles currently in the head of the document. You'll notice that no font sizes are currently defined. This means that the font sizes shown on this page in the browser will be based on the browser's default values.
All modern browsers are set with a default of 16 pixel text, so if you preview this page in your browser, there's a good chance that you'll see 16-pixel-high text for the paragraph and list text. If you've changed your browser default, you'll see something different, which is fine. We're more concerned about the relationship between text sizes on the page, such as how big the heading is in relation to the body text, than about the exact pixel values of the text.
Add this line to the body rule, then preview the page again and notice how it has changed:
font-size: .8em;
All of the text on the page is now 80 percent smaller than the default. If your default is 16 pixels, the paragraph and list text will now be 80 percent of 16 pixels, or 12.8 pixels (which will then be rounded by the browser either up or down). By default, the browser makes headings a certain percentage larger than the default text, but you can adjust this degree of difference as well.
Add this rule to the style section in the head:
h1 {
font-size: 3em;
}
The h1 heading is now three times as large as the body text, which, in turn, is 80 percent the size of the browser default. So, the pixel size of the h1 is equal to "3 x .8 x 16," or 38.4 pixels. Don't get scared by the math, though — you never need to make these sorts of calculations yourself. I'm just showing them to you so you can see how em values affect text in conjunction with inheritance. In the real world, you'd just set an em or percentage value for a piece of text and preview it in the browser to make sure you like the size it comes out to in relation to the text around it.
Image 2: The body text has been decreased to .8em of its parent's
font size, in this case the browser default. The heading text has been
increased to 3em of its parent's font size, which in turn is set to .8em
of the browser default.
Another really important note for the real world: never set font size in ems on the body element. If you set all your text in ems, you will trigger a Windows Internet Explorer bug that causes text to be resized incorrectly. Instead, use a percentage on the body, and you can then use ems throughout the rest of the document. Change the font-size value in the body rule from .8em to 80% — they're both exactly the same. It's like asking for six eggs or half a dozen eggs: same result, just different ways of saying it.
So you may ask yourself: why bother using ems then? Why not use percentages to style all text? You certainly can — there's no real advantage to using ems over percentages. It's just another option. When used in the font-size property, ems and percentages are interchangeable. But don't assume you can always substitute percentages for ems — this only works for font size, and I'll explain why below.
See layout_font-size.html for the changes to the example page up to this point.
Keywords
CSS, cascading style sheets, em unit, length values, font sizes, text sizes, sizing, margins, padding, rounding errors, scaling, scaleable
