In this excerpt from Flexible Typesetting
, Tim Brown
‘s latest book, he articulates the challenges facing the modern web typographer. We’re lucky that Tim is kind enough to share this excerpt with us, showing us just the kind of quality we can always expect every time he gets busy at work.
In this action packed article/chapter, Tim talks us through the value of typesetting and its place within the practice of typography. He also introduces a neat new concept of “pressure” to help us understand how sometimes typesetting can feel wrong. On why care about good typesetting:
But when you take shortcuts, you miss opportunities to care about your readers, the text in your charge, and the practice of typography, all of which are worthwhile investments. Spending time on these things can feel overwhelming, but the more you do it, the easier and more fun it becomes. And you can avoid feeling overwhelmed by focusing on the jobs type does.
Of course, we know that some typefaces just work better than others for headlines or body copy. Ornate type can be simply too much; too much detail, too many things going on. And, according to Tim, just as traditional text typefaces are not great for signage and user interfaces. Sleek, geometric fonts can make small text hard to read.
Knowing the characteristics of all these, as well as the requirements (and mood) of our project, is key to making good design decisions.
I love how Tim breaks down typesetting into 3 different kinds of jobs:
- Setting type
- Arranging type
- Calibrating type
Setting type well makes it easy for people to read and comprehend textual information. It covers jobs like paragraphs, subheads, lists, and captions.
Arranging type turns visitors and passersby into readers, by catching their attention in an expressive, visual way. It’s for jobs like large headlines, titles, calls to action, and “hero” areas.
Calibrating type helps people scan and process complicated information, and find their way, by being clear and organized. This is for jobs like tabular data, navigation systems, infographics, math, and code.
Tim goes deeper into each one of these jobs, but I’ll let it up to you to read it in his own words. In the meantime, let’s jump to the question of “why do some websites just feel wrong?”
It’s not hard to find websites that just feel, well, sort of wrong. They’re everywhere. The type they use is not good, the font size is too small (or too big), lines of text are too long (or comically short), line spacing is too loose or too tight, margins are either too small or way too big, and so on.
If a website is uncomfortable to read or feels off, it’s almost certainly due to something which went wrong in the typesetting front. But, as Tim points out, it’s not that the typographer made a whole bunch of bad decisions along the way. An experienced designer can still inadvertently produce a website that feels off somehow. Tim calls this pressure: Specifically, websites feel wrong when they put pressure on typographic relationships.
Different typefaces have different size and line-spacing metrics, often varying from each other a great deal. A single glyph stays inside an “imaginary box” which defines where the glyph sits on the baseline — changing a font’s size is effectively changing the size of the box.
…suffice it to say that glyphs live within a bounding box called the em box, which is a built-in part of a font file. Type designers decide how big, small, narrow, or wide glyphs are, and where they are positioned, within this box. The em box is what becomes our CSS-specified font size—it maps to the CSS content area.
Every text block, every shape, every space in a composition relates to another. If one text block is off-kilter, the whole work suffers.
Tim so elegantly and eloquently describes how pressure works, and what we should do/worry about when we’re working with a type system, that I’m stopping right here; read on the rest of the article
on A List Apart
to know the nitty gritty details. Or just go ahead and blindly buy Tim’s book.