{"id":101,"date":"2016-10-04T09:06:46","date_gmt":"2016-10-04T09:06:46","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=101"},"modified":"2020-06-30T15:11:04","modified_gmt":"2020-06-30T15:11:04","slug":"choose-a-typeface-wisely","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/choose-a-typeface-wisely\/","title":{"rendered":"How to Choose A Typeface Wisely"},"content":{"rendered":"

Recently, the typeface of Samsung Galaxy Note 7\u2019s logo really caught my attention. Its lower case letter \u201ca\u201d is so similar to its lower case letter \u201co\u201d. It reminds of the typefaces Futura and Century Gothic which people sometimes mistakenly use for body text.<\/p>\n

\"The
The letter “a” and “o” in the logo of Galaxy Note 7 are very similar in terms of shape.<\/figcaption><\/figure>\n

Typography plays such an important role in visual design that having a good understanding of it can really set your design apart from the crowd. Today I would like to share some insights on choosing appropriate typefaces.<\/p>\n

<\/p>\n

Two Criteria<\/h3>\n

When it comes to choosing typefaces, there are two criteria I focus on.<\/p>\n

1. The personality of the typeface<\/h4>\n

What I am referring to here is the shape or the design of the letters themselves. For body text, the forms of letters should not be too extreme or exaggerated. Because body text usually occupies a large proportion of the page or the screen, if the letter shapes are too eccentric or have too much “personality”, the eyes will be drawn to the letter themselves instead of the content, and it will negatively affect the reader\u2019s flow.<\/p>\n

\"Typefaces
This block of text is hard to read because the typeface used here has too much \u201cpersonality\u201d. There is too much going on in the letters themselves.<\/figcaption><\/figure>\n

In the article “What\u2019s the right typeface for text?” in “Before & After”, John McWade mentioned his criterion on choosing a typeface for text: Medium, which includes medium x-height, medium contrast of stroke width, medium height-to-width ratio etc.<\/p>\n

\"Bodoni
Bodoni might not be a good choice for body text because it has a high contrast in stroke width. Also its thin serif can be washed out if the text is too small. That’s why you will often see Bonodi used in big heading in fashion brand. (Source: Wikipedia)<\/figcaption><\/figure>\n

If you already have some knowledge about typography, these concepts can help you identify an appropriate typeface in a more precise way. However, even if you are not familiar with these terms, you can still choose an typeface wisely by asking yourself, “Does this typeface look clean, humble and straightforward enough that I can use it on a whole page of text without overwhelming the reader?”<\/p>\n

\"Minion
Minion Pro is a good example of a “medium” typeface. It doesn’t draw attention to itself and allows the reader to read the content smoothly and comfortably. (Source: Wikipedia)<\/figcaption><\/figure>\n

These rules can be broken when it comes to heading and logo. In these situations, readers usually do not need to read a large block of text. Instead, they focus on a few phrases or even a few letters. This is the time when the \u201cpersonality\u201d of the typeface should really shine, drawing the viewer\u2019s attention and bringing the context, the mood, the atmosphere, or even the brand to life. That\u2019s why in a well-designed logo, you won\u2019t see a \u201cmedium\u201d typeface being used very often. However, if the heading is long, it is still better not to use a typeface that\u2019s too eccentric to ensure a smooth reading experience for the reader.<\/p>\n

If the body text is set to a small size in your document, choose a typeface that has a slightly larger x-height so that the letters themselves will be more legible. However, the x-height should still be within the medium range so as not to compromise readability. (Larger x-height implies shorter ascenders and descenders, and ascenders and descenders can help distinguish letters from one another and create contours for words.)<\/p>\n

\"Helvetica
Helvetica Neue has a relatively large x-height and can be used in body text even if the font size is a bit small. (Source: Wikipedia)<\/figcaption><\/figure>\n

2. The level of difference between the letter forms of the typeface<\/h4>\n

The more different each letter is, the easier it is for the brain to tell them apart. This is important because these differences can help the reader recognize words faster in a paragraph. However, the level of difference should not be too extreme, otherwise, the first rule we just mentioned here will be broken and readability will be reduced.<\/p>\n

The reason why using Futura or Century Gothic for body text is not a good choice is because the letters \u201ca\u201d and \u201co\u201d have a very similar circular shape. The tail of the letter \u201ca\u201d in Futura and Century Gothic is so subtle that it is hard to distinguish it from the letter \u201co\u201d. Both \u201ca\u201d and \u201co\u201d are frequently used letters. It makes the readers more difficult to read the paragraphs if they are set in Futura or Century Gothic.<\/p>\n

\"(Source:
(Source: Wikipedia)<\/figcaption><\/figure>\n
\"(Source:
(Source: Wikipedia)<\/figcaption><\/figure>\n

According to this principle, is it a good choice to use Futura or Century Gothic on transport signage, like the one shown below?<\/p>\n

\"Road
Road sign of Transport Department Licensing Office in Hong Kong. (Source: Google Maps)<\/figcaption><\/figure>\n

The answer is no, because we don\u2019t want the drivers to spend time recognizing each individual letters. We want them to focus on driving to avoid accidents. We need to choose a typeface that can enable them to quickly read the signage.<\/p>\n

Take a look at the typeface \u201cTransport\u201d designed for road signs in the UK. Do the letters \u201ca\u201d and \u201co\u201d look similar to each other? How do you feel when looking at it compared to Futura or Century Gothic?<\/p>\n

\"In
In the typeface Transport, the shapes of letters “a” and “o” are so different that you can easily tell them apart. (Source: Wikipedia)<\/figcaption><\/figure>\n
\"OLYMPUS
Transport used on a road sign (Source: Wikipedia)<\/figcaption><\/figure>\n
\"Problematic
Problematic pairing of a gothic Chinese typeface that is suitable for body text with an English typeface that is not suitable for body text.<\/figcaption><\/figure>\n
\"Problematic
Problematic pairing of a gothic Chinese typeface that is suitable for body text with an English typeface that is not suitable for body text. (Source: Wikipedia)<\/figcaption><\/figure>\n

Once again, this rule can be relaxed when it comes to heading and logo for the same reason mentioned before. So if you want to use Futura or Century Gothic, use them wisely. Refrain from using them in large blocks of text and let them shine in heading and logo.<\/p>\n

Conclusion<\/h3>\n

When it comes to body text, like John McWade said, choose a typeface that\u2019s \u201cmedium\u201d. For headings, a little personality can draw the reader\u2019s eyes and help locating content. However, too much personality will still interfere with the reader\u2019s flow if the heading is long. For logos, because the font size is usually big and there are usually at most a few words in it, show off your brand\u2019s uniqueness by choosing a typeface that has \u201cpersonality\u201d, it can really draw the viewer\u2019s eyes and doesn\u2019t really hurt the flow.<\/p>\n","protected":false},"excerpt":{"rendered":"

Recently, the typeface of Samsung Galaxy Note 7\u2019s logo really caught my attention. Its lower case letter \u201ca\u201d is so similar to its lower case letter \u201co\u201d. It reminds of the typefaces Futura and Century Gothic which people sometimes mistakenly use for body text. Typography plays such an important role…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87],"tags":[15,13],"class_list":["post-101","post","type-post","status-publish","format-standard","hentry","category-visual-design","tag-design","tag-typography"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":31,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":177,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/101\/revisions\/177"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}