My notes from A Book Aparts’s latest publication—On Web Typography by Jason Santa Maria.
Just because something is legible doesn’t mean it’s readable. Legibility means that text can be interpreted, but that’s like saying tree bark is edible. We’re aiming higher. Readability combines the emotional impact of a design (or lack thereof) with the amount of effort it presumably takes to read. You’ve heard of TL;DR (too long; didn’t read)? Length isn’t the only detractor to reading; poor typography is one too. To paraphrase Stephen Coles, the term readability doesn’t ask simply, “Can you read it?” but “Do you want to read it?”
Most people are short on time. By not caring, by not attending to your typography, you might as well close the browser window for them.
Two common terms you’ll see thrown around when talking about typography are typeface and font. Typeface is the name for the design in full, whether it’s a style or family of styles. For example, Helvetica is a typeface. Font refers to the format or storage mechanism for that design. Helvetica.ttf is a font.
Typefaces can be made up of numerous font files. No matter how many files there are, it’s still one typeface. Nick Sherman gave us a great analogy to remember the distinction: a typeface is to a font as a song is to an mp3.
When it comes to web fonts, a type designer’s intent has big implications for your design. Each web font you choose means a little more wait time for users as browsers load the font file. Some browsers handle that wait by displaying content as assets are still loading. When that happens, you may briefly see page content in a default font and then see it redrawn in the correct font when it’s ready. The effect is a FOUT, or flash of unstyled text.
Proper quotation marks are often overlooked, but it’s important to know the difference. Curly quotes, usually called smart quotes, commonly look like filled-in 6s and 9s. Straight quotes, often called dumb quotes, are usually straight and vertical.
Punctuation is a system. That’s why proper quotation marks and apostrophes look like they’re part of the same family as commas, periods, colons, semicolons, and more, whereas straight quotes don’t.
As soon as you get that reputation among friends and family, they will inevitably ask you the same question: “What’s a good font to use?” It’s a difficult question, because typefaces don’t exist in a vacuum. If you decided to make a painting, you probably wouldn’t start by asking an artist friend, “What color should I use?”
Good fonts cost money because they take a lot of work to become good fonts. They can stretch your budget, but consider this: a type designer’s work provides tools for us to use to make money, and our money gives them the means to keep making tools. We get paid for our work, and they get paid for their work. It’s that simple.
Without contrast, we don’t have hierarchy, and without hierarchy, the typography feels indistinguishable and our readers are left without a map.
Claude Debussy once said that music is the space between notes. Similarly, good typography is as much about the space between the letters as the letters themselves.