Typography Rules & Best Practices
As designers, we all know that the devil is in the details but when it comes to typography, what may seem to be a simple detail can actually help elevate your skills as a designer and separates the experienced from the amateur by simply showing you care. Knowing these simple rules and guidelines can help take your design skills to the next level.
Typeface vs. Font
First and foremost, what’s the difference between a typeface and a font? Seems simple but most designers often use the terms interchangeably. A typeface is the overall family of fonts such as Arial, Helvetica, Bodoni etc. whereas a font refers to a single member of that family varied by weights and styles such as bold, italic, and thin (ex. Arial Bold, Arial Italic, Arial Thin).
Tracking vs. Kerning
Another set of terms that often confuse designers are tracking vs. kerning. Tracking is a technique in typography that lets you add or subtract the uniform space between groups of letters. Kerning on the other hand is used to adjust the spacing between individual characters in a word. It’s also important for designers to not assume that all typefaces are created with the correct amount of kerning, and it makes all the difference by taking the time to go in and correct any spacing issues…it’s all in the details! When tracking, be careful not to overdo it. It’s never a good idea to track out cursive or script typefaces. Also, remember to keep the tracking to uppercase rather than lowercase.
Widows/Orphans
When working with blocks of text, it’s never good to leave anyone behind. Widows are one solo word of text left on their own line at the end of a paragraph, whereas orphans are one word of text left on their own at the beginning of a paragraph. Always adjust to make sure that no stragglers are left behind or part of your design.
Avoid Hyphens
As a rule of thumb, ALWAYS turn off your hyphenation when designing and working with text layouts. Individual words that are separated between lines of text with the use of hyphens is extremely distracting, looks careless, and really distinguishes the experienced designers from the not so experienced. Really try and avoid at all costs.
Limit Typefaces
When designing with type, less is more. Limiting yourself to use only one to three typefaces will help avoid your design from looking messy and in-cohesive. Instead of using a bunch of different typefaces, try using varying weights to create visual hierarchy. This will help differentiate between headers, sub headers, and body text while still maintaining a sense of cohesiveness and eliminate any sort of confusion among viewers. That being said, when selecting a typeface, be mindful of selecting one that has varying fonts and weights to give yourself more options to work within the design.
Visual Hierarchy
When working with typography, visual hierarchy can really control what you want to be the main priority of your design. Using different techniques such as adjusting the size, weight, and color can help call out exactly what you want your viewers to focus on and how to direct the flow of their attention. Visual hierarchy controls how your audience receives the information by highlighting what information is deemed important.
Em vs. En Dash
Em or en? What’s the difference and when are they supposed to be used? The EN dash is slightly wider than a regular hyphen, but narrower than the EM dash. The EN dash is also half as long as the EM dash (like how the letter M is longer than the letter N). Great, but when are these used? When calling out a quote, always use an EM dash when attributing the speaker. Depending on the context, the EM dash can take the place of commas, parentheses, or colons. The EN dash is used to indicate continuing or inclusive numbers in dates, times or reference numbers. Something to keep in mind when designing with quotes in layouts and graphics.
Spell Out Numbers
When working with numbers, always spell them out within bodies of text. It looks much more elegant. However, if you are using numbers such as percentages or a number within a header, it’s nice to have the numbers large and in charge instead of spelled out if your goal is to direct the viewer’s attention there as the main focus.
As designers, our main goal is to create a clear, visual form of communication that helps viewers quickly understand the message being conveyed. Knowing and respecting these typography rules and concepts will help alleviate any sense of confusion or struggle to achieve this main goal, as well as elevate your skills as a designer.
