Choosing the right font styles & variants

for beautiful, readable documents

I’ve spent the last few days in my spare time learning and re-learning about choosing the right fonts, styles, and variants for writing and reading. Since other Web authors have taught me so much and answered so many of the questions I pose to Google, I like to give back by sharing what I’ve learned with others. Allow me to distill hours of my research into minutes of your time.

I’ve been puttering around with fonts again ever since I got an eBook reader and started noting the lack of advanced typography in eBooks of the ePub format. I also started to think about tinkering with ePubs to improve their readability or even publishing my own texts in the ePub format. One of the places I went to read and discuss typography in eBooks was the MobileRead Forums. Another place I learned a few things about fonts was Ralf Herrmann’s Typography Weblog, which turned me onto this funny video about some of the fonts we all know and love.

Avoid fake styles & variants

Having worked with both Mac and Windows operating systems, I think it’s fair to say that Macs support more typographical features than PCs. One of the ways in which the Mac OS differs from Windows is that it uses italic and bold fonts within a font family, rather than visual tricks, to render italic or bold text. If a font family does not contain an italic or bold font, then native Mac programs like Text Edit and Pages will not slant or thicken the font to make it look italic or bold. Likewise, if there is no small caps variant in the typeface, native Mac apps will not transform the text to small caps. This is because typographers know that a regular font that has been forced into italics, bold, or small caps does not look as good as a true italic, bold, or small caps font. Real italic, bold, and small caps fonts are carefully designed for readability and aesthetics; they are not just regular fonts that have been slanted, thickened, or shortened. To see the differences for yourself, you can read a book about typography or check out the links at the end of this article.

Whether you have a Mac or a PC, you should take a good look at the fonts on your computer and see which ones have italic / oblique, bold, bold italic / oblique, and small-caps variants. For the best-looking documents, you should use these real fonts rather than letting a program force fonts into styles they weren’t designed for— a process called font fauxing. Incidentally, while writing this blog post and previewing it in Safari, I also noticed that the browser forces regular fonts such as Lucida Grande to slant even though the font family contains no italic or oblique fonts.

Beware the regular-only font family

The downside of Mac typography is that if you change the font family for a block of text containing italic or bold styles to a font family that has only a regular font you will lose all formatting in your text. Therefore, it helps to learn your fonts and be careful not to change the font of running text including italics and bold to a font with only a regular variant. You have to be especially careful with such beautiful Roman serif typefaces as Big Caslon and New York, because they only have a regular style. Also be careful with popular sans-serif fonts such as Arial Unicode, Comic Sans MS, Geneva, Lucida Grande, and Microsoft Sans Serif, because Arial Unicode and Geneva only have a regular style and Comic Sans, Lucida Grande, and Microsoft Sans Serif only have regular and bold style. One of the tricks I’ve used this week to avoid wiping out all my emphasized and strong styles is to disable fonts that have only regular variants. To do this, I went to Font Book, selected all fonts, hit the right-arrow key to expand all, and then I dragged all the font families that had only Normal, Plain, or Regular fonts into a Collection called Display / Fantasy (because some typographers call these display fonts and in Cascading Style Sheets language they are fantasy fonts). With the Display / Fantasy Collection selected, I selected Edit from the menu bar and then Disable “Display / Fantasy”. I do this because, for the kind of writing and reading I do, I rarely if ever need to use display or fancy fonts. I like disabling all the others because, when I’m writing in Pages and I bring down the Fonts list, only the fonts that are useful to me will appear in a short list, and I’m in less danger of wiping out the bold and italic / oblique fonts in my styled running text. One note of caution, however: Geneva and Lucida Grande are essential system fonts that cannot be disabled, so be careful not to change stylized text to these fonts.

It’s okay to fantasize

