top | item 6094946

Practical Typography

472 points| dchest | 12 years ago |practicaltypography.com | reply

159 comments

order
[+] danso|12 years ago|reply
IANAL, but I'm purchasing the OP's other book, "Typography for Lawyers" ($10 on Kindle) http://www.amazon.com/Typography-for-Lawyers-ebook/dp/B005JV...

Partly to thank the author for writing the OP, but also because I find it just fascinating that he found a niche not just in typography, but the importance of typography in the legal arena.

Seems like there should be an equally important niche for a book, "Programming for Lawyers", much of which would involve batch document scanning and analysis.

[+] lifeformed|12 years ago|reply
First time I've seen "IANAL" used outside of the context of giving legal advice.
[+] karlb|12 years ago|reply
Even if you're not a lawyer (I'm not), I'd highly recommend his book. From memory, its main shortcoming is that it doesn't go into depth about those aspects of typography that are specific to the web (e.g., web-safe fonts, font substitution, etc.).
[+] jkbyc|12 years ago|reply
I think there's a more urgent need for a book "Law for programmers"
[+] swah|12 years ago|reply
It should be strange to read about typography on a Kindle, though.
[+] WickyNilliams|12 years ago|reply
I feel bad just coming here to post a link, but another great resource is Mark Boulton's "Designing for the Web". It's been released as a free book online[1]. (I'm not affiliated with this in any way)

It has lots of detail on typography, but focussed around the web. It also covers things like colour and layout amongst other topics (e.g. research and workflow, which I find less insightful). It's a great and fairly quick read :)

[1]http://designingfortheweb.co.uk/book/index.php

[+] pron|12 years ago|reply
A very interesting read.

I've always been interested in fonts, but I have a question regarding their price. Why are they so expensive? I don't know how long it takes to design a good font, but is it longer than writing a good smartphone app? Font pricing feels outdated. It feels from an era when publishing was done by large companies.

If I could buy an excellent font for $10-$20 I would literally buy dozens. But font designers are making their work a serious expense, making me ask myself "is it worth it?" In most cases, the answer is no.

[+] ics|12 years ago|reply
One thing is that traditionally users don't buy fonts. In the past, the only people you expected to get any money from were people who got paid to set the type. You might spend months to years working on a single typeface and in that time a considerable amount of work had to be done to market it (done usually by the foundry you were working with), because after that much time a real flop might mean the end. Over the last few decades the barriers for creating and distributing type have definitely shrunk significantly, but there's still an issue over how type should be licensed and exactly what it needs to compensate for. Many typefaces are created by people who are otherwise employed as graphic designers or illustrators, while the individuals who are solely type designers have to contend for their living with type only in what is now a sea of free or corporate subsidized fonts (i.e. what came on your system).

---

If what I just typed makes no sense at all, I blame either my insomnia or the ambien which I refuse to take for it.

[+] tptacek|12 years ago|reply
If you would buy dozens of fonts at $10, you'll buy 2 fonts at their current price. Pick a serif and a sans, preferably that harmonize. Wear them like your one good suit, and ignore the rest of the fonts. Be happy you had such an amazing selection to work from, and that whittling all of typography down to those two means your chosen fonts are all the more personal.

I can't imagine a reason why you'd want dozens of fonts, any more than I could understand wanting dozens of pairs of dress shoes.

[+] Chris_Newton|12 years ago|reply
Why are they so expensive?

It’s a combination of the attention to detail that goes into a professional-quality font and the sheer scale of the work, which is multiple orders of magnitude greater than writing a good smartphone app.

I wrote about this once before if you’re interested in a deeper explanation:

http://www.reddit.com/r/graphic_design/comments/zaxs1/pick_y...

[+] jongold|12 years ago|reply
For a good font—not some crap on DaFont—you're talking many, many thousands of hours. Often just one person's labour, often by eye. Software makes it a little bit easier, but you're still kerning every single possible character combination by eye, and you're still redrawing glyphs at every possible size to make sure they don't render like shit.

There are lots of dinosaurs in typography—Linotype etc—but the best studios are tiny. Some great links to great studios here: http://jessicahische.is/thinkingthoughts

[+] grinich|12 years ago|reply
Try to make one. You'll figure out why soon enough. ;) Like making a good piece of software, there are hundreds of subtleties in great typeface design that a reader never thinks about.

Jesting aside, there are a handful of large foundries who are still behind the times somewhat. They're used to dealing with only a few clients (design agencies usually) and certainly not the web. A few have thankfully started coming around, especially thanks to work by TypeKit/Adobe. For example, HF&J now has a surprisingly good webfont service.

But unless you're going for something really specific (Proxima Nova, Whitney, etc.) you can very likely find a great similar font that is already open and even CDN'd by Google. (Though their browser is lousy.) https://www.google.com/fonts/

[+] mostafah|12 years ago|reply
> I don't know how long it takes to design a good font, but is it longer than writing a good smartphone app?

No if you spend years on an app! Seriously, developing a good type, from the idea to the final font files, is massive undertaking and can’t be compared to developing software. (I’m an experienced software developer and also a not-so-experienced type designer.)

[+] SCdF|12 years ago|reply
>If that’s im­pos­si­ble, you can still make good ty­pog­ra­phy with sys­tem fonts. But choose wise­ly. And nev­er choose times new roman nor Arial, as those fonts are fa­vored only by the ap­a­thet­ic and slop­py. Not by ty­pog­ra­phers. Not by you.

OK, I appreciate the advice, but why is Arial bad? I mean, I can't even tell the difference!

Reading deeper:

> My aver­sion to Comic Sans—king of the goofy fonts—prob­a­bly comes as no sur­prise. But why Arial? Arial was cre­at­ed as a Helvetica sub­sti­tute. To many, they’re indistinguishable. But to ty­pog­ra­phers...

Right. So what I get from that is, if you care about making sure your content is fashionable to typographers, don't use Arial. Otherwise (i.e. nearly all the time) Arial is fine.

[+] nsfmc|12 years ago|reply
Whether or not you like arial is totally on you. In many cases, especially onscreen, arial looks perfectly fine. Many of the norms around 'good' and 'inappopriate' type are the same around fashion/clothes. You can wear whatever you want and it's on you whether or not 'you wear it well.'

As an aside, when i was in grad school, the style coming out of yale and the werkplaats typografie was this severely default design aesthetic. Times new roman massively overlaid atop a xeroxed image at times abandoning legibility. It was like high-art zine culture blended with dutch sensibility, i.e. http://ffffound.com/image/d6f63117fcf5ea64c59c66b8af85e2389d...

But to the point about what makes arial "good" or "bad" is the same thing that makes Didot a bit tough as a text face (it just wasn't designed to be used that way). And same with arial, it was designed as a screen font that prints ok. I don't think the whole "lesser helveltica" claim is entirely fair to arial, but you have to accept it for what it's for: a generic screen font. If that is the look you are hoping to rock, use it wherever you want.

And to the larger point: all prescriptive advice should be treated like training wheels. if you already have the sense to know what you're doing, you can safely avoid the advice. if you don't know how to critique your own work, then it helps to think about what the prescriptive advice is getting you to avoid.

If you are at the point where you are making intentional decisions about what your design should look like, then keep on keeping on. But it helps to be aware of the cultural baggage that those choices bring along with them. I critted somebody's poster once and made the offhand comment: "oh, that looks computery" and i was basically trying to say "that has that homemade camcorder feel that home movies have, but if it were a poster that had been made with a computer." and it turned out after some period of time that i was actually reacting, subconsciously, to the fact that it was set with arial. How weird is that? But it was because i was so familiar with that look as something that tasted digital that is seemed weird in print. It wasn't wrong, it was just giving off that vibe.

Likewise, butterick is trying to make his own mark, setting his own tone. That's his right, he's alluding to certain traditions and aesthetics. It's fashion, yes, but it's also all the choices and feelings that those fashion choices bring along with them.

[+] msutherl|12 years ago|reply
Arial actually looks much better onscreen at small sizes, since that's what it was designed for. It bothers me to no end when "designers" use Helvetica or Helvetica Neue on websites with small body copy. Guys: Arial is Helvetica, but optimized for the screen. Use it.

As for why not Helvetica or Times New Roman, it's because they're boring. Using either of these typefaces is a non-choice. It's like not using any color in your design. If you do it right, your design can look timeless, transparent, minimal. If you do it wrong, you look lazy. Arial is a great choice for somebody like Google who wants to position their brand as if it's the very substance of the internet. Before the recent re-branding, they looked lazy (because they were). Now they look timeless. But if you want your brand to have a unique character, or you have interesting typographical problems to solve, you should look into other typefaces.

[+] Groxx|12 years ago|reply
After a bit of skimming through, I think this advice is highly specific to print. In this case, universally avoiding screen-optimized fonts in favor of their print-optimized near-clones seems rational; they serve different goals. Screen fonts lack printable subtleties because they wouldn't display well, and weights and spacing are influenced by e.g. pixel size, which isn't really an issue in print.
[+] chalst|12 years ago|reply
> One space be­tween sentences: Always one — nev­er two. Some top­ics in this book will offer you choic­es. Not this one ... Or more gen­er­al­ly: put ex­act­ly one space af­ter any punctuation. - http://practicaltypography.com/one-space-between-sentences.h...

Sigh - another source for a rule that shows evidence of thinking like a writer, not as a typographer. We can forgive Bringhurst, but ... the single vs. double space choice is a false dichotomy in a world with proportional fonts, font expansion, stretchable space, and the like, since there is no such thing as the width of a space.

TeX, for instance, allows the space after sentences to stretch more than interword space, and gives inter-sentence space that is 1/3 wider than interword space where there is no space (default for CMR).

[+] arrrg|12 years ago|reply
That changes nothing at all. One space is correct and nothing else.

This particular document doesn't even touch on more advanced tings like this so it makes sense to leave it out and keep it to the simplified but still correct statement: One space, nothing else. That's it. If you do something else you are wrong.

[+] griffindy|12 years ago|reply
While the fonts themselves are proportional, usually each letter (counting space as a letter) has the same width every time, it just happens that an 'i' takes up less space than 'w'. Regular spaces are usually 'en-spaces', meaning the width of the 'n' in whatever typeface you're using.

That being said, spacing is obviously very different in justified type (and a huge pain to set by hand), where it will change depending on which words fit in the line.

[+] jschulenklopper|12 years ago|reply
Interesting compilation of sensible, actionable advise on typography... but there's one choice that IMO hinders usability for this site: the absence of an clear(er) indication of hyperlinked text. The small caps is too subtle (for me), and also against one of the rules mentioned: "Never use unlining, unless it is a hyperlink". That at least suggests to underline hyperlinks.

This use is also in contrast with Nielsen's advise since 2004: "Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines", on http://www.nngroup.com/articles/guidelines-for-visualizing-l...

[+] lnanek2|12 years ago|reply
Haha, yeah, took me a bit to figure out I could click. Combined with the bizarre print era font instead of something modern I just expected it to be scanned images or a PDF or something and not interactive at all. Maybe they need a new rule not to use old fuddy duddy fonts in modern media like web sites.
[+] bertzzie|12 years ago|reply
I've been reading the "How to pay for this book" page [1] and noticed that there the author said:

> I pro­grammed a new web-pub­lish­ing sys­tem.

I seem can't find any other reference to that, and still not sure about emailing the author directly yet. My google-fu failed me on this one. Anyone know if the author's system has been published or sold?

Thanks before.

[1}: http://practicaltypography.com/how-to-pay-for-this-book.html

[+] Macuyiko|12 years ago|reply
See http://practicaltypography.com/end-credits.html#Colophon

> The book was writ­ten and de­signed us­ing Pollen, > a book-pub­lish­ing sys­tem that I cre­at­ed for this > project. Pollen was built with Racket, a pro­gram­ming > lan­guage de­scend­ed from Scheme & Lisp.

So no, it doesn't seem to be published.

[+] mrottenkolber|12 years ago|reply
I just read to the 10 minute guide to verify my fears: While some points are correct, the 10 minute guide doesn't teach you anything.

Ihmo every (web-)designer should read at least a few essays from Jan Tschichold: http://www.modernism101.com/tschichold_form_of_the_book.php

And I say that as a typography enthusiastic software engineer. The thing about typography is, when you do it right, it pretty much doesn't leave any room for creativity. There is one right way to print text in a given format.

For the web I can only insist that the users choice of font and size should be respected. From there on you can only work in EMs. The first rule is that a line has to span 8-12 words. That leaves you a text width of about 66em. The line height should be 1.2 times the size of the font, e.g. 1.2em. Every element of the text (paragraphs, headings, listings, tables, images, ...) should be spaced by multiples of the line width to keep the text rythm (important).

To get an idea what I am talking about you can visit my web site: http://mr.gy/services.html

PS: justified alignment is to be avoided since the browsers lack proper algorithms. bSad but true.

[+] scrrr|12 years ago|reply
I find this page hard to read: http://practicaltypography.com/summary-of-key-rules.html

Perhaps it looks good on a tablet computer. But it feels odd to learn about typography from a page that feels difficult to read.

[+] zaguios|12 years ago|reply
I completely agree, his excessive use of "Small Caps" is incredibly annoying since it just looks out of place with the rest of the text. I'm also not a fan of his font choice, rather than picking it to promote readability it looks like he just picked it so he could be snobby about using "professional looking fonts". I wouldn't be so up in arms about this if he hadn't labeled the entire site "practical typography" since I have more trouble reading this site than I do almost every other site I visit.
[+] martin-adams|12 years ago|reply
Interestingly there is something about that page (or my eyes are tired, in the wrong light etc) that makes that page hard to read for me.

I don't know what it is, but feels like my eye sight is only able to comprehend the point focus of what I'm looking at.

[+] pdenya|12 years ago|reply
It's the links not being different enough from the body text. Add "a { color: #31A2E2; }" to the CSS and it's easily scannable again.
[+] Brajeshwar|12 years ago|reply
Almost half-way through it and I'm learning quite a lot of new things. Btw, for those who deal with web typography, you should look at Typeplate[1]. That's an awesome typography starter kit for your project.

http://typeplate.com/

[+] melloclello|12 years ago|reply
Oh man, he's hating all over Times New Roman.

http://practicaltypography.com/times-new-roman.html

Times is great! I would say that any hate for Times is a repressed memory from the days when it was the default font in Microsoft Word. I mean, wow, remember this?

http://i.imgur.com/6QV6Qvr.png

[+] gabemart|12 years ago|reply
I feel like I'm missing the joke. The section "hating on" Times New Roman is displayed in the font-family Times New Roman. Is the author just having some fun?
[+] arrrg|12 years ago|reply
Did you read that? I seriously doubt your reading comprehension skills if you characterize what he wrote as "hating all over Times New Roman".
[+] prewett|12 years ago|reply
The author seems to have advice that sounds interesting, but from a casual reading he doesn't seem to say why his advice is correct. Why is single-spacing to short? Why is line spacing 120-145% of the point size? Why is Times New Roman bad (I personally think it is really bland, but what is his reasoning)?
[+] samweinberg|12 years ago|reply
Agreed. His bio[1] suggests that he knows what he's talking about, but without any in-depth explanations the reader just has to take his word for it. Doing something without knowing why you are doing it, based on what you read in book called Practical Typography, is not very practical.

[1]:http://practicaltypography.com/end-credits.html#bio

[+] MrGando|12 years ago|reply
I would love to know if there are some resources for typography on mobile (iOS). At WWDC 2013, it became very clear that iOS 7 will make a huge push in the use of typography as one of the main ways to give an app more personality. In the past the emphasis was put on world-like textures, graphics, etc.

Any advice on this matter?

[+] jimhefferon|12 years ago|reply
Does anyone know of a place where a person could get brief advice about suitability of various fonts? Something like, "A humanist font is characterized by .. and is most natural in a less-staid document, such as a work of fiction" (Please don't write me that it is wrong; I made that up as an example of the kind of thing a type-ignorant person like me might find useful.)

I don't expect to become a brilliant designer, I am only hoping to avoid what an expert would regard as ghastly errors, or perhaps better said, to help me make some reasonable choices.

[+] ics|12 years ago|reply
Matthew Butterick is a pretty interesting guy, with an interesting background: http://typographyforlawyers.com/about.html

This looks great, I'm anxious to give it a thorough going-through in the next couple days. There are some good tips outside of just type as well, including this bit from the resume sample:

"Avoid dense text by us­ing a sec­ond page. [...] Students, this ad­vice doesn’t ap­ply to you. You’ve only got one page of ma­te­r­i­al. Really."

[+] pasbesoin|12 years ago|reply
I owe a permanent and longstanding debt to Don Knuth for giving me a grounding in typography via his now renowned blue-covered TeX book.

At the time, it was perhaps unique in its perspective.

It was so well written that, regardless of how much computer technology has "advanced", I suspect it would still be a good, useful, and entertaining introduction.

Unfortunately, my copy was the victim of some flooding and I don't currently have ready access to go back and revisit it. But if you have access or are particularly intrigued, it might be worth a look.

[+] jongold|12 years ago|reply
Interesting book but confusing advice from someone who seemingly knows what he's talking about.

The very first chapter starts with three hyphenated lines in a row! I’m imaging my typography professors facepalming right now… http://practicaltypography.com/typography-in-ten-minutes.htm...

[+] arrrg|12 years ago|reply
That seems rather like a limitation of web tech than anything else. You do not get very much control over hyphenation on the web. (Also note that dynamic hyphenation is necessary here since the layout reacts to brwoser width changes.)
[+] lobster_johnson|12 years ago|reply
Hyphenation depends on your screen and browser. (Try zooming in and out in a browser such as Chrome to see it change.) It's more the fault of the browser's flow algorithm than of the page itself.
[+] 0xdeadbeefbabe|12 years ago|reply
I love this font, and I'll probably buy it. I want the designer to get money for it.

But, what is this about read only fonts? If the browser can see the font then the browser can steal the font (I mean the program and the user of the program respectively).

If it were my font I'd aim for detecting cheaters instead of preventing cheaters. Maybe the font file can include an hmac? When I don't need money, either after death or maybe before, I want them to steal my font so it becomes popular (more popular than Arial so the world will improve). Until then I'll litigate, or publicly shame or whatever I want.

Also this part of the license made me laugh (http://mbtype.com/license/): "If you have unusual or excessive technical support needs, I can terminate your license by refunding your license fee."