Psychologists have proven that typography has a significant measurable effect on the influence and interpretation of your written copy. With this in mind, typography could be the most important part of any design, and it should be chosen purposefully and pragmatically — not based on the whims or personal preferences of any designer. You could have beautiful images and a great layout, but if you choose the wrong typeface, it can ruin the entire design.
Even viewers who know nothing about typography can have a subtle, subconscious reaction to poorly-chosen type. Wouldn’t you do a “double-take” at a design with serious subject matter conveyed through Comic Sans? Making the right choices with type isn’t rocket science, but there are some universal considerations that will help you make pragmatic typography choices with your design’s greater purpose in mind.
The typeface must match the subject and overall setting, or it can create confusion and dissonance within the mind of the viewer. For example, if you are creating a brochure for a cutting-edge technology company, you obviously wouldn’t use an old english or blackletter font as your display typeface. It just wouldn’t make sense. Instead, you would most likely choose a smooth, sans serif typeface, possibly with thin strokes, that offers a subtle conveyance of the purpose and principles of the company: organization, efficiency, modernity, and innovation.
A second and equally-important consideration is readability. If there’s even the slightest doubt about readability, then just don’t use the typeface. For every viewer that appreciates the artistry of a hyperstylized-but-impractical typeface, there are many more who just didn’t get the intended impression from your carefully-crafted words. If you use a typeface that is tough to read, most people won’t bother struggling through it and will simply turn their attention elsewhere. Choose a typeface that strikes a solid balance between positive and negative space. If you don’t, parts of lettering will bleed into others and words will easily be misread, causing confusion. For body copy, don’t use overly thin fonts, which can strain the eyes at small sizes. Reading your copy should be effortless and enjoyable.
The best font choices have variations. Different weights and styles are important and useful tools to strengthen your design and highlight the relative importance between various headlines, titles, and callouts. The best typefaces (and accordingly the ones I use most often) have italic, bold, and bold italic versions. I love a typeface that has a light, medium or Roman, Semi Bold or Demi, and Bold version, all with italic equivalents. This gives me so many options for creating deliberate emphasis where it’s needed. For example, if I have a few paragraphs of body copy, I may place a block quote or a testimonial in the design to break things up, add credibility to the design, and offer an excerpt or summary for busy, distracted, or “skimming” readers. This is a common practice, especially on websites.
Having varying weights within a typeface adds even more options for creating depth and hierarchy within your type. In the image above, you can see that using bold for a main headline, thin for a sub head, and then medium for your text is a practical way to organize your lettering. It creates a visually diverse layout while providing a great deal of structure and organization at the same time.
Resist the temptation to fill all available space. I can’t stress enough that you need to give your type ample breathing room. If you have a headline, give it plenty of surrounding space before your body copy starts. This conveys the necessary importance to the headline, much like art galleries and jewelry displays have generous amounts of space encompassing their artworks. Similarly, if it is possible (sometimes we do have space constraints), there should be a decent amount of space between each line of text. This is called leading. The general rule is: take the point size of your text and add 20% to that value in order to arrive at the value for the leading. For example, if your type is 12pt, then you would add 2.4 (20% of 12) to get 14.4 as the value of your leading.
Spacing shouldn’t solely exist between the letters, the words, or even lines of text. You also want to give each block of text plenty of margin space, which is the space around all four sides. You don’t want text to be too close to any edge, because it can get cut off (literally), especially in print design. If you are creating your design for print, you should have at least a fourth of an inch of margin space between your text and the absolute edges of your design. If your design is being trimmed, you’ll need 1/8th of an inch of that space for possible removal in trimming.
Color and type are often considered two entirely separate considerations, and it would certainly be easier to make isolated choices for each without considering the other. But, an astute designer will make coordinated decisions for each. The most important aspect of type color choices is contrast. You wouldn’t put white type over a light blue or yellow. You also have to take into consideration any imagery that is behind your text, which can offer a wide variety of contrast (and contrast problems) depending on the positioning of the overlay. You may have to add a drop shadow to text in order to make it stand out from a background image that doesn’t offer enough contrast. (Not all drop shadows have to be black.) These techniques go back to the legibility discussion from earlier; if your audience can’t read it, what is the point of making stylistic choices that don’t improve readability?
If you keep these practical guidelines in mind when making type choices, your work will turn out much better, you’ll likely avoid frustrating yourself with imperfect typography, and your clients message will be communicated more powerfully and effectively. I wouldn’t think of them as constraints; instead, I’d consider them a way to plot a direct path toward winning typography instead of stumbling upon it somewhat randomly after a long, unnecessary trial-and-error process. Having a good mix of all of these principles will ensure that your design turns out well in the fewest possible iterations.
Do you have any tips for making purposeful, practical choices with type? If so, leave your thoughts in the comments section below.
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Designing UX: Forms
Jump Start Sketch
The Ultimate Guide to Prototyping
- 1 Using White Space: How Emptiness Can Give So Much to Design
- 2 3 MORE Clever Psychology Rules for Making Better UX Decisions
- 3 Type Nugget: Good Typography is About Finding the Right Playground
- 4 8 Distinctive Headline Fonts to Make Your Content Sizzle
- 5 How to Find Cool, Quirky, Copyright Free Photos on Flickr