Tag: fonts
I break for descenders
Notice anything interesting about the sentence in this screenshot? Yes, it contains every letter in the English latin alphabet. Incidentally, it is set in Lucida Grande regular typeface. But what’s interesting about it, to me, is how the underlining breaks around the descenders— those tails of the letters q, j, p, y, and g that "descend" below the baseline.
I learned a long time ago that professional typography calls for minimal use of underlining, and when you must underline, you should place the underlines by hand so that they break before and after descenders. That way, you don’t get aesthetically displeasing line crossings on the letters.
What I didn’t know was that Mac OS X’s TextEdit program automatically breaks underlines before and after descenders. I don’t know when this feature was added, but I never noticed it before now. It’s great that there’s a program that automates the breaking of underlines so that they don’t cross descenders. It’s interesting to me that TextEdit — a program that comes with the Mac OS — does this, but Pages, a more advanced text editing and layout application, does not. I think it would be a good thing if Pages would offer all the features that TextEdit offers. Perhaps they will integrate Pages more with the Mac OS X font panel in the next version. I notice you can use the font panel to choose fonts and styles in Pages, but the underlining does not break around descenders in Pages the way it does in TextEdit— or MacJournal, for that matter, which integrates with the Font Panel as well as TextEdit does.
Am I missing something? Does Pages ’09 automatically break underlines around descenders? Are there other word processing programs that do? I would love to hear more about this from your experience.
Why are there nearly identical fonts?
I learned from the movie Helvetica that the reason Arial is nearly identical to Helvetica is that Microsoft didn’t want to pay license fees to distribute the Helvetica font so they hired Monotype to modify Linotype’s Helvetica slightly. They just made sure to keep the same font metrics so that a document written in Helvetica would have the same layout and pagination in Arial and vice versa.
But I don’t always understand why there are other fonts that are nearly identical but with different font metrics and/or line spacing; for instance, why are Monotype Corsiva and Apple Chancery so similar? Is it because Apple wanted their own copyright on a font similar to Monotype Corsiva? And why are Bordeaux Roman Bold LET and Monotype Onyx so similar? Is it because Microsoft commissioned Monotype to create Onyx in 1992 after LET created Bordeaux Roman Bold in 1990? Or is there just a “me too” factor involved, in which each foundry wants a product to fulfill similar demands?
I’ve spent some time looking at the differences and similarities, and I’ve noticed that Bordeaux Roman Bold has ligatures and a more extended character repertoire than Onyx, though Onyx is a bit bolder and easier on the eyes. Also, I like the tighter line spacing of Onyx. So it’s a hard to choose a favorite between Bordeaux Roman Bold and Onyx. It’s easy to pick Apple Chancery over Monotype Corsiva because Apple Chancery has a beautiful set of of both common and rare ligatures, more calligraphic letters (especially the slashed dot on the lowercase i), and a much larger character repertoire than Corsiva. When it comes to extended characters, Times New Roman beats Times, but I’ll choose Times almost every time because of its pretty ligatures. If I needed to format a text with rarer characters, though, I would choose Times New Roman. As with the choice between any two similar fonts, it comes down to the application— how many extended characters do you need for what you want to write?
And speaking of fonts whose names have “new” (or “neue”) in them, I’ve found that a “new” version of a font doesn’t always have more characters than the original. While Times New Roman and Courier New have more characters than Times and Courier, Helvetica Neue has a much smaller repertoire of characters than Helvetica. But then Helvetica Neue has all those lovely weights and widths, so it all depends…
Do you know more about the history behind fonts that are nearly identical? If so, please leave a comment and share the knowledge. Thanks!
Fonts with Descriptions
I recently reviewed all the fonts on my computer that had embedded descriptions, and I typeset the descriptions in their respective typefaces. The result is a demonstration of the typefaces and their history, features, and uses. To view these font descriptions in their proper typefaces you must have the fonts installed and enabled on your computer. To see the ligatures you will have to use a browser that supports them (Firefox 3.5 and later does). For the truest view, see Fonts with Descriptions (PDF). Below is the document in HTML format.
Notes on the Making of this Document
At the end of each font description quoted, I add information about the styles available in that font family, and I typeset each style name in its respective style; e.g., italic is in italics. I also add information about typographical features along with demonstrative samples.
These fonts vary in size even at the same point sizes. I could have normalized the sizes, but I decided to leave them as is so you could see what their relative sizes are. I did not specify anything special in the formatting except that I found that I had to give the Zapfino font a 300% line-height so the descenders wouldn’t collide with the ascenders.
To learn about the fonts installed on my computer (Mac), I opened the Font Book application and selected the “Show Font Info” command in the View menu while previewing each font. I learned that most of the fonts on my Mac do not have descriptions, but the ones that do offer some interesting historical and usage tips. I also learned is that Microsoft made a typographical leap when they came out with Windows Vista. I was not aware of all the advanced typographical features in their core fonts Calibri, Cambria, Candara, Consolas, Constantia, and Corbel, and I must say I am impressed.
A note to Bitstream, International Typeface Corporation, Linotype Microsoft, Monotype, and Neufville Digital: I do not intend any copyright infringement by displaying these fonts and their descriptions. Please write to me if there is anything I need to add or remove from this document. Thank you for all your good work!
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).