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 con­fer­ence) a book titled Typography for Lawyers. Lawyers are, as Matthew put it, peo­ple who’s work largely depends upon writ­ing, typog­ra­phy, and ensur­ing their read­ers are pay­ing attention.

Before com­put­ers type­set­ters were some of the most com­plex machines around. Matthew sees com­put­ers and pro­gram­ming as a means of extend­ing these early machines.

Matthew’s early foray in to pro­gram­ming was with C and writ­ing a pro­gram for Macs that made kern­ing eas­ier. This meant read­ing through a sur­pris­ingly thin book. As he put, “all the secrets are just right here!” He com­pared 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 hor­ri­ble job of rep­re­sent­ing pro­gram­ming and fail at main­tain­ing reader attention.

Typography is the visual com­po­nent of the writ­ten word. If you’re putting words on a sur­face that will be read you are a typog­ra­pher. It’s the pre­sen­ta­tion that defines typography.

The pur­pose of typog­ra­phy is not to make things pretty. It has a func­tional pur­pose and aims to con­serve reader atten­tion. Pretty may be a side effect but it not the sole goal. If some­one stops pay­ing atten­tion you’re dead.

Matthew argued that the ease of dig­i­tal pub­lish­ing and the access of the web has, to some extent, made doc­u­men­ta­tion lazy. The neces­sity of being con­cise and clear is not nec­es­sar­ily as present.

He pointed to a pic­ture in his book (page 18) of the but­ter­fly bal­lot from Florida’s elec­tion in 2000. As Matthew said, this hor­ri­ble typog­ra­phy got us in to war. In other words, the idea that typog­ra­phy doesn’t have con­se­quences is wrong.

Typography can draw peo­ple to a project or it can repel peo­ple. Take the ear­lier AppleScript story as an example.

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

The secret to typog­ra­phy is what the body text looks like. This is partly because there is more of it than any­thing 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 mate­r­ial is set much smaller. The web inher­ited this as early screens had to be small in order to dis­play a rea­son­able amount of text. With bet­ter screen tech­nol­ogy we shouldn’t feel afraid to use larger sizes.

Line lengths are also fre­quently abused on the web. The ideal length is 45 to 90 char­ac­ters and no more. A sim­ple rule of thumb is that a line which can fit 3 full alpha­bets is too long.

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

Overall typog­ra­phy shouldn’t make users angry. But if you do it poorly, it will. Documentation is for read­ing and poor typog­ra­phy places a bar­rier between users and their goal.

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

Mary Baum was one of the last ses­sions of the after­noon and was talk­ing about typog­ra­phy on the web. Mary has a long his­tory in design and typog­ra­phy 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 frus­trated by the lim­ited typo­graph­i­cal options we’ve had for 15 long years. 5 choices is not enough, it’s time we had more.

Mary pin­points the web-type drought end­ing 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 thank­fully have tons of options with dif­fer­ent type­faces. 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 hun­dreds of hours into learn­ing WordPress themes and just enough PHP to be dan­ger­ous. She got started with the Thematic frame­work but is now work­ing with the Genesis frame­work 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 type­faces in our sites. There’s plenty more but those are the ones Mary pointed to as worth using and, in some cases, pay­ing for.

All those hosted solu­tions 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 care­ful of though is upload­ing the license infor­ma­tion 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 care­ful to make sure you have a bul­let­proof CSS set up for your font. Fontspring posted an updated ver­sion of bul­let­proof CSS to use that will cover all the way back to IE6.