{"id":3948,"date":"2012-07-29T14:47:10","date_gmt":"2012-07-29T18:47:10","guid":{"rendered":"http:\/\/chcollins.com\/100Billion\/?p=3948"},"modified":"2022-08-01T07:43:18","modified_gmt":"2022-08-01T11:43:18","slug":"en-font-terrible","status":"publish","type":"post","link":"https:\/\/chcollins.com\/100Billion\/2012\/07\/en-font-terrible\/","title":{"rendered":"En Font Terrible"},"content":{"rendered":"<p><a href=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/al.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3949\" style=\"margin-top: -10px; margin-bottom: -10px;\" title=\"Al\" src=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/al.jpg\" alt=\"The word Al shown in Palatino Linotype\" width=\"121\" height=\"93\" \/><\/a>In my most recent post, I unwittingly confused three-quarters of my readership by including in the title the two-letter word shown at left.\u00a0 This is <em>not<\/em> &#8220;AI&#8221; (Artificial Intelligence) or &#8220;A1&#8221; (as in the steak sauce).<\/p>\n<p>The word is &#8220;Al&#8221; (as in the man&#8217;s name).\u00a0 This is how it looks in Palatino Linotype, the font\u00a0 I selected for titles in this blog.\u00a0 (Text is displayed in a font called Georgia.)\u00a0 Which brings me to the topic of font design, good and bad.<\/p>\n<p>That some letters of our alphabet are easily confused with numbers is a bothersome thing we find out when we begin to read.\u00a0 It has been thus ever since <a href=\"http:\/\/en.wikipedia.org\/wiki\/Brahmi_numeral\">base-ten numerals arose in India<\/a> around 200 B.C.\u00a0 Historians speculate that symbols for 1, 2, 3 and 4 derived from tally marks; symbols for 5 through 9 borrowed the first letter of the name for the number.\u00a0 While we have lived with letter-number confusion a long time, we have had ample time (milennia, no less) to come up with a design solution.<\/p>\n<p>Before we get into this, let me point out that I am a typeface enthusiast.\u00a0 I have not (yet) set out to design my own font, but I have thought about it.\u00a0 I probably picked this up from my father &#8212; I remember the lettering he would sketch, it looked something like this:<\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/collins.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3968\" style=\"margin-top: -20px;\" title=\"Old Style Bold Outline lettering similar to what Howard Collins sketched\" src=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/collins.jpg\" alt=\"Collins Lettering\" width=\"258\" height=\"98\" \/><\/a>Sometimes he would fill in the open faces with red pencil.\u00a0 He had a neat mechanical pencil: one end wrote in black and the other end wrote in red.\u00a0 I wonder where that pencil is now.<\/p>\n<p>Anyway, my father, like all machine draftsmen, used only capital letters when he printed. This sidesteps one source of confusion (upper-case I vs. lower-case L) but does not address other common problems such as letter O vs. numeral 0 and lower-case L vs. numeral 1.\u00a0 Good typeface designers will strive to make such errors rare &#8212; bad designers don&#8217;t care.<\/p>\n<p>Let&#8217;s take a look\u00a0<del><\/del>at how two fonts, Palatino Linotype and Georgia, distinguish upper-case O from numeral 0, and upper-case I vs. lower-case L vs. numeral 1:<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3962\" title=\"Palatino vs Georgia\" src=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/font12.jpg\" alt=\"\" width=\"534\" height=\"149\" srcset=\"https:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/font12.jpg 534w, https:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/font12-300x83.jpg 300w\" sizes=\"auto, (max-width: 534px) 100vw, 534px\" \/>As most fonts do, Palatino distinguishes numeral 0 from upper-case O by making its zero more narrow.\u00a0 Georgia takes a different approach: its numerals 0, 1 and 2 are short, like lower-case letters.\u00a0 Georgia would rather have you confuse its zero with lower-case O.<\/p>\n<p>In both Palatino and Georgia, lower-case L is a touch taller than upper-case I, but the main design cue setting them apart is the shape of the top serif.\u00a0 This is also what distinguishes numeral 1 from lower-case L in most, but not all, fonts.<\/p>\n<p>Some font designers seem intent on providing only the fewest and most subtle visual cues, as you see in the examples below:<a href=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/fonts-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3983\" title=\"More examples of font confusion\" src=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/fonts-2.jpg\" alt=\"More examples of font confusion\" width=\"595\" height=\"264\" srcset=\"https:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/fonts-2.jpg 595w, https:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/fonts-2-300x133.jpg 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" \/><\/a>In Times New Roman and Arrus, one cannot count on letter-height to tell upper-case I from lower-case L from numeral 1 &#8212; it all depends on the shape of the serif.\u00a0 Even then, one must ask why the Arrus lower-case L, with its sloped serif, and the numeral 1, with its nearly horizontal serif, should not in fact be swapped for each other.<\/p>\n<p>When we consider sans serif fonts like Gothic and Humanist, our confusion only worsens.\u00a0 The Gothic725 zero is only slightly narrower than O, while the Humanist521 Extra Bold Condensed zero is almost identical to O.\u00a0 When it comes to upper-case I, lower-case L and\u00a0 numeral 1, the ineptly-named Humanist521 calls for inhuman perception.\u00a0 Its upper-case I is the widest of the three strokes, with a width-to-height ratio of 29.9%.\u00a0 The next widest is numeral 1 at 26.8%; the narrowest is lower-case L at 25%.\u00a0 If these characters appeared in the headline of a typical newspaper story, the difference in width between the widest and narrowest of them would be about 1\/50th of an inch.<\/p>\n<p style=\"text-align: left;\">It&#8217;s a good thing, then, that there are not more newspaper stories about Illinois residents\u00a0 who go bargain-hunting for olive oil:<a href=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/font-3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3986 alignnone\" title=\"ILLINOIS LOVES $10 OLIVE OIL\" src=\"http:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/font-3.jpg\" alt=\"Newspaper headline that illustrates font confusion\" width=\"738\" height=\"109\" srcset=\"https:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/font-3.jpg 738w, https:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/font-3-300x44.jpg 300w, https:\/\/chcollins.com\/100Billion\/wp-content\/uploads\/font-3-640x94.jpg 640w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><\/a>It may be that we cannot design better typefaces, and that we will always have to rely on context to understand half of what we read.\u00a0 Maybe I should have provided more context in the title of my last post, calling it &#8220;Whatever Happened to Al Ray?&#8221;\u00a0 If I had done that, we wouldn&#8217;t be talking about either steak sauce or olive oil today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my most recent post, I unwittingly confused three-quarters of my readership by including in the title the two-letter word shown at left.\u00a0 This is not &#8220;AI&#8221; (Artificial Intelligence) or &#8220;A1&#8221; (as in the steak sauce). The word is &#8220;Al&#8221; &hellip; <a href=\"https:\/\/chcollins.com\/100Billion\/2012\/07\/en-font-terrible\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[],"class_list":["post-3948","post","type-post","status-publish","format-standard","hentry","category-interests"],"_links":{"self":[{"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/posts\/3948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/comments?post=3948"}],"version-history":[{"count":38,"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/posts\/3948\/revisions"}],"predecessor-version":[{"id":28382,"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/posts\/3948\/revisions\/28382"}],"wp:attachment":[{"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/media?parent=3948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/categories?post=3948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chcollins.com\/100Billion\/wp-json\/wp\/v2\/tags?post=3948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}