Tag Archives: typography

Write the Docs: Matthew Butterick – Typography for Docs

I’m at Write the Docs today in Portland and will be post­ing notes from ses­sions through­out the day. These are all posted right after a talk fin­ishes so they’re rough around the edges.

Matthew wrote (and gave out at the conference) a book titled Typography for Lawyers. Lawyers are, as Matthew put it, people who’s work largely depends upon writing, typography, and ensuring their readers are paying attention.

Before computers typesetters were some of the most complex machines around. Matthew sees computers and programming as a means of extending these early machines.

Matthew’s early foray in to programming was with C and writing a program for Macs that made kerning easier. This meant reading through a surprisingly thin book. As he put, “all the secrets are just right here!” He compared this to an AppleScript book that was 900 pages. As he put it, “What the hell requires 900 pages for AppleScript? It’s a piece of shit!” These long books do a horrible job of representing programming and fail at maintaining reader attention.

Typography is the visual component of the written word. If you’re putting words on a surface that will be read you are a typographer. It’s the presentation that defines typography.

The purpose of typography is not to make things pretty. It has a functional purpose and aims to conserve reader attention. Pretty may be a side effect but it not the sole goal. If someone stops paying attention you’re dead.

Matthew argued that the ease of digital publishing and the access of the web has, to some extent, made documentation lazy. The necessity of being concise and clear is not necessarily as present.

He pointed to a picture in his book (page 18) of the butterfly ballot from Florida’s election in 2000. As Matthew said, this horrible typography got us in to war. In other words, the idea that typography doesn’t have consequences is wrong.

Typography can draw people to a project or it can repel people. Take the earlier AppleScript story as an example.

The 4 things Matthew says you need to know about typography are: font choice, point size, line length, and line spacing.

The secret to typography is what the body text looks like. This is partly because there is more of it than anything else. In terms of font choice Matthew said, “when you’re using Arial or Georgia you’re sort of using the font of last resort.”

For point size he pointed out that 12pt type is not the world’s default size. Most printed material is set much smaller. The web inherited this as early screens had to be small in order to display a reasonable amount of text. With better screen technology we shouldn’t feel afraid to use larger sizes.

Line lengths are also frequently abused on the web. The ideal length is 45 to 90 characters and no more. A simple rule of thumb is that a line which can fit 3 full alphabets is too long.

120-145% of the point size of text is Matthew’s ideal range for line spacing.

Overall typography shouldn’t make users angry. But if you do it poorly, it will. Documentation is for reading and poor typography places a barrier between users and their goal.

WordCamp St. Louis: It’s about time. It’s about type!

Mary Baum was one of the last sessions of the afternoon and was talking about typography on the web. Mary has a long history in design and typography and believes it’s about damn time we have full access to type on the web.

The web-type drought

Up to recently we have all be frustrated by the limited typographical options we’ve had for 15 long years. 5 choices is not enough, it’s time we had more.

Mary pinpoints the web-type drought ending on the day Paul Irish posted his work on @font-face in September of 2009. He saved us. 🙂

We came from a time of Times, Georgia, Verdana, Trebuchet, and Tahoma. Now we thankfully have tons of options with different typefaces. Embedded OpenType has been around since 2004 but it’s only till recently that type foundries have opened up licenses for use on the web.

Background with WordPress

Mary just got started with WordPress within the last year but in that time has put hundreds of hours into learning WordPress themes and just enough PHP to be dangerous. She got started with the Thematic framework but is now working with the Genesis framework but also uses Elegant themes for some sites.

Type options

Cufón, sIFR, Typekit, fonts.com, Google web fonts are all options that we have now for using typefaces in our sites. There’s plenty more but those are the ones Mary pointed to as worth using and, in some cases, paying for.

All those hosted solutions are good but Mary still prefers going the route of using your own fonts on your own server using @font-face. One thing to be careful of though is uploading the license information to your own server as well so that it’s clear you have the rights to use that font on the web.

When using @font-face you want to be careful to make sure you have a bulletproof CSS set up for your font. Fontspring posted an updated version of bulletproof CSS to use that will cover all the way back to IE6.