Does your font choice measure up?

In the first installment of this series I laid out the guiding principle of typography. It is that typography exists to honor the content. It isn't difficult to wrap your mind around this concept. What is difficult is, in a environment offering you hundreds of thousands of font choices, determining whether your font choice honors that principle. In this second installment I will be reviewing letterforms measurement, and font families. These are key elements to consider when making a font choice.

When it comes to fonts, the decisions you make are subjective, based more on personal preference than anything else. This why some people prefer Arial and others prefer Helvetica. This is good thing because, when it comes to type, a healthy dose of passion never hurts.

Big Ed and Weidemann Roman font

Figure 1 - A graphical letterform

This design, using the A from the font Big Ed and a g from Weidemann Roman font, is based upon the work of Gail Collins. It shows how simply working with letterforms can result in visually appealing graphics.

Anatomy of a letterform

It is commonly accepted that the roots of typography rest in handwriting in which each letter of the alphabet is formed from a series of linear strokes. These strokes moved onto the walls and columns of ancient Rome where they were carved into stone, resulting in the evolution of our alphabet and typography. This gave rise to a rather interesting problem. Because early capital letters were carved into stone, these letterforms evolved with a minimal number of curved lines. Lowercase letters essentially remained as handwriting because the letterforms could be quickly drawn with a minimum of strokes.

The basic shape of every capital letter can be extracted from this structure.

Figure 2 - The basic shape of every capital letter can be extracted from this structure.

As writing became industrialized, uniformity and conformity meant an infinite number of copies of one document could be produced. As in any industrialization process, a very specialized language developed to identify the various bits and pieces of individual letterforms.

Rather than get into an involved piece that starts to resemble a dictionary, hit this site, http://counterspace.motivo.com/ and click the link to Anatomy. It is a tremendous resource and should be bookmarked by everyone. I guarantee many of you will exclaim, "I didn't know that thing had a name," when you explore the section.

The history of type is littered with accidents. For examples, serifs, the most widely recognized aspect of type anatomy , came about, according to one school of thought, when Roman scribes wrote the letters on the walls using white wash. They used a brush and the serif is the end of the brush stroke. The stone masons, not knowing better, simply chiseled out that mistake when carving the letter. The sans serif - sans is French for without - is a relatively recent invention which really didn't gain wide acceptance until the 20th Century.

Serifs are the little hooks at the end of the strokes in letters.

Image 3 - Serifs are the little hooks at the end of the strokes in letters.

This has given rise to a rather interesting serif vs. sans-serif debate. It is a "no winner" debate because of the subjective nature of the font choice decision. The choice you make- sans or serif- is always right.

The rule of thumb for print that has evolved is use serif for body copy and sans for the headings. This is what we are used to reading in print media. Technical journals, on the other hand, tend to go the other way due to the industrial look of a sans. Studies have shown that serif-based fonts, such as Times and Garamond, are much easier to read in the print medium. The growth of digital media, and the increased use of sans-serif faces such as Arial and Verdana on the web, has nothing to do with the rejection of standard practice among web designers. At smaller pixel sizes, the serifs of fonts can disappear or become indistinct. The rise of the sans face on web sites and Flash animation is driven more by practicality than aesthetics.

One final, historical note that has resonance throughout today's web development field is the design of one of the first sans-serif faces. According to Robert Bringhurst, one of the first commercial sans-serif faces was developed for Valentin Hauy of Paris in 1786. The purpose of this font was to be invisible and address accessibility. It was designed to emboss paper and allow the blind to read with their fingers.

Measurement

If any one aspect of this subject will trip up web designers, it is this one. The reason is, the metal type measurement system has basically been grafted into digital media and web design.

Though Gutenberg invented metal type in 1450, it wasn't until 1737 that a standard measurement system gained universal acceptance. Until then, and this may sound familiar, it was "every man for himself." The system, developed by the French type designer Pierre Simon Fournier le Jeune, provided a common measurement- the point- that allowed for extremely fine increments. About 140 years later, the Americans introduced another basic unit- the pica. There were now 72.27 points in an inch and 12 points in a pica. (For you purists, each point is 0.138 inches or 1/72nd of an inch.)

