tips on

creating

a readable

web text

With all the technology addressing readability issues, it’s still design basics that distinguish a readable text from one that isn’t. Here are some simple rules we use ourselves when developing engaging texts and layouts.

Always start with quality writing. There are some rules that might help you improve the quality of a text; scales, such as Gunning fog, can also help. Start building your design only when you know you have the best text possible.

Think about layout, seek inspiration in printed publications: the reader’s eye is already acquainted with books and magazines, making similar layouts easier to grasp. Browse through paper magazines for inspiration. Take note of the most appealing layout details and recreate those in your work.

Designer as Writer

Both printed publications and web layout are essentially based on columns and rectangles. Master the grid, a design device pioneered by the Swiss School to help balance layouts. Structure and divide your content into smaller elements, making them easier to scan.

Keep the contrast ratio tool developed by the Web Accessibility Initiative in mind and test your designs for contrast levels.

Pick appropriate fonts, particularly if you’re working with a lengthy text. Master font pairs to combine readable fonts for the main text with expressive ones for headers. Don’t forget the parameters of text setting: font size, line spacing, width of the text columns.

Give readers easy access to navigation tools, so they can stop for interruptions and start reading again later with minimal disruption. Anchor navigation might work especially well in long reads.

Play with the look and feel of your text, look for ways to emphasize where it’s most engaging without negatively affecting readability. Render some of the numbers as an image or a shape. Use unique fonts for headers. Use insets and hotspots to highlight certain sections of text. Balance text with images and animation. Give the reader’s brain something playful as a break from monotonous text—remember that it’s fatigue you’re fighting.

If your article is longer than five paragraphs, add an option for printing it out in a decent font for printed text—say, with some variant of Garamond.

Analyze everything. Use read-through levels as a proxy for readability: split a long text into different pages with separate names, then benchmark page views with a web analytics system. Send drafts with different layouts to acquaintances before publication and measure how much layout improvements impact read-through.

Choose YOUR template

Stas Aki

Editor-in-Chief

Alya Datiy

Producer

Pavel Kedich

Designer

A note on the type

Druk by Berton Hasebe, Yury Ostromentsky, Ilya Ruderman. Graphik by Christian Schwartz, Hrvoje Živčić, Ilya Ruderman. Stratos by Yoann Minet, Ilya Ruderman, Yury Ostromentsky. Spectral by Jean-Baptiste Levée, Ilya Ruderman, Yury Ostromentsky. Times New Roman by Stanley Morison, Victor Lardent. Suisse Int’l by Ian Party, Swiss Typefaces. Charter by Matthew Carter. Pragmatica by Alexander Tarbeev, Manvel Shmavonyan, Olga Chaeva, Vladimir Andrich, and Vladimir Yefimov. Georgia by Matthew Carter, Tom Rickner. Karloff Negative by Nikola Djurek, Peter Biľak, Pieter van Rosmalen. Pilowlava by Anton Moglia, Jérémy Landes. Kazimir Text by Ilya Ruderman, Yury Ostromentsky.

Made with

in 2020