Typography is more than just picking a font and a point size from some drop-down menus on your computer.
It`s an art and a skill whose history goes back centuries, to the wooden and metal type used with printing presses. And while we can learn from typography`s long legacy, most of us could also use a few practical tips on how to help our type look better in everyday projects like resumes, newsletters, or business cards.
Is that you? Then you`re in the right place. This article will walk you through 10 tips and tricks for improving the way you use fonts in your design projects. Let`s get started!
01. Match the Mood to the Message
Think one font looks more or less like the next? Or maybe you have a favorite font that you use every chance you get. In either case, you may not be getting the most out of your font choices.
That`s because every typeface has its own mood or personality. Maybe it`s friendly, fancy, serious, or silly. But most fonts aren`t one-size-fits-all, so you`ll need to determine what a particular font is saying to you, and whether that fits with your design. A good way to do that is to brainstorm some of the qualities or characteristics that you want your design to communicate. If you have your content planned out ahead of time, even better-you`ll be able to match up your font choices with the tone already established in the text.
Type designer Eben Sorkin puts it this way: each typeface has its own voice. This voice influences how we feel about the text we`re reading, but also how we`re able to absorb and process information:
"It can also be a powerful force for making text communications of all kinds more effective and persuasive..when the personality of the font you use matches the personality of the text, people are able to read that text more quickly and easily. When it doesn`t, it`s jarring and slows them up. The easier we make it for visitors to read, the more likely they are to find what they were looking for, click, buy and/or return [or follow through on whatever the purpose of the design happens to be]."
A few quick examples:
A vintage-yet-modern combination of fonts for a haircare product based on a recipe from "a bygone era."
A minimal, Swiss-inspired design aesthetic and type treatment for a back-to-the-basics product.
Type choices that communicate history and craftsmanship-a visual match for both the words being spelled out and the overall branding of the business.
Classic-looking serif typefaces seem fitting for the blog of a traditional book publisher that`s been around since 1925, but the fonts` readability, clarity, and approachable design qualities give them a modern edge and make them practical for web use.
02. Match the Mood to Your Audience
So you`ve picked out a font that you think perfectly complements the purpose of your design. Great! There`s only one problem. not everyone will interpret the mood of a font in the same way. After picking a font that suits your design, you`ll want to also make sure that it`s a match for your audience.
One group might see a font as trendy, while another sees the same typeface as dated. That`s because the way we perceive fonts is largely influenced by cultural associations, which are linked to both age and location. So being sensitive to perspective of the demographic you`re designing for-and getting a second opinion from someone who`s in that group if you`re in doubt about your font choice-will be important for making your typography as effective as possible.
But what if you`re working on a design that needs to communicate to a wide range of people, rather than a specific audience? You may want to opt for a more neutral typeface, one that doesn`t have an obvious personality, but instead blends into its surroundings. These types of fonts, sometimes referred to as "workhorse" typefaces, are usually basic serif or sans-serif fonts that can be used pretty much anywhere because they don`t draw a lot of attention to themselves.
The most useful sort come in a variety of weights (such as light, regular, medium, bold, or heavy) and styles (such as narrow, condensed, extended, or small caps). We`ve recommended a handful of free, neutral typefaces over on The Design School`s fonts category page (where you`ll also find other great typography-related resources!).
03. Match the Font`s Point Size to the Design Context
When choosing and arranging fonts in a design, good readability should be one of your first concerns. You don`t want to frustrate your audience by making text too small to read easily-or annoyingly large, for that matter. As a general rule of thumb, body text should be between and 10 and 12 points for print projects, and 15 to 20 pixels on the web (most browsers` default text size is 16 pixels). The ideal size may fluctuate a bit depending on the characteristics and structure of a particular typeface.
What about other types of text not intended for reading at length? You should try to use the context of the design-it`s physical size and/or how it will be presented or displayed-along with some common sense as a guide. Smaller projects (like business cards, for instance) or lengthy passages of text will call for smaller-sized fonts, but these fonts will also need to be clear and easy to read rather than decorative.
Larger projects like posters can handle sized-up fonts because there`s more space to work with and people will generally view these designs at a distance. With projects that have relatively little text, depending on the context and audience, you may have the potential to get a little more creative and stylized with your font choices.
04. Set Up a Hierarchy
When a design has good hierarchy, it`s well organized, easy to navigate, and simple to find the information you need. Typographic hierarchy is particularly important for text-heavy designs such as newsletters, magazines, books, and other traditional print publications, as well as some websites.
The basics of setting up a hierarchy in your design involve the following:
- Using text size to prioritize information by importance
- Using sufficient spacing to create an easy-to-scan structure
- Grouping related items together
- Including clear sections (with headings, subheadings, etc.) when applicable
For an in-depth look a typographic hierarchy, make sure to check out Why Every Design Needs Three Levels of Typographic Hierarchy.
05. Don`t Neglect Spacing and Alignment
The details can make (or derail) a design. And some of the details that have the most impact in a design are spacing and alignment. They can make the difference between a confusing, cluttered design and a clean, orderly one.
Let`s review some of the most common types of spacing first:
Tracking: Also called letter-spacing, this is the consistent amount of horizontal space between all the letters in a passage of text-perhaps a sentence or a paragraph. Adjusting this setting will make your text look tighter or looser overall. Decreasing the tracking is a common technique for saving space in a design, but that can make for difficult reading. Finding a happy medium (neither too tight nor too loose) that works with your font choice is the best way to preserve readability.
Leading: Also called line-spacing, this is the vertical space between lines of text. Like with tracking, going too extreme in either direction can make for hard-to-read text and a design that just looks "off."
Margins: This is the blank space around the edges of your design. Unless you`re creating a specific, intentional effect, you don`t want your text looking like it`s going to fall off the page (or screen). A generous amount of blank space around the edges makes for more comfortable reading.
White Space: This is the term used to refer to any blank/white/empty spaces in your design. When you have a lot of information to fit in, white space can seem like wasted space, but it`s actually an essential part of a balanced, organized design. It keeps viewers moving visually through a design and gives their eyes a place to rest.
As to alignment, consistency is the best way to improve your typography. Mixing text alignment styles (left, right, center, justified, etc.) in a design without any purpose or logic just looks sloppy.
A couple quick tips:
- Avoid justified alignment. It almost always creates irregular spacing and random chunks of white space that look sloppy and make reading difficult.
- Pick one style for your body copy (typically left-aligned) and stick to it.
06. Learn to Kern
There`s one more type of spacing that`s often overlooked: kerning. Kerning is sometimes confused with tracking, but it`s different-it`s the amount of space between a single pair of letters or other characters.
Kerning is often that last thing you`ll check to make sure your typography looks as polished and professional as possible. Every font is designed with default kerning, but sometimes those settings aren`t ideal for certain letter combinations. Particularly for large, visible typography like headlines, you`ll want to do a visual check to make sure certain pairs of letter don`t look too far apart or too close together, then manually adjust the kerning if necessary.
Want to learn more about kerning? You`ll find a thorough introduction in our Beginner`s Guide to Kerning Like a Designer. We`ve even linked to an online game that helps you practice your kerning skills.
07. Limit Your Number of Typefaces & Weights / Styles
We all love our fonts, but you can have too much of a good thing. Too many different typefaces in one design can look messy and amateurish.
As a rule of thumb, it`s a safe bet to use no more than three different fonts in one design, though this "rule" can be broken to good effect in the right context. (Such as creating an eclectic, vintage style, as with the design below.)
If you`re looking for a starting point for combining fonts, a basic sans serif font plus a serif font will almost always go together. Another option is to pick a single typeface or type family that comes with multiple weights and styles-that way, your typography looks cohesive, but you still have variations to choose from.
Which brings us to our next tip.
It can be easy to overuse those weights and styles (like bolding, italics, or capital letters). These styles can be great to add emphasis to text, maybe to make it stand out visually, to show its importance, or to mimic speaking patterns. Just don`t use them all in one passage of text; it looks like you`re trying too hard to get your message across and can feel rude to readers. The occasion should be rare that you even need more than one.
08. Avoid Common "Type Crimes"
Design programs can help us do some amazing things, but they also make it easy to commit some typographic faux pas if we`re not careful. Ellen Lupton, author of Thinking with Type shares a few bad habits to break on the book`s companion website. Let`s look at a few:
Don`t stretch words or letters, forcing them to fit into a space. When you stretch out typography vertically or horizontally, it distorts its proportions and letter shapes. A better alternative is to scale the type proportionally to preserve its original appearance.
Don`t use dumb quotes. Dumb quotes, the kind that are straight hatch marks, are commonly substituted for true typographic quotation marks, the curved or sloped kind otherwise known as smart or curly quotes. Most design and word processing programs can be set to use smart quotes, or you can use keyboard shortcuts.
Don`t fake italics. If a font doesn`t come with an italic style, it`s pretty easy in most design programs to apply a slant effect to the font and make it look (kind of) italic-Lupton calls these "pseudo-italics." However, this technique actually distorts the letters and generally looks pretty bad. True italics are designed separately to complement the regular style of the font and are always a better choice.
09. Check for Clashing Colors or Backgrounds
Typography rarely stands alone in a design. It interacts with other design elements, particularly the background. For type that has good visibility, it`s important that the text has sufficient contrast with the rest of the design. But there are a couple things that can tone down contrast:
- Clashing Colors: If you`re applying color to your typography, you`ll want to make sure it complements other elements in the design, including the background. Colors that are too different (think of an irritating pop-up ad online with neon green text on a red background) or even ones that are too similar (maybe white text on a light background) can be hard on the eyes and bad for visibility.
Instead, try tying in the text color with an existing color scheme for a harmonious look:
- Patterned or Busy Backgrounds: Similarly, a background that has a lot going on can make any text hard to read, and you don`t want to frustrate viewers with a design where they can`t find the information they need.
Instead, try using the pattern as a border or in a place where it doesn`t distract from your typography:
- Special Effects: Transparency effects, warping, and other text treatments can be fun, and useful in certain situations, but also easy to misuse. Sometimes we can get so caught up in the design process that we make choices that achieve a certain look, but aren`t very practical.
Instead, try to add text effects only when they make sense for the design, not just because you can.
To sum up, make sure to always keep your typography`s visibility and readability in mind as you try out different creative approaches.
10. Observe & Practice
One of the best ways to improve your typography is pay attention to how other designers use type in their work. This is a skill that takes practice and developing an eye for what works and what doesn`t, so keep a lookout for great typography-you never know where you`ll find it, from subway signs to supermarket shelves.
So now it`s up to you! It`s our hope that you`ll be able to use these tips and guidelines to boost your typography skills. As always, happy designing!