Moving away from paper monitors

Thinking about the old web again, and how different web pages looked back then, compared to now. In a word, tiny.

A short history of body copy sizes on the Web – Florens Verschelde
Ten and 11 pixels may seem puny today, but in the early 2000s that was deemed readable for two reasons:

the 800×600 and 1024×768 screens of the late 1990s and early 2000s had biggish pixels, so the result was on the small side but not as small as it might look today;

designers and their clients were accustomed to 9, 10 and 11 point sizes for body copy in print (books, magazines, leaflets…), and the prospect of using bigger values felt like shouting at readers.

It took quite an effort to pull web designers away from this assumption that screens should be treated the same way as print.

In November 2006, iA’s Oliver Reichenstein ran a simple experiment: he compared a magazine’s body copy at arms’ length and a typical site’s body copy at a common, eye-to-desktop-screen distance. The website’s text looked much smaller. Oliver argued for setting the body copy to the browser’s default, or 100%, which by convention is 16px in common browsers. In 2006, and even a few years later, it was a revolutionary proposition. Web designers and clients thought it was extreme. Five years later, we still had to fight for the death of 11px body copy (example, in French).

It’s been interesting to see how text has been treated over the years, not only on the various default WordPress themes but on blogs like Jason Kottke’s, and my own when it was on Blogger. Layouts like Swiss Miss’s look anachronistic now.

Verschelde’s exploration into this aspect of web design is full of links to examples and other articles about typography and layout, including Jeremy Keith’s Resilient web design, a online book that uses CSS to smoothly vary the font size depending on the width of the screen. It’s a great read, especially the opening chapter’s review of the intertwined history of interfaces.

Resilient Web Design – Chapter 1
The hands on a clock face move in a clockwise direction only because that’s the direction that the shadow cast by a sundial moves over the course of a day in the northern hemisphere. Had history turned out differently, with the civilisation of the southern hemisphere in the ascendent, then the hands on our clocks would today move in the opposite direction. […]

These echoes of the past reverberate in the present even when their usefulness has been outlived. You’ll still sometimes see a user interface that displays an icon of a Compact Disc or vinyl record to represent music. That same interface might use the image of a 3½ inch floppy disk to represent the concept of saving data. The reason why floppy disks wound up being 3½ inches in size is because the disk was designed to fit into a shirt pocket. The icons in our software interfaces are whispering stories to us from the history of clothing and fashion.

The quote used in the introduction to that online book seems appropriate here.