Butterick’s Practical Typography 2º Edition | Hacker News Reader

Butterick’s Practical Typography 2º Edition

practicaltypography.com

182 pointsruifigueiredo52 comments

I spent an evening reading this, it was enjoyable. It was more enjoyable than an "average" pre-covid entertainment I could get for $19. So I sent $19 for the author, all for a very enjoyable evening.

My favourites:

1. https://practicaltypography.com/system-fonts.html strong thoughts on Arial font.

2. https://practicaltypography.com/the-cowardice-of-brave.html very strong thoughts on Brave browser.

3. https://practicaltypography.com/websites.html author bashing hamburger menu (and some other current-day fashions). Although I disagree with custom fonts for websites -- fonts for that page alone are a whopping 713KB compressed. See https://danluu.com/web-bloat/

4. https://practicaltypography.com/why-you-should-pay.html meta: about paying for a free book.

There is also good educated advice on font recommendations. I also like his fonts, but don't have a use for them yet.

I’ll be honest - I love straightforward no bs criticisms and strong personal opinions. It’s done in a way that’s sort of tongue in cheek humor.

We’re going to lose this aspect of our society as we demand more rigor in arguments and not let people speak their minds. Not everything needs sources and logic. Sometimes something just sucks and people should just say that’s the case. It’s their opinion after all.

I think Matthew is doing great work. I have a lotmof respect for what he does and how he goes about it. I find that many things he says are good ways to make pleasant to read (and legible) documents. But:

Please do use Arial. I find it better than about 95% of the choices done by "people that care about typography". Or even better, let other people that care about how their web experience looks chose for themselves. I had the habit of not allowing websites to use their own fonts, but since about 5 years this has led to so much breakage because apparently I HAVE to download 700kb of fonts to render the site properly.

Even though browsers have started rendering web fonts OKish the last couple of years, I still encounter sites daily where I would prefer a monospaced font to whatever abomination the site is using. A bad choice of font is worse than an ok font that make a minuscule group think "this guy doesnt care about typography".

... And don't get me started on ligature abuse...

Edit: for some reason though, people seem to produce better in-print material than web material. Maybe the tooling is better, or people just think it through better.

I am okay with people choosing whatever font they like, it's their content and their artistic freedom to do so. You HAVE to download their font to the same extent you have to download their images and CSS.

There's always reading mode for when their choices aren't compatible with a given configuration.

Having said that, I haven't come across many if any sites that don't render well because of poor font choices.

> Please do use Arial. I find it better than about 95% of the choices done by "people that care about typography".

It may be better than 95% of the choices done by people who try to differentiate by picking a non-default font for the sake of picking a non-default font, which is certainly worse than just keeping the default, but I doubt very much that it is better than even 5% of the choices made by people who care about typography.

I am not so sure. Most of the self proclaimed typographers I have met seem to be the kind that spends ages selecting fonts and redesigning their blog or sites without producing any actual content and then whining on people that has content people actually wants to read. Not only is there no content, the little that is available is almost baroque.

I feel sorry for the people who do know what they are talking about because of the people they have to share community with.

Edit:

I come of as something of a prick. I know. In reality I don't really care. I just find that so much time spent making my web experience worse, and it is provoking. Most of what I read is PDFs (preferably printed) typeset using latex in computer modern, and I like it that way.

Adopting Arial is at the intersection of several classes of bad web font choices:

  - random, because it ended up being the browser's default sans serif;
  - someone not really interested in typography went through their available fonts, i.e. system fonts and a few random ones, in alphabetical order and "A" offered enough choices for them;
  - "Arial" is a short simple word, and someone was too lazy to check or remember other font names;
  - an amateur designer made a pathetic attempt to reproduce totally inappropriate "Swiss" design, badly, or to be even more inappropriately ironic;
  - "overused" and therefore "fatal to the designer's credibility", in the euphemistic words of the linked article; a designer that doesn't realize that fonts can be overused has less familiarity with typography than the general public and is therefore not a designer.

Oh, I agree. It is all what you say it is. I would add boring and bland.

