Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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
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
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.