How do I adjust letter spacing and line length for readability?

TL;DR

To adjust professional letter spacing and line length for readability, start with the default spacing of your chosen typeface, as it's usually already optimized for general use. 

For headlines or bold text larger than 18px, tighten the spacing slightly to make it stand out. For smaller text or all-caps, increase the spacing to enhance legibility, beginning adjustments at 0.5px. Remember, sans-serif fonts typically require less spacing than serif fonts.

For line length, aim for 50-70 characters per line to maintain a comfortable reading flow. Avoid line lengths over 75 characters to prevent eye strain and under 45 characters to avoid disrupting the reading flow. These guidelines help minimize eye fatigue, especially in longer text passages. 

The Web Content Accessibility Guidelines (WCAG) 2.1 and the British Dyslexia Association suggest keeping line lengths to 80 characters or fewer, ideally around 60-70 characters, for optimal readability.

Deep Dive

In text designed for continuous reading, the line length is critical. Lines that are too short cause the reader’s eyes to dart frequently, potentially decreasing reading speed. Conversely, excessively long lines can make it difficult for readers to find the start of the next line, disrupting the reading flow.

Pro tip: In text designed for continuous reading, line spacing should never be less than the spacing between words.

Font choice considerations 

• Choose a font pair for your UI with enough contrast so the transition between them looks natural and intentional. For instance, pairing a bold primary font with a lighter secondary font not only achieves visual balance but also makes the text easier to read.

Source

• Choose a primary font for headings and key UI components. The objective is to establish a clear visual hierarchy within your business application.
• Use a secondary font for descriptive, supportive text to enhance visual contrast and maintain hierarchy. Sans-serif fonts like Roboto, Open Sans, or Helvetica are widely used for their readability on digital screens.
• Make sure the fonts you pick work well on all the platforms and devices your app will be used on. Choose web-safe fonts or Google Fonts for consistent looks across different browsers and devices.

Letter spacing guidelines

• Start with the typeface's default spacing. Most fonts are designed with optimal spacing between individual letters in mind.
• Tighten spacing slightly for headlines or bold text that is 18px or larger to make it stand out more. Always start with the standard letter spacing and adjust it slightly if necessary.
• Increase spacing slightly for small text sizes (e.g., 14px or less) or all-caps to improve legibility. Start with a letter spacing of 0.5px and adjust if necessary.
• Sans-serif fonts generally require less letter spacing than serif fonts.
• Avoid extremes: Excessive spacing can make words harder to recognize, while overly tight spacing can make text feel cramped.

Line length considerations

Optimize length of line to make reading easier, targeting around 50-70 characters per line.

• Avoid lines longer than 75 characters as they can make it difficult for readers to move their eyes to the start of the next line, leading to eye strain.
• Lines shorter than 45 characters can disrupt the reading flow and make the text feel disjointed.
• For longer text passages, aim for line lengths between 45-75 characters to minimize eye strain.

The Web Content Accessibility Guidelines (WCAG) 2.1 recommend keeping line lengths to 80 characters or fewer. Similarly, the British Dyslexia Association recommends a line length of 60-70 characters for users with dyslexia.

Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• Who are our target users, and what are their reading habits and preferences?
• How will the content be consumed across different devices and screen sizes?
• Do we have existing brand guidelines or a design system with typography styles?
• How can we balance readability with aesthetics and brand identity?

Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Using the same letter spacing and line length for all content types and hierarchy levels.
• Prioritizing visual design trends over readability and user experience.
• Not considering the impact of responsive design on letter spacing and line length across devices.
• Overlooking the accessibility standards.

How to convince stakeholders

One of the most crucial skills for a designer is being able to explain and back up their ideas. If you're having a hard time convincing stakeholders, take a look at our tips to help you communicate better.

• Improved readability increases user engagement because it allows users to comfortably consume and interact with the content. 
• Enhanced accessibility and inclusivity show commitment to diversity and meeting industry standards.
• Consistent typography across the application establishes a unified brand identity and professionalism.

Support your arguments with relevant research findings, industry best practices, and real-world examples of successful typography implementation in B2B applications. If possible, conduct a small-scale usability study to gather data on the impact of your proposed changes.

Emphasize that investing in readability is not just a design decision but a strategic move to improve user satisfaction, retention, and ultimately, the success of the application.

Useful tools 

These tools will make your job easier and more effective.

• Google Fonts – Browse free and open source font families, use an interactive web directory. 
• Golden Ratio Typography (GRT) Calculator – Determine optimal line length and spacing based on your font size and content width. 
• Web Accessibility Evaluation Tool (WAVE) – Evaluate the accessibility of your web content, including typography. The tool can detect issues related to color contrast, text spacing, and other factors that affect readability for users with disabilities.

Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• Understand Typography by Vinh Nguyen Quang
• Balancing Line Length And Font Size by Laura Franz
• Choosing a suitable line height by Elliot Jay Stocks