Dr. Ruth was right. Sometimes Fantasy fonts are just the thing. When I want to type a letter that looks handwritten, I’ll use a cursive or script font. When I create a party invitation or welcome sign, I’ll use a fun font like Curlz MT or Party LET. When I make a flier or newsletter, I’ll use a fancy or stately font like Braggadocio, Luna ITC TT, or Princetown LET. All I have to do when I create documents like these is disable the Collection I call Versatile (those font families with regular, italic / oblique, bold, and bold italic / oblique) and enable my Display / Fantasy font Collection and I have a short list of just the fonts I need for the project at hand.

When Black is better than Bold

For headlines and headings, the Black fonts such as Arial Black, Gill Sans Ultra Bold, and Rockwell Extra Bold are better than simply using bold fonts at larger sizes. They are especially designed for headings, whereas bold fonts are designed for emphasis in running text. In addition to Black, Extra Bold, and Ultra Bold fonts which are designed to look better for headings than bold fonts at large sizes. Likewise, special regular-only fonts such as Big Caslon, Cooper Black, Impact, and Perpetua Titling MT are designed to look great at large sizes of 72 pixels or greater.

Every family has special characters

Something I learned while typing this post is that all font families have some special characters, but not many have a lot of them. If the font you’re working with doesn’t contain an extensive repertoire of special characters, you won’t be able to enter those characters into whatever you’re typing in that font. You might be able to insert the characters with another font, but that won’t likely look as good. Since I did my research while writing this blog post, I’ll share with you in a moment a list of the fonts on my computer that have a lot of special characters. There are two ways to discover this: one is to open Font Book and select Preview from the menu bar and then select Repertoire from the list. Another is to type some custom text including the characters you want to test for. My custom text is the following, because I want to see every letter of the alphabet and all whole numerals as well as common and rare ligatures and special characters. Here’s my custom text:

The quick brown fox jumps over the lazy dog. Affluent office file floating system selections. 1234567890 98° Nº 5′ 2″ 3² 4³

The right fonts for the job

Here is a list of the fonts on my computer (and probably yours too) that have a decent repertoire of special characters. Some of these font families only have a regular font while others have a complement of regular, italic (or oblique), bold, and bold italic (or bold oblique) fonts. The font families listed in bold have extensive character repertoires. The fonts with an asterisk after its name are the only ones that contain ligatures (which I will explain in a moment).

• Arial: Regular, Italic, Bold, and Bold Italic
• Arial Black: Regular
• Arial Narrow: Regular, Italic, Bold, and Bold Italic
• Arial Unicode MS: Regular
• Comic Sans MS: Regular and Bold
• Courier: Regular, Oblique, Bold, and Bold Oblique
• Courier New: Regular, Italic, Bold, and Bold Italic
• Geneva: Regular
• Georgia: Regular, Italic, Bold, and Bold Italic
• Helvetica: Regular, Oblique, Bold, and Bold Oblique
• Impact: Regular
• Lucida Grande: Regular and Bold*
• Menlo: Regular, Italic, Bold, and Bold Italic*
• Microsoft Sans Serif: Regular
• Monaco: Regular
• Tahoma: Normal and Negreta
• Times New Roman: Regular, Italic, Bold, and Bold Italic
• Trebuchet MS: Regular, Italic, Bold, and Bold Italic
• Verdana: Regular, Italic, Bold, and Bold Italic

Microsoft Core Fonts for the Web

I suppose I shouldn’t be surprised to see that most of the above fonts are among Microsoft’s “Core Fonts for the Web” that they distributed back in 1996 when the World Wide Web took off, and being worldwide, the Web contains pages with many different languages and special characters. These “core Web fonts” comprised Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, and Webdings. You probably already have these font families on your computer in a newer version than those given away free by Microsoft in the ’90s. Microsoft stopped distributing these fonts in 2002, but you can still download Microsoft core fonts legitimately if you don’t already have them.

Lucida Grande, Queen of the Web

