
Prac­ti­cal Ty­pog­ra­phy - beefhash
https://practicaltypography.com/
======
ggreer
It took me a while to figure out that links in the text were ALL CAPS instead
of underlined and/or blue. The hover effect was so subtle that I didn't notice
it at first. I ended up hovering over acronyms pretty often, as I was never
sure if those were also links. That is not good design.

There's also the issue that while the site may look pretty, it requires
downloading 5 megabytes of CSS.

At every job I've had, designers who talked about typography created more
problems than they solved. They picked fonts that were less readable but more
unique, "To emphasize our brand." They chose web fonts that hurt page load
times and had kerning and hinting issues on platforms besides macOS. They
chose thin font weights and gray text colors because those looked nice when
viewed indoors on retina displays with young eyes.

Almost every site could be improved by doing less with fonts, not more. For
long form text, use a popular serif font. For user interfaces, use the system
font stack.[1] Don't ship web fonts except for icons. Most importantly: Use
high contrast and normal font weights. Thin gray fonts are extremely hard to
read if you're outdoors or using an older/cheaper screen.

1\. [https://bitsofco.de/the-new-system-font-stack/](https://bitsofco.de/the-
new-system-font-stack/)

~~~
xrayspec
Respectfully dude, I clicked through to your sites because I was curious to
see how you apply your own design advice. It seems that mostly, you don't.
Your blog [1] even employs the monochrome, typo-centric style that Butterick
seems to like.

