Understanding type measurement unit options
Video: Understanding type measurement unit optionsWhen 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.
- Next steps
Viewers: in countries Watching now:
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Understanding type measurement unit options
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.
There are currently no FAQs about Typography with CSS in Dreamweaver.