Join James Williamson for an in-depth discussion in this video Working with units of measurement, part of Dreamweaver CS5 Essential Training.
- View Offline
When working with either typography or layout, it is crucially important that you understand the different units of measurement that CSS allows you to use, and when you would use one over the other. When you discuss units of measurement in CSS, there are two general categories: Absolute and Relative. Absolute, which can also be referred to as fixed units, delineate a fixed size, one that does not change based on any other factors. Relative units of measurement look for either a parent element or the user agent itself for a base value to begin with.
With those two categories in mind, let's take a look at the options available to you when specifying sizes in your styles. So here we have measurement.htm opened up, and we're just going to go through a couple of these units of measurement. Let's talk about points first. Now points are units of measurement that are designed for print. They are, in fact, 1/72 of an inch. So what does that translate to on the screen? Now that's a very good question. You need to know the resolution the monitor is set to, as well as the operating system, to answer that one.
Avoid using points for onscreen font measurement and restrict its use to print stylesheets where it belongs. Now what about inches and centimeters? Well, again, they're just what you think they are. They're useful for other media types, but really probably shouldn't be used for onscreen media. Let's move on, and talk about Relative units of measurement. What about ems? Well, ems are, hands down, the most popular relative measurement for onscreen sizing. An em is best described as being the equivalent of the size of a capital M for that particular font.
An ex is equal to the x- height of that specific font. The size of the font can change dramatically as font-families are substituted. So it should be used with care. Now percentages, values are pretty straightforward. A percent value sizes the text to the percentage of its inherited or default value. Now pixels, they're based on the current resolution of the viewing device. Because it relies on the resolution of the user agent, pixels are sometimes referred to as a relative unit.
Now in truth, setting units to pixels fixes them at that size. There are several reasons to avoid using pixels for font measurement. Internet Explorer, prior to Version 7, did not allow the onscreen resizing of pixel-based font sizing. So users of earlier versions of Internet Explorer will not be able to change their font size based on their own viewing preferences if you use pixels. Also, pixel sizes that might look good on a monitor might be far too large for the mobile environment. Pixel-based font sizes don't scale too well between environments.
It's best to avoid using pixels for font sizing when possible. Now most browsers do start with the default font size. And for the majority of browsers that default font size is 16 pixels. We're going to do a really quick exercise where we take advantage of our browser's default font size and compare a relative unit of measurement with a fixed unit of measure. So I'm going to scroll down to the bottom of this page, and I can see that I have one paragraph that says, "Make this paragraph 16 pixels tall," and then there's another paragraph right below that that says, "Make this one 16 pixels tall too, please." Now both of these are paragraphs that have classes applied to them.
You'll notice that the first paragraph says <p.resize>. The second one is <p.resize2>, so we have classes resize and resize2, okay. I'm going to go over to my CSS Styles panel, and I'm going to go scroll down until I find those two selectors, <p.resize> and <p.resize2>. The first one, I'm going to go ahead and add a property to that. And I'm going to add the font size property. So font-size, again you can get that through the pulldown menu if you'd like. If I hit Tab, I get to go over and set the unit of measurement here.
So for the first one, I'm going to go ahead and set that to pixels. So I'm just going to type in 16 pixels. Okay, mission accomplished. Hey! Nothing really changed here. Hm, okay. Well, I'm going to go down to <p.resize2>, add a property there. And again, I'm going to do font-size, and here, instead of 16 pixels, I'm going to type in 1em. No change. Interesting. Okay. Let's preview this in our browser and see if we have any change, or if we notice the difference between the pixels, which are on top, and the em, which is on the bottom.
So we're going to go ahead and Save that and Preview that in my browser, and I'm using Firefox, but feel free to use any browser you want with this. Now if I scroll down, you can see you can't really tell a difference between the two of them. The top one is being sized using pixels. The bottom one is being sized using ems. So you might say, "Well, okay. So then what's the big deal?" Why do we even care which one we're using? Well, the reason that they're both the same size is because my browser is currently set to a default font-size of 16 pixels. So the 1em that the second paragraph is doing is sizing to one times or 100% of that size, which equates to 16 pixels.
Well, let's take a look at what happens if your user changes that within your browser. So I'm going to go up to Tools, and if you're in a different browser, you might find this in a different location, but for Firefox, I'm going to go to Tools and choose Options. And if I click on the Content tab, notice that I have a Default Font and a Default Size, and sure enough, there it is set to 16 pixels. Now if I change that, let's say I go down to say 14, if I click OK, notice that now we can see the difference. The font up top that is sized as 16 pixels remains 16 pixels, whereas the one on the bottom changes to reflect the new browser settings.
So because it says 14 pixels, now 1em is equal to 14 pixels. So that relative unit of measurement is very handy for users that might have set different preferences for their browsers. They're still going to get everything scaled to the relative size that you need it. So let's say somebody has a vision disorder, goes in their Options and cranks that up to say around 18 pixels. Well, they can read your text just fine, whereas if you'd set it explicitly at 16 pixels that would override the browser, and we would force them to look at a size that they don't really want to look at.
So as a general rule ems are the preferred unit of measurement for online type. As always, there are exceptions to this rule. Older versions of Internet Explorer seemed to have problems with font- size values that are defined strictly as ems. As a workaround, most designers will size the body selector using a percentage value and then define all other measurements in ems. This seems to fix those IE-specific problems. Now since font size is by and large inherited, meaning if you apply a font-size to a parent tag, all the tags inside of it gets the same size, it makes sense to carefully plan a sizing strategy for your site, pick a unit of measurement, and take care to stay consistent throughout your site.
- Defining and structuring a new site
- Creating new web documents from scratch or from templates
- Adding and formatting text
- Understanding style sheet basics
- Placing and styling images
- Creating links to internal pages and external web sites
- Controlling page layout with CSS
- Building and styling forms
- Reusing web content with templates
- Adding interactivity
- Working with Flash and video