part 2

What makes on-screen readability special

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.

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

High contrast between the type and the background ensure good readability

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.

115
150