Avoiding Common Typography Mistakes: A Checklist
Typography is a crucial element of design, impacting readability, visual appeal, and overall user experience. Even subtle errors can detract from your message and professional image. This checklist outlines common typography mistakes and provides actionable advice to avoid them, helping you create visually stunning and effective designs.
1. Kerning and Letter Spacing
Kerning refers to the adjustment of space between individual letter pairs to achieve visual harmony. Poor kerning can make words look awkward and difficult to read. This is especially noticeable in headlines and logos.
Common Mistakes:
Inconsistent Spacing: Uneven gaps between letters, making some letter pairs appear too close or too far apart.
Ignoring Problem Pairs: Certain letter combinations (e.g., AV, WA, To) often require manual kerning adjustments.
Over-Kerning: Overly tight spacing, making letters appear cramped and illegible.
How to Avoid Them:
Train Your Eye: Practice identifying poorly kerned text. Look at the overall shape and flow of the word, not just individual letters.
Use Kerning Tools: Most design software offers automatic kerning features, but always review the results and make manual adjustments as needed. Adobe Illustrator and Adobe InDesign have robust kerning options.
Pay Attention to Font Choice: Some fonts are better kerned than others. Choose fonts with well-designed letterforms and consistent spacing.
Zoom In: When kerning, zoom in to see the subtle differences in spacing more clearly.
Consider Negative Space: Focus on the negative space between letters as much as the letters themselves.
2. Leading and Line Height
Leading (pronounced "led-ding") refers to the vertical space between lines of text. It's crucial for readability and visual comfort. Insufficient or excessive leading can make text difficult to scan and understand.
Common Mistakes:
Too Little Leading: Cramped lines of text, making it difficult to distinguish individual lines.
Too Much Leading: Gaps between lines that are too large, disrupting the flow of text and making it feel disjointed.
Inconsistent Leading: Varying line heights within the same block of text, creating a jarring visual effect.
How to Avoid Them:
The 120-145% Rule: A general guideline is to set leading to approximately 120-145% of the font size. For example, if your font size is 12pt, your leading should be between 14.4pt and 17.4pt.
Adjust for Font Style: Different fonts require different leading. Fonts with longer ascenders (the part of a letter that extends above the x-height, like in "b" or "h") and descenders (the part of a letter that extends below the baseline, like in "g" or "p") often need more leading.
Consider Line Length: Longer lines of text typically require more leading to improve readability. Shorter lines may benefit from slightly tighter leading.
Test Readability: Print out a sample of your text and read it carefully. Does the leading feel comfortable and natural? Adjust as needed.
3. Tracking and Character Spacing
Tracking, also known as character spacing, refers to the uniform adjustment of space between all letters in a block of text. It affects the overall density and visual texture of the text.
Common Mistakes:
Too Much Tracking: Letters that are too far apart, making the text feel airy and disconnected.
Too Little Tracking: Letters that are too close together, making the text feel dense and cramped.
Inappropriate Use: Applying tracking to body text when it's only appropriate for headlines or logos.
How to Avoid Them:
Use Sparingly: Tracking is best used sparingly, primarily for headlines, subheadings, and short blocks of text. Avoid applying it to large blocks of body text unless absolutely necessary.
Adjust for Font Weight: Bolder fonts may require slightly looser tracking to prevent them from feeling too heavy. Lighter fonts may benefit from slightly tighter tracking.
Consider the Context: The appropriate tracking depends on the overall design and the intended effect. Experiment with different settings to find what works best.
Avoid Extreme Values: Extreme tracking values can make text illegible. Aim for subtle adjustments that enhance readability without distorting the letterforms.
4. Font Size and Readability
The font size you choose directly impacts readability. Text that is too small can strain the eyes, while text that is too large can be overwhelming.
Common Mistakes:
Too Small for Body Text: Using a font size that is too small for comfortable reading, especially on screen.
Inconsistent Hierarchy: Failing to establish a clear visual hierarchy using different font sizes for headings, subheadings, and body text.
Ignoring Device Compatibility: Using font sizes that are not optimised for different screen sizes and resolutions.
How to Avoid Them:
Prioritise Readability: Choose a font size that is comfortable to read for extended periods. A general guideline is to use a font size of at least 16px for body text on screen.
Establish a Clear Hierarchy: Use different font sizes to create a clear visual hierarchy, guiding the reader through the content. Headings should be larger and more prominent than subheadings, which should be larger than body text.
Test on Different Devices: Ensure that your font sizes are legible on different screen sizes and resolutions. Use responsive design techniques to adjust font sizes automatically based on the screen size.
Consider the Target Audience: Take into account the age and visual abilities of your target audience. Older adults may require larger font sizes.
5. Colour Contrast and Accessibility
Sufficient colour contrast between text and background is essential for readability, especially for users with visual impairments. Low contrast can make text difficult or impossible to read.
Common Mistakes:
Insufficient Contrast: Using colours that are too similar, making it difficult to distinguish the text from the background.
Relying Solely on Colour: Using colour as the only means of conveying information, which can be problematic for users who are colour-blind.
Ignoring Accessibility Guidelines: Failing to adhere to accessibility guidelines, such as the Web Content Accessibility Guidelines (WCAG).
How to Avoid Them:
Use a Contrast Checker: Use a colour contrast checker tool to ensure that your text and background colours meet accessibility standards. Many online tools are available, such as WebAIM's Contrast Checker.
Aim for High Contrast: Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, as recommended by WCAG.
Provide Alternative Cues: Use alternative cues, such as icons or text labels, in addition to colour to convey information.
Test with Different Colour Vision Deficiencies: Use tools that simulate different types of colour vision deficiencies to ensure that your design is accessible to all users. Learn more about Fonts and our commitment to accessible design.
6. Consistency and Visual Harmony
Consistency in typography is crucial for creating a professional and cohesive design. Inconsistent font choices, sizes, and styles can make a design look amateurish and confusing.
Common Mistakes:
Using Too Many Fonts: Using more than two or three fonts in a single design, creating a cluttered and disjointed look.
Inconsistent Styling: Applying different styles (e.g., bold, italic) inconsistently throughout the text.
Ignoring Brand Guidelines: Failing to adhere to established brand guidelines for typography.
How to Avoid Them:
Limit Font Choices: Stick to a limited number of fonts (ideally two or three) that complement each other and reflect your brand's personality.
Establish Clear Styles: Define clear styles for headings, subheadings, body text, and other elements, and apply them consistently throughout the design.
Follow Brand Guidelines: Adhere to established brand guidelines for typography, including font choices, sizes, colours, and styles. This ensures consistency across all your materials. If you don't have brand guidelines, our services can help.
- Create a Style Guide: Develop a style guide that outlines your typography choices and guidelines. This will help ensure consistency across all your designs and make it easier for others to work with your brand.
By following this checklist, you can avoid common typography mistakes and create designs that are visually appealing, readable, and effective. Remember to pay attention to detail, prioritise readability, and adhere to accessibility guidelines. For frequently asked questions about typography, visit our FAQ page.