When Desktop Publishing swept the universe, the measurement for digital media changed to 72 points to reflect the resolution of a Macintosh monitor. If you are an absolute stickler for precision, QuarkXPRESS still lets you change the point size measurement to 72.27 points.

Where confusion reigns is how the point gets measured. In the days of hot metal and letter press, the point size was the measurement of the piece of type from the top of the slug to the bottom of the slug. A slug is the piece of metal type used for hand typesetting. It is not the size of the actual letterform on the slug. This means the letters you are reading right now have a bit of space above them and below them that is factored into the point size.

Where the measurement system really gets confusing is that fonts are individual designs. A common identifying characteristic of a font is its x-height. All letters in a line of type sit on an imaginary baseline. All of the letterforms in that font will sit a little above or a little below that line. The only letter the sits squarely on the baseline is the letter x, and its height and width affect every other letter or character in the font.

This why some fonts look really small or large when you set them at a point size. Here's an example of this point:

Each letter is a 24-point lower case x

Image 4 - Each letter is a 24-point lower case x.

Though they are all the same size and weight they all look different. From left to right they are:

This is something my students are quick to understand. They are usually asked to submit one-page essays. Those that can't quite fit the page with their thoughts will use American Typewriter with its big x-height. Those who have lots to say will use Adobe Garamond.

The lowly "em"

The final measurement is the em. If any one measurement in web design is difficult to understand it is this one. The term has come straight from hot metal to the web with no detours. In traditional typography, spacing between the pieces of type is accomplished through the insertion of a thin piece of metal between the pieces of type. This piece of metal is called a quad. Because it is not as high as the type it does not print. A quad that is the square of the point size is called an em. One that is half that size is called an en. This measurement is what lies behind em and en dashes. These small metal spacers are used for letterspacing, wordspacing, paragraph indents, and centering or justifying lines of type. It is not exactly the same when you work on the web.

Where the confusion lies in web design is through the use of an em in CSS. To understand its use on the web you must first understand how it is used in print.

An em is a relative measurement equal to the point size of the type. If your printed page is set using 12 point Times, the em is 12 points. If the page is set using using 60 point Caslon, the em is 60 points. Thus, in very simplistic terms, if you indent a print paragraph set in 10 point type by 3 ems, you can expect to see 30 points of space used for that paragraph indent.

On the web we don't use points, we use pixels. If you are talking about a type size of 12 points in print, you would be saying the font size was set to 12 pixels when talking about a web page. Thus, using the above example, an indent would be 30 pixels. In pages driven by CSS this measure is not exactly correct.

The question, in this case would be; "Where does this em measurement come from?"

In CSS an em is supposed to be the width the the font's upper case M. This makes sense because this letter is the widest letter in any given font. Where it gets tricky is the em value in actuality ends up being the user's default font size. Unless you override it with the CSS document.

The default font size, set by the user's browser is what we call the base value. In Illustration 5 below, the base size in the browser is set to 16px. If no size was specified in a CSS selector, an em would be 16 pixels. This means if you set the line height value to 3em in Dreamweaver MX, that choice would toss in 48 pixels of space between the lines. You have no control over the browser's base value. It is set by the user.

 

The font size is set to 16 pixels in Internet Explorer 5.5 (Macintosh)

Image 5 - The font size is set to 16 pixels in Internet Explorer 5.5 (Macintosh)

The font size is set to 13 pixels in Netscape Navigator 7 (PC)

Image 6 - The font size is set to 13 pixels in Netscape Navigator 7 (PC)

In CSS we can over ride the base value by changing it using a CSS selector. This can be done by adding a pixel value to either the body selector or an individual page element. If I were to set the size value to 12 pixels, the em would now be 12 pixels. In this case a line height value of 3 ems would add 36 pixels of space between the lines.

The browser's base value can be overridden in Dreamweaver's CSS Style Definition dialog box

