Evolution of layouts and typesetting on the web

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.

Part 3

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.

Use this editorial as a template
Design your own from scratch