115
150
Fonts that address special
issues
Part 4
Another important development was the proliferation of new fonts. Over the past several decades, Microsoft and Apple have approached the issue of web legibility repeatedly, producing more and more fonts targeted to the peculiarities of digital displays and the web.
In the early 90s, British type designer Matthew Carter created the early web 1.0 fonts Georgia (1993) and Verdana (1996). Commissioned by Microsoft specifically for text on webpages, both fonts were designed in bitmaps to match the pixels of the standard screen resolution at the time and then translated into outline fonts. For legibility and readability on screens, Carter designed these fonts with large x-height, open aperture, and generous space.
Matthew Carter, July 16 2014. Photo: Christopher Lewis. CC by 4.0
Georgia, 1993
Both designed by Matthew Carter, hinted by Tom Rickner
Verdana, 1996
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.
1/4
Die Epilog, issue 6:“Wir kommen. Thema: Generation”, 2017. Photo: Sarah Bergmann & Diana Decker for Die Epilog
In extremis, Arts House catalog. © M.Giesser. Image via mgiesser.com
Itinerari newspaper supplement redesigned by Tomo Tomo. Image via fontisinuse.com
Latvian photography 2019 annual. © Alexey Murashko
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.