CONTENT DESIGN & THINKING
6 Typesetting mistakes that ruin legibility
![](\"content-expirience-6-Forbidden-Typesetting-Mistakes-That-Ruin-Legibility-cover-1200x630.png\")
Learn how poor typesetting impacts your readers’ experience. Spoiler: it’s worse than you expected.
In a digital world where 55% of visitors spend less than 15 seconds on a website, it’s crucial to quickly captivate users and make a lasting impression through high quality and engaging content.
Replacing plain text articles with exciting layouts and media elements is one way to make content more appealing. Improving readability and legibility through better typesetting is another way to grab attention.
We’ve collected six common typesetting mistakes that publishers can make and given some advice on how to fix them for a more engaged audience.
![](\"01-1.svg\")
Lack of Visual Contrast
![](\"Lack-of-Visual-Contrast.png\")
Distinguishing various structural parts on a page through Color and Typographic contrasts is vital to guide users.
Color contrast: difference in brightness between two adjacent colors of text and background
Typographic contrast: variation in size between text elements, such as headline and paragraph text
Very low or vigorous color contrast can leave the reader straining to read the text and can be especially uncomfortable for mobile users or in dark environments.
Similarly, the lack of typographic contrast can make it difficult to identify different structural parts of an article.
To create visual cues and improve readability for users, deploy contrasting colors and complementary font styles and sizes. Google Type and Font Pair are useful tools to select font pairs.
\n PRO TIP\n
Consider using colorblind-friendly palettes, so your content is accessible for everyone. If you want to go further in your publishing game, you can always check your graphic content for colorblind-friendliness at Coblis.
![](\"02-1.svg\")
Low Distinction Level
![](\"Low-Distinction-Level.png\")
Emphasizing essential text elements is needed to capture user attention, especially for items such as a key takeaway or call to action (CTA). Emphasis can be achieved by inserting hyperlinks or through distinct font styles – things that make the text element stand out from the surrounding text.
In typography, emphasis means the strengthening of particular words with a font in a different style from the rest of the text – to highlight them.
\n PRO TIP\n
To increase conversion of links in articles, hyperlinks have to be visually recognizable, and the text on the link should indicate where the link leads. For example, in this sentence, we have placed a link to a Content Review Service provided by the Setka team, who can help you discover ways to improve the content you publish.
![](\"03-1.svg\")
Inadequate spacing
![](\"Inadequate-Spacing.png\")
Spacing between various text elements can seriously affect readability. Line spacing plays an essential part in simple and comfortable consumption of information. The lines should not be too close or too far apart, and the line spacing should be consistent throughout the text.
The optimal line spacing for body text is 120% of the font size.
\n PRO TIP\n
A quick way to check for appropriate paragraph spacing is to look at the text with your eyes squinted. If all the elements appear merged into one big indistinguishable block, it means that paragraph spacing should be increased.
Want to check your own work?
Get a free extended checklist to see if you’re taking advantage of all the best practices that improve content legibility and readability.
![](\"scorecard.png\")
![](\"04-1.svg\")
No Visual Structure
![](\"No-Visual-Structure-1.png\")
Maintaining visual structure consistency helps the reader’s gaze glide smoothly across the text.
An article can appear chaotic when it has text elements with different formats or paragraphs with varying lengths.
Good visual structure, on the other hand, makes the content appear organized and predictable – and can help set a benchmark for design.
\n PRO TIP\n
Dedicate some time to ensure that the integrity of the visual structure is maintained across different devices and browsers. Tables and infographics can be particularly tricky. For a quality user-experience on mobile devices, you may need to restructure certain elements for optimal viewing.
![](\"05-1.svg\")
Poor Mobile Optimization
![](\"Poor-Mobile-Optimization.png\")
Optimizing content for a variety of platforms, browsers, and mobile devices can help avoid future issues and user complaints.
Ensuring that the proportions of text parts, text size, spacing, and layouts, are preserved across various screens can be a make or break factor for readers, when choosing whether to stay on your page or leave.
\n PRO TIP\n
Planning early for content optimization across devices can be a time saver for everyone – not just your readers but also your team.
![](\"06-1.svg\")
No Graphics Optimization
![](\"No-Graphics-Optimization-1.png\")
Graphic materials are a highly valuable asset in any article, and often, graphic optimization mistakes are noticeable when comparing desktop and mobile versions of the content.
When working through final edits, check for the following issues with graphics:
- Does it overlap the text?
- How is the image displayed on different screens?
- Is it of equal quality on all screens, or does it become blurry when scaling?
If a gallery is placed in the article, does it scroll appropriately on mobile devices?
These are the most obvious details, and more sophisticated media elements such as animation and video require additional checks.
\n PRO TIP\n
Always check that graphics display and work correctly, and have the appropriate sizes and proportions – especially if these elements are intertwined with other text elements or embedded in the text.
Making an article appear organized, inviting, and pleasing is not an easy task. Avoiding these typesetting mistakes can help provide a better user experience for your readers, and boost conversions from your content.
Want to improve your content experience even more? Read our Ultimate Design Guide for Content that Converts with advice for making your content easier to understand, easier to read, more engaging, and a better representation of your brand.
Next steps
Use our checklist below to evaluate how you’re doing in terms of content legibility and readability – or let us do the work for you. Reach out for a FREE 3-Step Content Makeover from Setka, which includes a content design review, scorecard of your content and action steps for optimizing every part of your content – to more deeply engage your readers (and get better ROI).
Get a FREE Content MakeoverLegibility Scoring Checklist
Distinct typefaces or font weights that distinguish accent copy from the body text
— Highlight and emphasize important parts of the article to catch your user’s attention. When emphasizing words, choose a font style that’s instantly distinguishable from the surrounding text – just bolding or italicizing text can sometimes do the trick.
Font size and column widths update for easy reading across devices
— Make sure your text and content structure is optimized for different platforms, devices, and browsers. Formating must change according to screen size while maintaining the proportions of the text parts.
Hyperlinks that are visually distinct from surrounding text
— Use visually distinct font styles and highlights for hyperlinks, so they stand out. The text of the link should also clearly tell the users where the link leads.
Tables are reformatted for easy viewing
— Check that your tables display correctly across all platforms and devices. For a quality user-experience on mobile devices, you’ll likely need to automatically restructure tables, especially if they’re oriented horizontally.
Sufficient line spacing for an easily readable copy
— Watch your lines and ensure they aren’t too close or far apart, there is consistency in spacing throughout the text, and that elements don’t merge into indistinguishable blocks.
Image galleries allow for swipe navigation
— Don’t forget the swipe! An image gallery placed within the article should be convenient for use on mobile devices, allowing your reader to scroll through without any problems.
Line and paragraph indentation to optimize the structure of the text
— Maintain the visual structure of your article by using formatting consistently and highlighting similar text elements in the same way.
Photos render and display correctly
— Make sure your pictures aren’t blurry, don’t overlap with text, and retain their quality on different screens. And yes, always check the file size: large images can slow down page loading times.
Consistent spacing between paragraphs
— Keep the paragraph structure consistent and predictable and make sure that the distance between blocks of text doesn’t vary significantly throughout the article.
PARAGRAPHS THAT GENERALLY VARY FROM 5-9 LINES IN LENGTH
— Keep your paragraphs approximately the same size – not too short or too long. Sections that are 5 to 9 lines long are preferable. A logically persistent format can also help to set a benchmark for design and the word count of each content piece.