Write the Docs: Matthew Butterick — Typography for Docs

I’m at Write the Docs today in Port­land 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 Typog­ra­phy 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 Apple­Script book that was 900 pages. As he put it, “What the hell requires 900 pages for Apple­Script? 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.

Typog­ra­phy 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.

Typog­ra­phy can draw peo­ple to a project or it can repel peo­ple. Take the ear­lier Apple­Script 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 Geor­gia 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.

Over­all typog­ra­phy shouldn’t make users angry. But if you do it poorly, it will. Doc­u­men­ta­tion 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 Sep­tem­ber of 2009. He saved us. :)

We came from a time of Times, Geor­gia, Ver­dana, Tre­buchet, and Tahoma. Now we thank­fully have tons of options with dif­fer­ent type­faces. Embed­ded Open­Type has been around since 2004 but it’s only till recently that type foundries have opened up licenses for use on the web.

Back­ground with WordPress

Mary just got started with Word­Press within the last year but in that time has put hun­dreds of hours into learn­ing Word­Press themes and just enough PHP to be dan­ger­ous. She got started with the The­matic frame­work but is now work­ing with the Gen­e­sis frame­work but also uses Ele­gant themes for some sites.

Type options

Cufón, sIFR, Type­kit, 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.