1. What is Typography
Typography is the organization of letters to increase legibility (can you distinguish the letters from one another?) and readability (Is the copy easy to read?). Here’s are some fake sushi menus I put together:
We’ve all seen some version of these at some point. The typeface used in the left example is a hard to read creating a legibility issue. Although we can distinguish all of the letters on the right option, it’s hard to read because there isn’t enough contrast in the blocks of text. A menu should be easily scanned.
I redesigned the options with “better” typography, but also with different styles:
A change in typeface can really change the aesthetic of your design. I mentioned earlier about the organization of letters. In these examples:
1. I’ve introduced a grid structure for the type to live.
2. I added contrast within the menu items
3. I brought the prices closer in proximity to the menu items
I can’t say that one is more successful than the other. I think it depends on what makes the most sense for the restaurant. Is it a casual spot or is it fine dining? Let the typography match what you’re trying to communicate.
2. Fonts vs. Typefaces
Typefaces are the main font family. Fonts are the specific set of characters in a typeface. Times New Roman is a typeface. The specific font would be Times New Roman Regular. Other fonts would Times New Roman Italic and Times New Roman Bold.
So why does this matter? You’ll often want to use typefaces with a lot of font styles so that you have more to work with. When choosing typefaces, you have to look at the different font sets within. You’ll run into some issues where the Bold font is too Bold. If I need a headline to be really big, I need a typeface that has a nice Light or even Ultra Light font.
3. Glossary of terms
No one will ever quiz you on this, but it’s important to know. We’re talking about type, so we should speak intelligently about it.
Let me put a couple of these in context for you.
In general, a higher x-height of a typeface makes it more readable at a smaller size. Think your mobile device or even legal copy at the bottom of a poster. The following two examples have different x-heights, but the text underneath is set at the exact same point size. Which is easier to read from the below?
The team of designers that the created Roger Federer logo must have done an extensive pull of typeface specimens. on the R and F. Major bias because I’m a Roger Federer fan, but the logo is a stroke of genius.