Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Fluid Web Typography: Scale & Rhythm

  • Print
  • + Share This
Jason Cranford Teague shows how giving careful consideration to the measurements and scale you are designing for is what separates good Web typography from great Web typography.
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.

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.

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.

  • + Share This
  • 🔖 Save To Your Account