After all I said about using real bold, italic, and small caps fonts, I can see now why WordPress’s default “Kubrick” style sheet specifies Lucida Grande as its typeface. Lucida Grande may not contain any real italics or small caps, but it has both regular and bold styles, it boasts one of the largest character repertoires out there, and it features ligatures that help move the eye from one letter to another— something serif fonts were designed to do for print media.

If you’re using a browser that supports ligatures, such as the latest versions of Camino, Firefox or any browser in the future that does—and if your browser preferences allow you to view the fonts suggested by web pages rather than your own fonts—then this page should display the Lucida Grande font with ligatures [at time of writing]. Take a look at my custom text sample once more. Can you see ligatures; that is, single characters tying together multiple characters such as fi, ff, ffi, fl, or ffl?

The quick brown fox jumps over the lazy dog. Affluent office file floating system selections. 1234567890 98° Nº 5′ 2″ 3² 4³

If you have a Mac and want to see even more coolness with ligatures, try this: copy the above text and paste it in Text Edit. Hit Command+A to select all, and hit Command+T to bring up the Fonts HUD. Pick the Hoefler Text font, select the gear icon on the lower left, select Typography, and select Rare Ligatures. You should now see the rare ct and st ligatures in the words “system selections.” (Actually, a typographer can really go to town with Hoefler Text because it has all kinds of old style swashes, etc. Unfortunately, the font does not contain the single and double prime characters or a super extensive character repertoire.)

Lucida Grande for emphasis / strong emphasis

If you write your own CSS (Cascading Style Sheets) and you choose to suggest Lucida Grande, you may want to use the following styles for emphasized and strong text:

em { font-weight: bold; }
strong { font-weight: bold; letter-spacing: 0.2em; }

Which would look like:

It is of utmost importance that you never put your hand down a garbage disposal when it’s running.

That way, you are only styling your text with real fonts rather than forcing the Lucida Sans typeface to be slanted when it does not contain a true oblique or italic font. And the “strong” text will stand out from the “emphasized” text in an obvious way without resorting to underlining, which is a holdover from typewriter days and was never used in traditional typesetting. (If a typographer wants to underline something, they will place a line under only the letters not containing “descenders” such as g, j, p, q, and y, because it doesn’t look good when underlines cut through descenders.

You’re never too old to learn something new

I myself learned a few new things this past week by reading (some parents might not want their kids reading the irreverent language in this one) Ten typographic mistakes everyone makes. For instance, I learned that straight single and double quotes are not the appropriate markers for feet and inches; rather, single and double “primes” are the right characters to use. Instead of writing that a woman is 5" 2", we should write that she is 5′ 2″. I also learned that instead of writing 90º we should write 90°. You might not notice the difference unless you are using a certain font or large size, but the first one is a true degree sign and the second one is actually a masculine ordinal indicator such as that used in Chanel Nº 5, the Nº being an abbreviation for Numéro. (Do as I say, though, and not as they do, because they used the degree sign instead of the masculine ordinal indicator. I guess it just goes to show that these really are typographic mistakes that “everyone” makes.) To enter the degree sign on a Mac, hit Alt+*. On a PC, you’re probably going to have to hit Alt+ some number or copy it from the Character Map utility. To enter the single and double primes on a Mac, there are no keyboard shortcuts, but I’ll tell you what you can do: copy the characters from this web page and paste them into the search field of the Special Characters HUD found by going to Edit, Special Characters in any Mac app. Once you find prime and double prime, add them to your favorites by hitting the down arrow on the gear icon button on the bottom left corner of the HUD (heads up display). From then on, you only have to click on the Favorites tab at the top of the HUD and double click the character you want in order to insert it at the point where your cursor is in the text you’re typing.

Bibliography

Here are some web pages you might want to check out: about true italics vs. fake italics, about true bold vs. fake bold, and about true small caps vs. fake small caps. If you write your own CSS style sheets, you might want to check out this page about choosing the right font-family (oddly, it doesn’t mention CSS, but it does give an overview of the five font-families in the CSS specification—that may be because font-families were around before CSS codified them).