Contrast
The pioneers of readability studies were obviously only dealing with printed text. However, by the end of the 1960s, computers with led screens had become relatively mainstream. Due to their inherent properties, they turned out to be more demanding on the eye.
Glowing screens make the reading experience physically different from a paper that only reflects light—the higher the brightness level, the stronger the effect. “If you set the brightness up much too high, a direct focus of light will come into your retina, causing fatigue,” explains Nick Sherman, a typographic consultant and the founder of hex projects typographic company.
High contrast between the type and the background ensure good readability
This problem can be partially tackled by selecting proper contrast color schemes, keeping brightness levels at bay. Some great tools that measure text contrast are: Webaim color contrast checker, Luminosity contrast ratio analyser, Color contrast check, and Color contrast visualiser.
Resolution
The second hindrance factor is resolution—the number of dots within a given area that can be used to convey visual information. Resolution is measured in dots per inch (dpi) or pixels per inch (ppi), with these terms used interchangeably. MacBook retina displays (praised for their high resolution) have still only exceeded 200ppi, while offset printing offers 2400dpi or even higher.
Most fonts that weren’t specially designed for computers tend to decline in readability when displayed on monitors. Historically, the two major it giants, Apple and Microsoft, have offered different solutions.
The key feature in macos font rendering was so-called anti-aliasing—a technique used to add pixels of different color to letter fringes, making them look more smooth.
Alias. Click to zoom in
Anti-aliased
In contrast, Windows tried to maximize legibility. They adapted the distribution of pixels within letters and words to make pixel density and letter shape optimal for reading. Microsoft used what’s now called font hinting, a set of instructions describing when to add additional pixels to each letter. This allows for improved legibility, but alters and even distorts original letterforms.
Unhinted character
Hinted character
However, changes to how fonts are rendered have reduced the differences between these approaches.
Evolution of layouts and typesetting on the web
Part 3
The first website was published in 1990 by computer scientist Tim Berners-Lee and now it seems like an eyesore. Early web sites were basic, using vertically structured, text-heavy pages with few graphics. Before the introduction of tables as a web page structure, there were few design components and no way to emulate the layouts of conventional printed texts.
In the early web there were no people well-versed in typesetting. Website layouts were fluid (did not have fixed width), so text lines came in any possible width. That was not so great: all sorts of typographic rules aimed at text legibility were smudged,” says Readymag product designer Stas Aki. The situation demanded new approaches to the creation of web layouts.
The variety of screen sizes also strongly impacted web layouts and quality of typesetting. While print designers knew beforehand the paper format that will house their work, web designers worked in a situation of uncertainty, knowing that their designs would appear in multiple ways on multiple screens.
This problem was mostly tackled with the mass introduction of responsive design around 2007, along with the launch of the first iPhone.
1st generattion iPhone
iPhone 11
I think it pushed the idea of responsive web design to the forefront. Mobile sites were often made separately from the desktop version, and that was happening before iPhones existed. I think the first iPhone is a symbol of when mobile web browsing became a mainstream thing. As far as readability in particular, the iPhone definitely set a lot of standards for resolution; like the idea of having a retina display with an extremely high resolution,” Nick Sherman recalls.
New generation mobile devices allow a resolution up to 1000dpi. With the continuing increase in screen resolution for desktop computers and portable devices, readability should improve as well.
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
A decade later, sub-pixel rendering appeared—also known as font smoothing, it adds red, green or blue pixels to letter fringes for clearer reading even on low-res screens. The origin of subpixel rendering remains controversial: Apple, then IBM and Microsoft, patented various implementations with their own technical differences, but Microsoft was the first to implement the technology in their products. Soon after, Microsoft also released the Clear Type font collection, a suite of fonts designed to demonstrate the advantages of sub-pixel rendering. The collection included Calibri, Corbel, Cambria, Candara, Consolas, and Constantia.
Another major development came in 2009. Small Batch., Inc released Typekit—a collection of web fonts from different foundries, making use of the @font-face feature of CSS while protecting them from infringement at the same time. @font-face was available from 1998, but Typekit was the first collection to solve the problem of font copyrighting, allowing a new market for custom web fonts to bloom. It’s difficult to imagine now, but before Typekit all web typography was either done with one of the dozen or so ‘web safe’ fonts or rendered in graphics.
In 2014, Apple released its San Francisco font family, inspired by iconic modernist type Helvetica. San Francisco includes several fonts, each aimed for a different environment: SF is meant for macOS, iOS and tvOS, while SF Сompact was designed for Apple Watch. The main difference between them is that letters with round shapes, such as “o”, “e”, and “s”, have rounded sides in San Francisco, whereas in SF Compact they are flat. These flat sides allow the letters to be laid out with more space in between each character, making the text more legible at small sizes (which is particularly important for the watch).
Neue
Alt
Neue
This paragraph is set in Pragmatica (Paratype). The typeface was obtained via Typekit (now Adobe Fonts)
1/2
Left: SF Text
Right: SF Compact Text
Working together, Adobe, Apple, Google, and Microsoft jointly introduced variable fonts in 2016. The power of this new font variation technology lay in its ability to pack multiple fonts into one without increasing file size. Variable fonts solve the issue of loading individual font files to achieve various weights, widths, heights, styles, and other attributes.
Grade axis changes the weight of the font without changing the widths, so line breaks are the same. Set in GradeGX by Pablo Impallari and Adam Twardoch
Grade axis:
In theory, variable fonts could be modified along several axes, including their optical size, which directly affects font legibility. For now, variable fonts give much room for experimentation. Some great ideas for using variable fonts in design can be found here, and Axis Praxis is a resource for experimenting more directly.
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.
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.