[1] [https://geoff.greer.fm](https://geoff.greer.fm)

~~~
ggreer
What part of my own advice don't I follow? I don't use web fonts. I use a
popular serif font (Baskerville[1], falling back to other serif fonts if the
user lacks that). I use the default font weight so text isn't too thin. I use
high contrast (#000 on #fff) for readability with dim screens or old eyes.
Links are underlined to make them obvious in body text. My CSS is 4.7KB,
though only 1.8KB is transferred because I use gzip content encoding.

Honestly, I don't think my site looks as good as Butterick's, but I'm not a
designer and I didn't spend much time on it. Also, my implementation is 1,000x
more efficient.

1\. I picked Baskerville because it's slightly more convincing than other
fonts: [https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-
ye...](https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-
hearken-o-earth/)

~~~
xrayspec
> I don't use web fonts.

Well, actually ... yes you do (Proxima Nova). Some of it is even thin!

[https://floobits.com/](https://floobits.com/)

~~~
ggreer
I thought we were talking about my personal site. Floobits looks the way it
does because of a designer. It doesn't reflect my personal tastes very well.

That said, I'll probably fix those fonts soon. Thanks for pointing that out.

------
xrayspec
Butterick made his own programming language called Pollen [1] to publish this
site. [2] Pollen is implemented in the Racket programming language. [3] He has
another online book called Beautiful Racket [4] about language-oriented
programming in Racket.

[1] [https://pollenpub.com](https://pollenpub.com)

[2] [https://practicaltypography.com/why-racket-why-
lisp.html](https://practicaltypography.com/why-racket-why-lisp.html)

[3] [https://racket-lang.org](https://racket-lang.org)

[4] [https://beautifulracket.com](https://beautifulracket.com)

~~~
nikofeyn
just as a note, the beautiful racket book is cool, but i feel the subtitle is
a little misleading. you aren't really using racket to build the languages.
the book uses #lang br and not #lang racket. it's subtle, but it means you
don't really learn the racket tools.

[https://beautifulracket.com/appendix/from-br-to-racket-
base....](https://beautifulracket.com/appendix/from-br-to-racket-base.html)

~~~
samth
`#lang br` is a pretty thin wrapper around the regular Racket tools. And you
can use any of the tools with the rest of Racket. For example, in my course
which taught building languages with Racket this year, we used the `brag`
library that Matthew built for Beautiful Racket, even though we didn't use the
book or the rest of the tools.

------
dsr_
If you don't find something to argue with in this book, you haven't thought
about it enough.

There's a dividing line, though, between books that are full of Wrong (and so
you should ignore them) and books which are full of Considered Opinion (and
are worth arguing over); this one falls firmly into the latter category for
me.

~~~
gh02t
You know, I think that's a pretty wise point that I haven't really heard put
into words before - a good teacher's goal is to prepare their students to be
able to debate the merits of the teacher's own opinions on equal ground.

------
aasasd
For me, this online-book is the most beautiful site on the entire web, at
least with the default Valkyrie font. It's a prime example of how excellent
content design can be made in black-and-white, and the sorta-recent wave of
"this is a website" pages didn't come close to it. White space there is simply
magical, every single interval is perfect―I envy the author for the ability to
achieve that.

The site, together with other Butterick's online-books, also uses a rather
non-traditional styling for headings: they stand out just a bit from the body
text by the use of bold face, and that's enough. Every day, I see examples of
either loud and heavy headings, or subheadings that are not obvious―on very
popular sites―and I keep thinking how I would apply Butterick's trick, alas to
no avail.

~~~
unimpressive
I think the thing that makes this ebook stand out, is that it's native web
content. Most "ebooks" on the web resemble the infamous photograph-of-a-
printout web design strategy:

[https://thedailywtf.com/articles/Web_0_0x2e_1](https://thedailywtf.com/articles/Web_0_0x2e_1)

Your average ebook is textbook or published book content put in the media
equivalent of an iframe. Butterick's websites are not that. I have a friend
who's a huge fan of Butterick and did a similar thing with his take on Eliezer
Yudkowsky.

[https://www.readthesequences.com/](https://www.readthesequences.com/)

I'd very much like to see more websites in this style and fewer "iframes".

~~~
aasasd
It's really ironic how, with all that effort, your dude went with justified
alignment. I can't even read justified text these days because my brain keeps
muttering that it is wrong.

Also the text could use some margins when displayed on a phone.

~~~
Sharlin
I don't find the justified text on that site bad at all. It has proper
hyphenation and I couldn't find any awkward spacing. The text seems to flow
well.

~~~
aasasd
It becomes worse on phones, with fewer words per line.

------
Inu
"And never choose Times New Roman or Arial, as those fonts are favored only by
the apathetic and sloppy."

Why? Can someone explain this?

~~~
crazygringo
As wonderful as those fonts may have been once, now merely because they're
defaults and ubiquitous they will come across as you not caring about the
medium of your message, and by extension not caring about the message itself.

Messages are defined not just by their content but also by their medium, like
it or not.

It's the same thing as wearing the same shirt and pants every day that was
what K-Mart had on sale: you don't care and it wasn't chosen to flatter your
body. Apathetic and sloppy.

(And I personally find great aesthetic beauty in Times and in Helvetica,
Arial's original -- it's sad to me that they're simply no longer viable
choices for design.)

~~~
dwrodri
I would say that Helvetica is most certainly a viable choice for design.
Helvetica is great for when you want to present text that appears both modern
yet extremely neutral. The MIT Technology [1] review uses a lot of Arial and
Neue Haas Grotesk, which is the metal predecessor to Helvetica.

I may have some bias since I am a fan of the Helvetica documentary. Regardless
of my preferences I think designers who reject Helvetica due to its popularity
value originality more than practicality. In something like an art museum, or
a fast food restaurant, originality is very important—people need to know what
sets you apart from the rest! For something like code documentation or a
technical manual, Helvetica is a great choice. When someone is reading my
documentation, they have a very specific goal in mind, and the text I'm
writing needs to serve a very explicit purpose. If the reader is thinking
about anything that's _not_ the literal contents of the text, there is room
for improvement in the design of the content (IMO).

If you are intentional with your use of Helvetica, it can be a great choice.
If it is obvious that you picked the default typeface, then your design will
suffer.

1: [https://www.technologyreview.com/](https://www.technologyreview.com/)

------
carapace
For my money nothing beats EB Garamond [1] and Robin Williams' (not him) books
on design [2]. "The Non-Designer’s Design Book", "The Non-Designer's Type
Book", and "The Non-Designer’s Web Book" especially. (You might have heard of
"The Mac is not a typewriter"? She's the author.)

[1]
[http://www.georgduffner.at/ebgaramond/](http://www.georgduffner.at/ebgaramond/)
[https://fonts.google.com/specimen/EB+Garamond](https://fonts.google.com/specimen/EB+Garamond)

[2]
[http://www.ratz.com/robin/books.html](http://www.ratz.com/robin/books.html)

~~~
rhblake
EB Garamond is wonderful. Just as a FYI for anyone interested (because it's
not mentioned on the EB Garamond site): Google commissioned Octavio Pardo to
create bold versions of the fonts, and they're available at
[https://github.com/octaviopardo/EBGaramond12](https://github.com/octaviopardo/EBGaramond12)
(fonts/{otf,ttf}).

------
danShumway
Great book. _Practical Typography_ was one of my early introductions to real
typography on the web (as opposed to "go to Google fonts and download
something that looks cool").

As with any typography book, its opinionated, and you should keep that in
mind. Occasionally I'll see advice and decisions I disagree with. But, it's
still a fantastic resource. Read through it, and consider buying it as well,
comparatively it's worth more than many other locked down books you could buy
instead.

------
schlagetown
This book is an excellent resource for learning the basics of typography,
happy to see a second edition!

FYI for anyone else who's read the first edition, there's a section at the
bottom of the "Introduction" page listing what sections are new in the second
edition:
[https://practicaltypography.com/introduction.html](https://practicaltypography.com/introduction.html)

------
vharuck
The five quick rules don't mesh well with the rest of the book's points. The
chapters urge tailoring the style to the content, but the quick rules don't
mention this at all. They just recommend ranges for basic font measures.

The chapters are short, so if you only have 10 minutes, you'd get more out of
reading the first few.

~~~
beefhash
I assume the idea is that, on average, you'd get better results just following
those five points (focus on the body, get a reasonable text size, get decent
line spacing, adjust the two for 45-90 characters per line, choose a decent
font). When you spend reading the rest of the book, you'll realize that the
author seems to deal with absolute bottom of the barrel typography regularly.
Those five things alone would dramatically improve most of the bad examples
the author brings up.

A small improvement on a large scale is better than no improvement.

------
feider
Funny that even if this site does typography well, it miserably fails in
accessibility as parts of text have way too low contrast against background.
Still great content and I will definitely dig in.

------
forrest92
For a website about visual subject matter, the website is quite ugly.

I absolutely hate that the author decided on devoting an entire column to just
the menu resulting in the body text being off-centered. There's just this
giant uneven gap on the left and it's horrible.

~~~
iwiririwo
And there's quite aggressive and odd hyphenation. Despite left justified and
lots of space everywhere. Rather squeeze the stuff in one line, or start the
next one.

But I think LaTeX doesn't get this right by default, too. The microtype
package is something that avoids most unnecessary hyphens.

~~~
gnicholas
Agreed — I don't think I've ever seen this much hypenation in content that has
such a ragged right edge. That is, newspapers have lots of hyphenation, but
are justified. This has lots of hyphenation but is not justified, or at least
not very well justified.

As an example, half the lines in this paragraph [1] are hyphenated. At the
same time, there's a 4-character delta between the shortest and longest lines.
It would have been more easily readable (to me, at least) if the entirety of
"software" had been bumped to the second line, which would have had the
cascading effect of eliminating the need to hyphenate "program" in the
following line and "technical" in the line after that.

I'd be curious to know what the author's reason is for laying out text in this
way, as I imagine this is based on some of his typographical rules.

1: [https://imgur.com/a/Bw4fYE6](https://imgur.com/a/Bw4fYE6)

------
vagab0nd
I read Web Typography by Richard Rutter [0] and really enjoyed it. For anyone
who've read both, how does it compare to this book?

0: [http://book.webtypography.net/](http://book.webtypography.net/)

------
thomk
I go to typewolf.com for all my typography needs.

