Fluid Web Typography: Scale & Rhythm
- Web Measurements
- Type Size & Line Height
- Type Space
- Text Alignment
This chapter is from the book
This chapter is from the book
This chapter is from the book
- Spacing and alignment control how the text is comprehended through space and time. Learn to control the tempo of your message and guide the reader from beginning to end.
The carpenter’s adage goes, “Measure twice, cut once.” Giving careful consideration to the measurements and scale you are designing for is what separates good Web typography from great Web typography. Size and space add texture and flow to your text, improving the readability and clarity of what you are trying to say.
When typographers talk about “motion” in type, they are describing the way that a well-composed text will compel the reader’s eye, moving it along from the beginning to the end with as little disruption as possible.
)
Web Measurements
Many designers want to define with exact precision the placement and size of elements in a Web design, similar to the way they might design for print or video. Those media are static—even video, which might move and be projected onto larger screens, but the aspect ratio does not change, so everything is scaled relatively. However, on the Web, you are dealing with a variable canvas, with its final size dependent on the whims of the reader.
Understand relative and absolute unit types
In Web design, sizes can be expressed in either absolute or relative terms. I’ll explain later in this section which to use for a particular situation, but first review the different measurement types and the units at your disposal.
Absolute value units (Table 4.1) are used to precisely control sizes, so that they do not vary, regardless of the viewer’s particular screen size, browser, or operating system. That said, even absolute units can vary between computers, generally because of operating system inconsistencies. This is the case with point sizes on the Mac versus on Windows.
Table 4.1 Absolute Value Units
|
unit |
name |
description |
example |
|
pt |
point |
72pt = 1 inch |
12pt |
|
pc |
pica |
1pc = 12pt |
1pc |
|
mm |
millimeter |
1 mm = .24pc |
4.17 mm |
|
cm |
centimeter |
1 cm = 10 mm |
.42 cm |
|
in |
inch |
1 in = 2.54 cm |
.17 in |
Relative value units (Table 4.2) have no fixed size, but instead are calculated relative to another value, such as the parent element’s size, or to the screen itself. Although less precise, relative values can be quickly scaled and changed without your having to recalculate all of their dependent values. For example, if you are using relative values to set the font size and line height, simply changing the font size will also change the line height proportionally.
Table 4.2 Relative Value Units
|
unit |
name |
description |
example |
|
% |
percent |
relative to size of parent element |
150% |
|
em |
em |
1em = 100% |
1.5em |
|
ex |
x-height |
relative to height of lowercase “x” in the font |
4.17 mm |
|
px |
pixels |
relative to monitor’s resolution |
12px |
Use points for print but never for screen
Although they’re standard for print design, I’d discourage you from using point sizes when defining font sizes for the screen. The problem is the inconsistency between Mac and Windows monitor resolution settings.
For more details on designing Web pages for print, consult Chapter 6, “Grid & Composition.”
By definition, a point is 1/72 of an inch, or 72 points per inch (ppi). On a Mac, the computer assumes a monitor resolution of 72 dots per inch (dpi), which also coincides with the number of points per inch. On the other hand, Windows computers assume your monitor displays 96 dpi. If the system is set for large fonts, then Windows compounds the problem, assuming 120 dpi. Unix systems can vary between 75 and 100 dpi. These operating system assumptions result in the Mac OS rendering 18pt text at 18px text onscreen, the Windows OS rendering 18pt text at 24px onscreen, and Unix systems typically rendering 18pt text between 19px and 25px onscreen.
The upshot is that most Windows users see text that is 33% larger than text the same text viewed on a Macintosh if it was set using point sizes, rendering points all but useless for Web design onscreen. While most Mac browsers will try to adjust for this problem by increasing the base Mac font size to 16, some variance persists.
If you are designing a Web page for print (i.e., media="print"), however, then using point sizes is not only perfectly acceptable, but it is the preferred method for defining precise font sizes.
Use pixels for precision control, but know that you are taking control from the user
)
Although it is possible to precisely control the positions of elements with any of the absolute units, pixels are the most natural way to define measurements for screen-based media. Despite having a “relative” size, pixels behave absolutely in relation to the screen resolution. Many modern Web designs are specified in pixels because it is the most universal measurement regardless of screen size, OS, or browser. Like atoms in matter, pixels are irreducible as the smallest unit of meaningful distance on the screen—you can’t move something half a pixel.
While pixels give the designer precise control over where elements appear, they are not without their issues and inconsistencies. Most Web browsers allow users to enlarge text and zoom the page size, which is imperative for anyone with poor vision. Locking the font size with pixels or absolute values prevents Microsoft Internet Explorer from changing their size. Internet Explorer 7 goes some way in rectifying this limitation by allowing the entire page to be zoomed, but there is still some debate over pixels when accessibility is an issue.
Use ems and percentages for fluid design
In order to provide readers with the highest level of control over the content they are viewing, it is increasingly considered a best practice to define sizes (both font sizes and other length measurements) using relative units, especially ems.
)
The em (pronounced “m”) is the fundamental unit of measurement in typography. It is defined as the size of the type as computed relative to the current size of the type of the parent element. For example, if you set the font size of your Web page to 12px, then .5em=6px; 1em=12px; 1.5em=18px; 2em=24px. If you change the font size to 14px, then .5 em=7px; 1em=14px; 1.5em=21px; 2em=28px. So, really, ems work like percentage values for sizing fonts. However, percentage and ems work differently for margins and padding, with percentages being based on the parent’s width or height and ems still being based on the parent font size.
One reason ems are not a popular solution is that, since their computed size is relative to their parent’s size, you have to keep track of the current parent size to know how large or small the font will.
Using ems and percentages, along with maximum and minimum heights and widths, is the only way to guarantee
fluid designs and the easiest way to compose to scale, as explained later in Chapter 6.
Despite their complexity, the advantage of using ems is that you can quickly change the scale of your design by simply changing a single font-size value. Since they are relative to the parent’s font size, changing the parent’s value changes the values for all of its children. Additionally, since some older browsers, most notably IE 6, will not resize text set in points, using ems guarantees that all of your readers get the same experience.
The bottom line is that whether you use pixels or ems is up to you. I recommend keeping them consistent within a document to avoid confusion.
)