Let’s talk about one of the basic building blocks of design—typography. Unless your design is going to feature no text at all—then typography is something you’re going to need to consider.
Typography can be defined as “the art and technique of arranging type to make written language readable and appealing.” In our context, it is about taking the text you need to communicate and making sure it is readable, understandable, appealing, and helps convey the tone and vibe of the design.
Let’s look at some specific aspects of typography.
Typeface (or Font)
We’ll start by clearing up some terminology. The term ‘typeface’ refers to the design of a certain set of letters. ‘Font’ refers to the digital file that resides on your computer (or a server somewhere) which displays that typeface onscreen (or tells the printer what to print) [More information on the difference between fonts and typefaces].
Typefaces can be very powerful in conveying tone and mood—so they must be selected with care and consideration. Sometimes typefaces have ties with a particular historical style or period. This may be overt like novelty typefaces made to evoke the circus or the wild west. But it can also be seen in typefaces that mimic metal engraving (Copperplate Gothic) or ancient roman tablets (Trajan Pro). Even though the person viewing your design may not know the historical significance—there is still a certain amount that is conveyed just by the way it looks.
Certain styles of typeface also communicate in a certain way. Typefaces which are very geometric and rigid (like Futura or Univers) can be a little sterile and lacking personality. Whereas a typeface with a few more quirks in it (like Gill Sans or Franklin Gothic) can come across as friendlier.
Generally speaking, bolder typefaces can come across as more domineering and lighter (thinner) typefaces are a little more easygoing and relaxing. Serif fonts can convey a more classic feel, while sans serif fonts generally come across as a little more modern.
Also—try to only use 1 or 2 different fonts in your work. Too many can start to look confusing and complicated.
Type Size & Hierarchy
Type size can be used within a design to give importance to different sections of text—forming a hierarchy. Try to give the most important messages in your the largest font size in order to give it the most visual significance (you can also place more space around it, but that’s for another article…).
When using different type sizes for hierarchy, try and make sure the sizes are different enough the easily distinguished, and try to keep the number of different sizes below 4. This allows you keep things neat and organized while still giving different bits of type different importance.
You might worry that only using one or two typefaces means that everything is going to look the same in your design, but it doesn’t have to be that way. There are other ways you can introduce variety and contrast in your type.
Changing the color tone (or brightness) of type can make it appear more or less significant in the design. You can also use variants like italicized text or setting type in ALL CAPS to provide variety (but please only use caps for headings, never for long blocks of text).
The most important thing about your use of type is that the message in the design needs to be readable. If people can’t read and comprehend the text, it is going to be hard to communicate what you need to.
Some great tips for readability include:
- Keep the width of blocks of text to 50 – 60 characters (letters).
- Justified text is usually best to be avoided (unless you hyphenate text).
- Always leave more spacing between lines of text (usually about 1.5 lines) than you think you need.
- Try to keep type at least 12pt (in print) and 16px (on the web) to keep it readable.
Always remember that the type you use in a design does a lot more than just contain the words. It is something that needs to be considered and used carefully to make sure it enhances your message, rather than taking away from it.
Here are some extra resources that may help:
- Fonts & Feelings: Typography Psychology [Infographic]
- The Art of Mixing Google Font Typefaces [Infographic]
- The Art and Science of Combining Fonts [Infographic]
- Serif or Sans-Serif?
- 10 Cats as Fonts