Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When specifying type for a web site, one of the first decisions a designer must make, is which kind of measurement unit to use. Pixels, percents and ems, are among the most common choices. Although there is a trend in particular a direction, designers are really all over the map on this question. This chapter will explain the differences in the various measurement units, and explore the options, so you can make an informed choice. Type measurement units fall into two camps, Fixed and Percentage.
Generally, Typeset in fixed measurement units like pixels, do not scale, while type defined in the percentage-based unit, like Ems, do. Pixels are an absolute measurement that defines the size of the type, based on the screen resolution. Besides Pixels, other Fixed Measurement Units include Points, Inches, Centimeters and Millimeters. Among Percentage Measurement Units, are Percent, Ems and Exes. Ems are based, on the width of the widest letter of the alphabet, which as you may have guessed is the M. Exes, as you've probably figured out, is based on another letter X, although it's the height of the Exe, and not the width.
Under Fixed, the almost universal choice is Pixels, to the disheartened size of print designers everywhere, who wish points were a more common selection. The Percentage options are more open. You can either use the Percents themselves, typically with a percent symbol, rather than the initials pc, or Ems; both have their adherence. One generally accepted practice, is to set the overall text size to a Percentage in a CSS rule for the body element, and Ems for the more targeted selectors.
We'll explore that topic more in the defining a Percentage-based page with Ems video, later in this chapter. Both Fixed and Percentage Measurement Units, have their pros and cons. Most graphic programs allow you to work in Pixels, so converting a comp's text size, is easier with Pixels than Ems, although it can be done. Ems are always scalable, whereas Fixed Measurement Unit won't scale in browsers like Internet Explorer6, should the user decide to set their browser font size to anything other than medium.
Pixel sizes work the same for all elements, unlike Ems, which can have a problem with nested elements, and must be specifically addressed. High-resolution devices, including iPhones with 300 pixels per inch can make Pixel sizes too small to be read. Ems on the other hand, tend to scale effortlessly for a wide range of resolutions. So the question remains, which to use? In the remaining videos in this chapter, we will dive deeper into each of the options, to help you decide the measurement unit that suits your design style and work ethic.
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.