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.
Tuesday, April 28th, 2020
Friday, March 13th, 2020
A history of typesetting from movable type to variable fonts.
Tuesday, March 3rd, 2020
A brief history of the manicule, illustrated with some extreme examples.
Friday, January 3rd, 2020
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).
Thursday, May 9th, 2019
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.
Friday, March 22nd, 2019
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.
Thursday, August 30th, 2018
font-feature-settings value demonstrated in one single page.
Friday, August 10th, 2018
Over on A List Apart, you can read the first chapter from Tim’s new book, Flexible Typesetting.
I was lucky enough to get an advance preview copy and this book is ticking all my boxes. I mean, I knew I would love all the type nerdery in the book, but there’s a bigger picture too. In chapter two, Tim makes this provacative statement:
Typography is now optional. That means it’s okay for people to opt out.
That’s an uncomfortable truth for designers and developers, but it gets to the heart of what makes the web so great:
Of course typography is valuable. Typography may now be optional, but that doesn’t mean it’s worthless. Typographic choices contribute to a text’s meaning. But on the web, text itself (including its structural markup) matters most, and presentational instructions like typography take a back seat. Text loads first; typography comes later. Readers are free to ignore typographic suggestions, and often prefer to. Services like Instapaper, Pocket, and Safari’s Reader View are popular partly because readers like their text the way they like it.
What Tim describes there isn’t a cause for frustration or despair—it’s a cause for celebration. When we try to treat the web as a fixed medium where we can dictate the terms that people must abide by, we’re doing them (and the web) a disservice. Instead of treating web design as a pre-made contract drawn up by the designer and presented to the user as a fait accompli, it is more materially honest to treat web design as a conversation between designer and user. Both parties should have a say.
Or as Tim so perfectly puts it in Flexible Typesetting:
Readers are typographers, too.
Monday, June 11th, 2018
Tuesday, November 28th, 2017
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.
Wednesday, November 8th, 2017
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.”)
Sunday, June 25th, 2017
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.
Saturday, October 8th, 2016
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.
Tuesday, August 2nd, 2011
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).