Great typography on the web should be designed in layers. The web is an imperfect medium, consumed by countless different devices over untold numbers of network connections—each with their own capabilities, limitations, and peculiarities. To think that you can create one solution that will look and work the same everywhere is a fantasy. To make this more than just one nice book website, the whole project and process needs to embrace this reality.
A history of typesetting from movable type to variable fonts.
A brief history of the manicule, illustrated with some extreme examples.
A look at the trend towards larger and larger font sizes for body copy on the web, culminating with Resilient Web Design.
There are some good arguments here for the upper limit on the font size there being too high, so I’ve adjusted it slightly. Now on large screens, the body copy on Resilient Web Design is 32px (2 times 1em), down from 40px (2.5 times 1em).
Books in the public domain, lovingly designed and typeset, available in multiple formats for free. Great works of fiction from Austen, Conrad, Stevenson, Wells, Hardy, Doyle, and Dickens, along with classics of non-fiction like Darwin’s The Origin of Species and Shackleton’s South!
Marcin explains why line height works differently in print and the web. Along the way, he hits upon this key insight about CSS:
Web also took away some of the control from typesetters. What in the print era were absolute rules, now became suggestions.
Remember that every line of CSS you write is a suggestion to the browser.
Everything you need to know about hyphenation on the web today, from Rich’s galaxy brain.
Hyphenation is a perfect example of progressive enhancement, so you can start applying the above now if you think your readers will benefit from it – support among browsers will only increase.
font-feature-settings value demonstrated in one single page.
Rob walks us through the typographic choices for his recent redesign:
Most of what I design that incorporates type has a typographic scale as its foundation, which informs the typeface choices and layout proportions. The process of creating that scale begins by asking what the type needs to do, and what role contrasting sizes will play in that.
An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).
Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.
(It also contains a splendid use of the term “crawl bar.”)
This is a fun game (I scored a measly 73/100). The idea is to develop a feeling for the balance between font-size, line-height, and line length …just like the three sides of an equilateral triangle.
Too many of them still set line-height, font size and line width as independent features when in fact they should all be considered together. The equilateral triangle is a perfect representation of how the three features work in harmony.
A marvellous piece of writing and design. The family drama of two brothers who revolutionised the world of diving and salvage, told through beautifully typeset hypertext…
The 1978 short film Farewell, etaoin shrdlu documents the changeover from linotype to digital typesetting at The New York Times.
An evenhanded treatment of the unremitting march of technological progress, Weiss’s film about an outmoded craft is stylistically vintage yet also immediate in its investigation of modernity.
What a great way to sell a book with “explorations” in the title—play around with the font size, leading, alignment (and browser window size).