Image 7 - The browser's base value can be overridden in Dreamweaver's CSS Style Definition dialog box

Another scenario, and one that allows the user to retain control, would be to ignore pixels and use percentages. For instance, assume you set the font size value to 80%. In this case, the pixel size set in the browser would be decreased on the page from the 16 pixel size to 13 pixels (16 X .8). This would give you a base em of 13 pixels and the line spacing of 3em would shrink from the default 48 pixels to 39 pixels. To defeat a browser bug in Internet Explorer PC, it's best to start with 100% in your body element and then set the sizes on the rest of the elements in em to allow the user to still be able to change their text size in IE PC.

Remember that the font size is based on the parent element. So, using the CSS cascade, the browser will first use the value set in your CSS selectors and if it doesn't find any font-size there, it will use the default value found in the user's browser.

To see this demonstrated, view this page, put together by my associate Stephanie Sullivan. It shows the intimate relationship between the browser's base value and an em. The body element of this test page has been set at 100%. In the first example called Font Testing, the first group of H1 to H4 and the P element font size are allowed to remain at their defaults. In the grouping beneath, all font sizes in the selectors are given a value of 1em. Other than the fact the H1 to H4 lines are bold the size is exactly the same. What this tells us is the browser is reading from the base value set in the browser unless overriden. In the second section, Line Height, the font size is set to 100% but the line height is set to various em values. Again you can see the effect of a percentage value being set for an em.

 

The line height is set to three times the size of the base value set in a browser.

Image 8 - The line height is set to three times the size of the base value set in a browser.

Fonts and their families

A font is a set of characters of the same size and style containing all of the letters numbers and special marks needed to set the line of type. Thus a family is a group of related fonts sharing similar design characteristics.

A common example would be Times. The Roman, Italic and Bold fonts of the Times family show how a simple change in stroke weight can create a bold or condensed version and a change in stroke angle results in the italic version. This is why designers get so upset when people add a stroke in FreeHand MX or Fireworks MX 2004 to a letterform to thicken it. A Bold is a thick version of the font and it traditionally looks different from the Roman version. If there is already a Bold version of the font, why aren't you using it? If you were to add a stroke to the Roman to make it bolder, it would be like drawing a moustache on the Mona Lisa.

Three versions of the same font or members of the Times family.

Image 9 - Three versions of the same font, all members of the Times family.

By simply changing the weight of the stroke, a font takes on a whole new voice. Entirely new collections of letterforms can be produced such as the three shown for Avante Garde. This has resulted in a couple of classification standards. In the U.K., fonts contain eight weights ranging from extralight to extrabold. The common standard tends to reduce the numbers by half --light, regular or book, medium and bold.

The stroke weight in the Avant Garde family is the only aspect that changes.

Image 10 - The stroke weight in the Avant Garde family is the only aspect that changes.

This tends to result in a lot of confusion among designers because there really is no universal standard for discussing the variations in type families. Regular, for example, may contain the words Roman, Normal or Book in the font's name. Bold may use Elephant, Heavy or B to denote the weight. An example would be B Avante Garde Bold or Univers 75 Black Oblique. When the proportions of the letterforms change the name indicates that as well. For example Franklin Gothic Condensed or Univers Extended indicate the font's letterforms have expanded or contracted.

Conclusion

In this second installment of this type series, I have moved beyond the generalities of the first article into the specifics of what makes a font work. This anatomy lesson should make you aware of the subtle differences between fonts. I also reviewed measurement, pointing out how fonts are measured and how fine the units of measurement can be. I also explained the impact a font's x-height can have upon a design as well as discussing the origin, use , abuse and confusion around the em quad as it pertains to Cascading Style Sheets.

I finished off by reviewing the difference between a font and a font family. From this, you can see how type designers actually present you with a rather comprehensive and integrated design solution when they produce their fonts.

In the next installment I move beyond the nitty gritty of type and discuss how the proper use of type can actually entice visitors to stay longer and gather even more information than you thought was possible.