Still more legible than the weird-ass Baskerville-geometric chimaera of a website I have open in another tab (which I won't name since I do like the guy).

This website has terrible styling of anchors, and I accidentally clicked a link over a dozen times while reading just one page, on my touch screen phone. Why? Because they're completely invisible. There is no indication whatsoever that some particular text is a link, apart from a faint degree symbol (what?) at the end of the sentence. Please, don't re-invent the wheel: links should be under-lined, or at least coloured blue or some other distinctive colour. And even if you tap on a completely blank part of the page (such as to clear a selection), there is apparently some hidden link that brings you to a random page. I can't figure it out.

In general, I find the website hard to use. Even though a lot of his typographic advice is sound, the UX is just bad and not suitable for a website.

i don't know; i was inclined to agree just out of a knee-jerk "don't break standards" reflex, but it's a deliberate decision for which he makes a very compelling point:

Vigorously styled hyperlinks on a page tend to move to the foreground of a reader’s attention, like an HDTV in a hotel bar. (See also maxims of page layout.) The red circle is meant to be noticeable while you’re reading the sentence that contains the link. Otherwise it disappears, so as not to distract.

edit: though having internal links be completely invisible until you hover on them is a startlingly bad design decision

The first edition literally changed the way I type and gave me additional paranoid behavior other than kerning awareness, which I already obtained. I kept it as a reference for years until most habits became ingrained.

Attention to non English writers: always ensure what your language’s typography rules requires for every topic. You may find subtle and huge differences!

> You may find subtle and huge differences!

Quotation marks especially vary, see wikipedia:

https://en.wikipedia.org/wiki/Quotation_mark#Summary_table

I have enjoyed perusing this in the past, but when I see the word "typographer" split across two lines as "ty" and "pographer" [1] in the first paragraph of the "Typography in ten minutes" page, [2] it gives me pause. What is the point of having two letters (especially these two, which do not form a morpheme) on the first line?

I find this to impair readability and not to enhance aesthetics in any meaningful way. Is there something I'm missing?

1: https://imgur.com/P0trcqu

2: https://practicaltypography.com/typography-in-ten-minutes.ht...

> What is the point

That is not a deliberate choice, but an unfortunate artifact of setting the content div to have a maximum width of 652 pixels. If you reduce the width of your browser, the word "better" will be split instead. If you reduce it further, the line wrapping is achieved without splitting any words in that paragraph.

I assumed it was some sort of algorithmic choice to allow hyphenation that leaves only two characters on one line. I would set the threshold for this to be greater than 2, assuming no other 'intelligence' is used. For example, it could be OK in some circumstances, in the case of the word "irredeemable". But even there, I think it would be jarring to see "ir" at the end of a line, and I would rather just have the whole word on the next line.

But then I'm a crazy fellow who thinks that this [1] is a good idea for enhancing readability.

1: https://chrome.google.com/webstore/detail/beeline-reader/ifj...

He has written and uses (at least for the last edition) a Racket library / language for this book that also automatically adds unicode soft hyphens where appropriate in words, so I assume this is one of them

How does it decide where is appropriate? Is it based on the length of the potential fragments, the length of the word, some sort of ratio, or something else?

I'd rather have a hyphenation algorithm err on the side of fewer hyphenations, but perhaps that's just me. My understanding is that a ragged right edge can improve visual tracking ability because it makes the paragraph less visually uniform. No one wants things to be too ragged, but in this case two chars doesn't seem like it's worth the tradeoff.

Uses Knuth/Liang hyphenation algorithm, which prioritises prevention of incorrect hyphens over perfect output (which is not practical -- dictionary size has to be limited). It's never going to be completely correct, the trade-off for having a few weird hyphenations is that overall it's generally ok, and yes, the alternative is ragged right. By default minimum length is two, and I assume the output is using that (haven't checked).

Edit: found the overview from the docs -- https://docs.racket-lang.org/hyphenate/index.html

And Liang's thesis (PDF): https://tug.org/docs/liang/liang-thesis.pdf

Edit edit: from memory (and it's been about 9 years since I last worked in print so a bit foggy), for print it's generally best to set either 2 or 3 as a minimum: 4 is pushing it and tends to cause issues. With print, set using the hyphenation algo then worked forward from the start of the book fixing any spacing issues. With web can't do latter and width is changeable, so there are always going to be issues with justification. I can't imagine any situation where the browser could operate fast enough to render accurately hyphenated text without using a huge amount of resource.

Incidentally, this is no longer necessary. Gwern.net used the same trick but we removed it last week (to much rejoicing).

The main reason to auto-add soft hyphens is because, unlike almost all other browsers, desktop Chrome has for decades not supported hyphenation (even though mobile Chrome does!). But they finally shipped support last year, and now market support for hyphenation is around 95%+ according to CanIUse. So you can just drop the soft hyphen pass and rely on normal CSS to specify justification.

This is good because it simplifies HTML creation, makes the HTML noticeably smaller & better compressing, makes it more readable, search/replace more reliable, buggy screen readers no longer pronounce soft hyphens (another real WTF moment for me), doesn't require hacks like the JS copylistener to strip them out...

Anyway long story short, if you've been using the soft hyphen trick, I suggest revisiting the decision now.

This seems like browser behaviour not an author choice. It happens for me in Safari but not in Firefox or Chrome. Looking at the DOM, it’s just the whole word, no Unicode characters or CSS that would do this.

The words in the text have soft hyphens[1] that allow word breaking.

[1]:https://en.wikipedia.org/wiki/Soft_hyphen

You’re right. Wow, that’s annoying – when you copy and paste the value from developer tools in Safari it strips those characters, so you only get the printable characters.

That's the (a) way that TeX would hyphenate it:

  $ tex
  This is TeX, Version 3.14159265 (TeX Live 2016) (preloaded format=tex)
  **\relax
  *\showhyphens{typographer}
  Underfull \hbox (badness 10000) detected at line 0
  [] \tenrm ty-pog-ra-pher

Thanks, that’s interesting! So it breaks all of the morphemes? I’d prefer typo-grapher or typograph-er to the above options.

I wonder if people who are more or less visual would have different preferences. I’m visual, so perhaps I optimize for the visual appearance of morphemes as opposed to the syllable breaks?

> So it breaks all of the morphemes?

Not really. TeX uses Knuth-Liang algorithm which does not do any morphological or semantical analysis.

You basically feed it a corpus of words, it learns substrings that contain word breaks more often, condenses this information, and uses that to guess where an arbitrary word could be hyphenated.

In particular, TeX's hyphenation data contains lines

    y3po
    5po4g

which strongly suggest that when TeX sees substrings “ypo” and “?pog” they can be hyphenated as “y-po” and “?-pog”. (Odd weights allow hyphenation, even weights discourage it.)

That's why “typograher” is hyphenated like that, since it's not in the exception list.

Is there a morpheme-aware version?

Yes, with different patterns it's possible and the en-gb patterns do this (see https://www.tug.org/tex-hyphen/). Morpheme-aware hyphenation does have some oddities, though, like hyphenating helicopter as helico-pter.

I saw your webpage on programming language choice, but I couldn't figure out how to use the comment box. So here's my comment.

Rust seems like a good candidate. The runebender/druid/xi project has an active chatroom [1] full of people [2,3,...] with deep expertise in typesetting, text rendering, etc.

[1] https://xi.zulipchat.com/ [2] https://raphlinus.github.io/ [3] https://joy.recurse.com/~cmyr

I'm not sure why there was a problem with comments for you—it looks like it's correct for me, although no one else has commented so there might be an issue.

Rust is intriguing and it looks like some of the issues that are of concern to me are addressed by it (cross-platform, ability to target iOS and JNI)... I'll have to investigate a bit more. If it's got a good PDF writing library I may have a winner, although C++ does offer some really solid abilities with ICU and harfbuzz that appeal to me.

I couldn't figure out what all the boxes were for or why the big box truncated my comment at around 20 characters.

Certainly, the pain around library usage in C++ is something that would be nice to be able to avoid. A quick google search has turned up Rust bindings for harfbuzz and the print_pdf library (the latter would be superior to dealing with the scant open source C/C++ options most of which seem to have lost their primary maintainers).

One of my minor claims to fame is contributing the word Wertherian to the hyphanation exception list. I only knew it was an issue because I saw it mis-hyphenated in a Trollope novel.

Something I learnt a while back is that the dots that punctuate headwords in dictionary definitions aren't there to show you morpheme or syllable boundaries, they're there to indicate hyphenation points.

TeX's default language (US English) uses the hyphenation patterns from a certain American dictionary (Liang's thesis mentions Webster’s Third New International Dictionary; probably that's the one). American hyphenation tradition tends (there are cases where different American dictionaries don't agree), more often than British, to hyphenate at phonological boundaries. (This has some interesting corollaries: the word “record” is hyphenated “re-cord” as a verb and “rec-ord” as a noun.)

British English tradition tends (more often than American) to hyphenate at morphological/etymological boundaries. For instance, if you run xetex with `\uselanguage{ukenglish}` followed by `\showhyphens{typographer}` then you get:

    ty-po-grapher

meaning that in the word “typographer”, a hyphen is allowed in those two places, instead of

    ty-pog-ra-pher

in the US English version. (Both the US English and UK English hyphenation patterns set \lefthyphenmin=2 and \righthyphenmin=3, i.e. enforce at least two letters before a hyphenation point and at least three after.)

So the hyphenation patterns have done the “right” thing in the US case, in the sense that they produced the same hyphenation as given in US dictionaries: https://www.merriam-webster.com/dictionary/typographer https://www.ahdictionary.com/word/search.html?q=typographer = https://www.thefreedictionary.com/typographer https://www.wordsmyth.net/?ent=typographer https://www.infoplease.com/dictionary/typographer (I don't have access to any UK English dictionary that shows hyphenation, as far as I can tell, but I imagine it's doing the right thing for the UK case too.)

You can see more at https://www.tug.org/tex-hyphen/ and in particular Liang's thesis https://www.tug.org/docs/liang/ is very readable (both the English and CS/data-structure parts).

Hmm, a site about typography that has an odd layout: https://freeimage.host/i/bu.qrwce2 The logo overlaps all the content. Is this deliberate?

A fellow Firefox user?

I was wondering the same thing. Then it hit me: maybe it's just yet another one of those sites that assume all browsers in the world are Chromium and that's why the layout is garbled up for me.

This is what it looks like with Chromium on my end: https://i.imgur.com/36Lacgd.png

Looks fine for me in Firefox.

However it's just a blank page until I enable Javascript. So I'm not all that interested to begin with.

Firefox user, no problem here. The OP screenshot has different fonts that the page sets, so looks like both of you have web fonts disabled.

Thanks for pointing that out. I'm only realizing now that uBlock Origin is doing this. But I still think the site should be viewable even with webfonts (and JS) disabled.

What's new in the second edition, from the Introduction:

> New in the second edition: emoticons and emoji, metrics vs. optical spacing, free fonts, century schoolbook alternatives, grids, screen-reading considerations, responsive web design, how to work with a designer, the copyright status of fonts, how this book was made, and typographic humor.

<3 This book is such a fun and opinionated entry text for learning about how to use typography in your work. I highly recommend looking through the various sections and perusing anything that interests you. It's not written solely for typography on the web so many of the how tos include instructions for word and other editing program.

As a side note the entire book is written in racket which is pretty cool.

It seems Valkyrie is again the default font, which is great. With it, the site is the most beautiful thing on the whole web, every interval and spacing on it being just right—or at least having been so in the first edition, as I'm not yet seeing what's different now. I'm repeatedly consumed with envy at the author, not so far able to achieve such perfection myself.

Actually, the site is set in Equity, but there is an option at the bottom to set it to Valkyrie :)

Weird. I'm more-or-less sure about Valkyrie being the past default. At one point I discovered with dismay that Century Supra was used instead, for me. But now, I even checked in a private window before posting the above comment, and it was Valkyrie again.

Perhaps the font is selected quasi-randomly depending on the visitor's ip. Anyway, I stand by the word that Valkyrie is the best for the site.

(Also the mobile version seems to have lost the font switcher, so there's a chance readers on their phones don't and can't get the Valkyrie experience.)

This might seem like useless criticism but oh well.

In "straight and curly quotes" it says:

"By replacing the curly opening and closing quotes with ambidextrous straight quotes, two slots became available for other characters."

But surely one slot became available. If two were used for curly quotes and then one for the straight ones, only one would become available.

> But surely one slot became available.

Two is correct.

> If two were used for curly quotes and then one for the straight ones, only one would become available.

Yes, but in fact four slots would have been required for curlies, while two were used for straights. Single and double quotes are two different characters when straight, and two different pairs when curly.

Ah thanks. Haven't ever seen a typewriter and ingorantly assumed you'd get double quotes from pressing a single quote twice.

"For instance, please don’t adopt the slogan “A Design Firm Unlike Any Other” and then set it in Helvetica."

I feel vindicated. Helvetica might have been cool when it was invented in the 50s, but nowadays it's the most overused and overrated font around. I dislike it with a passion.

Maybe Inter will become the new Helvetica ;)

Another fun aspect of non-breaking[1] and other less common spaces that I’ve realized recently…

If you’re ever trying to use a short or previously-used username: many signups will strip out a regular space, but they won’t always catch a ZERO WIDTH SPACE or HAIRLINE SPACE or many of the other options[2]. It usually takes a few tries, but eventually one will get through.

1. https://practicaltypography.com/nonbreaking-spaces.html

2. https://jkorpela.fi/chars/spaces.html

Is there a list of changes somewhere?

BTW, in the past the site had an, ahem, Easter egg for visitors coming from Reddit, and maybe for HN too. Seems to be gone now, but this might be temporary—so perhaps in a few months it can be enjoyed again.

Reply on news.ycombinator.com