6 Forbidden Typesetting Mistakes That Ruin Legibility

Letters symbolizing the relationship between content design, content UX, typesetting and legibility.

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 is 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.

At Setka, we’ve collected six common typesetting mistakes that publishers can make and some advice on how to fix them for a more engaged audience.


Lack of Visual Contrast

Example of layout style.

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 user 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.

Expert Tip:

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.

Low Distinction Level

Example of layout style.

Emphasizing essential text elements is needed to capture user attention, especially for items such as a key takeaway or call to action. 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 words in a text with a font in a different style from the rest of the text to highlight them.

Expert Tip:

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 our team that will help you discover ways to improve the content you publish.

Inadequate Spacing

Example of layout style.

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.

Expert Tip:

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?

Download a free extended checklist to see if you’re taking advantage of all the best practices that improve content legibility and readability.

Download PDF

Illustration of hand with a pen filling the check boxes


No Visual Structure

Example of layout style.

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!

Expert Tip:

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.

Poor Mobile Optimization

Example of layout style.

Optimizing content for a variety of platforms, browsers, and mobile devices can help avoid future issues and user complaints.

Ensuring proportions of text parts, text size, spacing, and layouts, are preserved across various screens can be the make or break factor for readers who choose to stay on the page or leave.

Expert Tip:

Planning early for content optimization across devices can be a time saver for everyone – not just your readers but also your team!

No Graphics Optimization

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.

Expert Tip:

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 full guide to designing a great content experience, with advice for making your content easier to understand, easier to read, more engaging, and a better representation of your brand.

Checklist

Better typesetting can significantly improve content legibility and readability for your users. If you need a more detailed analysis of your content, our team will be happy to help you with an expert assessment — just request your FREE CONTENT EXPERIENCE DESIGN SCORECARD. It includes personalized action steps backed with data for optimizing every part of your content marketing efforts.

Illustration of a Content Experience Scorecard example

Visual Contrast

  • 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 is instantly distinguishable from the surrounding text – just bolding or italicizing text can sometimes do the trick!
  • 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.

Spacing

  • 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.

Visual Structure

  • 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.
  • 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 word count of each content piece.

Mobile Optimization

  • 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.
  • 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.

Graphics Optimization

  • Image galleries allow for swipe navigation
    — Don’t forget the swipe! The gallery placed in the article should be convenient for use on mobile devices, allowing your reader to scroll through it without any problems.
  • Photos render and display correctly
    — Make sure your pictures are not 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.

Distinction Level

  • 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 is instantly distinguishable from the surrounding text – just bolding or italicizing text can sometimes do the trick!
  • 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.
Try for free

14 days free trial. No credit card required

Get started