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.
The author of this book probably agrees with most of your critique, apart from the importance of whether or not his book costs you 5Mb to download (I imagine doesn't care so much about that). But most of his recommendations --- many of which distill to "less is more, make careful rather than flashy choices" --- won't cost you a nybble to implement.
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.
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.
Respectfully dude, it seems you haven't read the comment you replied to. The only criticism of geoff's site you seem to have is the aesthetic similarly to Butterick's, yet nowhere did he criticise Butterick's style, only its implementation.
The system font stacks might look good on Apple and Google devices, with San Francisco and Roboto being great fonts.
But Gnome's Cantarell for Linux and Segoe on Windows are both very ugly. Dalton Maags Ubuntu font OTOH is quite nice, kinda surprised it's not in the native stack..
The difference in experience between platforms is so great with the native stack that it indicates carelessness for users of platforms that aren't Apple or Google based.
The first thing I'd do in an untouched Gnome or in Windows is replace those fonts, and I'm surely not the only one. "Bahnschrift" is actually a nice replacement for Segoe on Windows, from MS.
By utilizing the system font, you’re using a font that the user already spends time staring at for a significant portion of the time they spend interacting with that device. Presumably if they found that font ugly they’d change it, and in doing so your website would change as well.
> There's also the issue that while the site may look pretty, it requires downloading 5 megabytes of CSS.
3.4MB, and all but 5KB are web fonts which will be cached across the entire site. And while that's heavy for a normal site, it's probably not all that heavy for site specifically about typography. The extra fonts are included because they're used for interactive examples and comparisons, and downloading fonts is cheaper than downloading images.
Web browsers on limited connections are now smart enough to avoid downloading web fonts (on mobile Firefox, there's just a checkbox in settings you can click to turn them off universally). I honestly can't think of a single case where me checking that box has ever broken a webpage. Opera Mini (which is popular in the parts of the world people are most often referring to when they talk about limited connections) disables web fonts as well, so no harm to those users.
Given that there is a readily available, easy to use, safe, user-controlled solution to your problem, I do not see why forcing everyone to use system fonts helps anyone. If you have a problem with the defaults, go to Firefox/Google and tell them to check the box by default.
> Don't ship web fonts except for icons.
My feeling is that on the web we give control to the user, not the developer. And as mentioned above, you can not trust that your icon fonts will be downloaded, so you should not use fonts for icons. It is almost universally better to use SVG for icons. Your icon font is going to be a wrapper around SVG glyphs anyway, so skip the middleman and ship the glyphs directly -- you can still bundle them into a single SVG if you're worried about multiple network requests.
> At every job I've had, designers who talked about typography created more problems than they solved.
Having read the book, none (or at least very few) of the issues you're talking about apply here. The default fonts are heavy and have high contrast (with the exception of footnotes, fair point). They render well on Linux and Windows. They're large and display well on small screens. The book actually goes into detail about a number of your issues, talking about why bad color and unreadable "brand" fonts are a problem. The biggest valid criticism I see here is that links aren't underlined, which... yeah, there are probably better ways to do that, but underlined links do genuinely interrupt reading flow. I view that criticism as a matter of opinion.
I agree that icon fonts are a hack, but the web is made of countless hacks. This specific one seems benign. Users won't notice or care whether you use icon fonts or images. Icon fonts are approximately the size of the equivalent images, they work alright across platforms, and they're pretty easy to use and deploy.
That was exactly the problem. The web font (a variant of Open Sans) had bad TrueType hinting, which macOS ignored. I viewed the site using Edge and it almost looked as if all antialiasing and subpixel rending was disabled.
TIL TrueType was developed by Apple, already with hinting as far as I can tell. Apparently the Mac font renderer ignores most of the hints but not all.
In my many years of design and development I have NEVER seen a 5mb css file, yet alone one as a result of a custom font.
If we left typography up to developers then we’d have the web equivalent of Linux - “good enough”.
Typography has a place in design. What you see with grey thin fonts is amateur work by designers who follow trends. To generalize this observation to the whole of design is not fair.
I prefer when websites use "serif" or "sans-serif" (as opposed to "system font stacks") and respect my personal font choices. Sadly some people never change them from Times/New Roman and Arial.
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.
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.
`#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.
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.
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.
Agreed. There are multiple parts of this book where I actually felt frustrated with the author I disagreed with them so much, but I still consider it to be one of the best web typography books I've ever read.
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.
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:
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.
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.
TNR was derived from a newspaper typeface that addressed two problems:
1. Newspapers are laid out in lots of narrow columns. You want to be able to pack a lot of letters in a short line.
2. Newsprint is a very think paper that absorbs ink, so you need think lines to minimize bleeding
Most people today don't write in tiny columns, so they throw TNR on an 8.5x11 document or a the main block of a website, and you wind up with line lengths that are too long. In use cases with narrow columns, that's fine, but it doesn't fit very well for the main body of text.
The second item is irrelevant. Instead, the thin lines are just harder to read on a screen.
You can test this: go to the new york times on your browser, open an article with dev tools, set the second paragraph in Times New Roman and the third in Georgia, and observe how well each one reads compared to the default font.
Georgia has a large x-height, is wider, has a variety of thin and think lines, all things meant to make it easier to read on low res screens that were the norm in the 90's. Georgia might not be the sleekest option on a retina screen, but it's still very readable.
All of this is more of an art than a science. You can have (or borrow) strong opinions, and have good reasons behind them, without anyone else being wrong.
>Why not? Fame has a dark side. When Times New Roman appears in a book, document, or advertisement, it connotes apathy. It says, “I submitted to the font of least resistance.” Times New Roman is not a font choice so much as the absence of a font choice, like the blackness of deep space is not a color. To look at Times New Roman is to gaze into the void.
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.)
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.
The version of Times New Roman shipped with Windows is not true to the original and looks kinda disappointing. The originals from Monotype/Linotype are fine.
Arial is a poor clone of Helvetica. It only exists to avoid licensing it.
the author has rather strong opinions about a lot of stuff, so pretty much everything he says should be taken with a grain of salt. that is, it's mostly a matter of opinion.
one of the most beautifully typeset mathematics books, namely michael spivak's calculus, is typeset in baskerville, which is very similar to times new roman. basically no one in their right mind can claim spivak to be apathetic and sloppy, since he dedicated a massive amount of time to design his own tex math fonts. spivak writes about this here:
i have actually bought his fonts and use them. i have a passing interest in fonts, but am by no means an expert. i choose the low-hanging fruit when i can, such as buying the mathtime professional fonts for use in my LaTeX documents or switching dr. racket (the racket ide) to use consolas instead of its default font. that being said, i find butterick's font choice to be against my own aesthetic. he seems to really like tall, squeezed fonts, and he often plays with font color in ways that i don't like, such as grayed out blacks and colors against white or off-white backgrounds. i have always found it hard to read. for example, in his beautiful racket book, you can use a color picker to show that his blacks are not black and have been reduced. i don't know what purpose this serves. you can also see the grayed out look on the redesigned racket site (https://racket-lang.org/). it makes things very washed out when reading.
another example is that in the below link, look at the "l", "h", "d", and "f" when zoomed in. they all have this slant at the top, but on the f, it almost looks like a rendering bug or issue. when reading at regular zoom, it makes things look just off. it makes reading such fonts more tiring because there's little things like that you have to unconsciously process.
all that to say, it seems font choices, like many things, are rather personal. i personally prefer things that don't seem so designed. most of his fonts seem heavily designed. so, such hard ultimatums like what you quoted should basically be ignored.
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.)
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 (fonts/{otf,ttf}).
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.
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
Readit News
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/
[1] https://geoff.greer.fm
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...
But Gnome's Cantarell for Linux and Segoe on Windows are both very ugly. Dalton Maags Ubuntu font OTOH is quite nice, kinda surprised it's not in the native stack..
The difference in experience between platforms is so great with the native stack that it indicates carelessness for users of platforms that aren't Apple or Google based.
The first thing I'd do in an untouched Gnome or in Windows is replace those fonts, and I'm surely not the only one. "Bahnschrift" is actually a nice replacement for Segoe on Windows, from MS.
> There's also the issue that while the site may look pretty, it requires downloading 5 megabytes of CSS.
3.4MB, and all but 5KB are web fonts which will be cached across the entire site. And while that's heavy for a normal site, it's probably not all that heavy for site specifically about typography. The extra fonts are included because they're used for interactive examples and comparisons, and downloading fonts is cheaper than downloading images.
Web browsers on limited connections are now smart enough to avoid downloading web fonts (on mobile Firefox, there's just a checkbox in settings you can click to turn them off universally). I honestly can't think of a single case where me checking that box has ever broken a webpage. Opera Mini (which is popular in the parts of the world people are most often referring to when they talk about limited connections) disables web fonts as well, so no harm to those users.
Given that there is a readily available, easy to use, safe, user-controlled solution to your problem, I do not see why forcing everyone to use system fonts helps anyone. If you have a problem with the defaults, go to Firefox/Google and tell them to check the box by default.
> Don't ship web fonts except for icons.
My feeling is that on the web we give control to the user, not the developer. And as mentioned above, you can not trust that your icon fonts will be downloaded, so you should not use fonts for icons. It is almost universally better to use SVG for icons. Your icon font is going to be a wrapper around SVG glyphs anyway, so skip the middleman and ship the glyphs directly -- you can still bundle them into a single SVG if you're worried about multiple network requests.
> At every job I've had, designers who talked about typography created more problems than they solved.
Having read the book, none (or at least very few) of the issues you're talking about apply here. The default fonts are heavy and have high contrast (with the exception of footnotes, fair point). They render well on Linux and Windows. They're large and display well on small screens. The book actually goes into detail about a number of your issues, talking about why bad color and unreadable "brand" fonts are a problem. The biggest valid criticism I see here is that links aren't underlined, which... yeah, there are probably better ways to do that, but underlined links do genuinely interrupt reading flow. I view that criticism as a matter of opinion.
Dead Comment
Could you elaborate? macOS doesn't typically do TrueType or CFF hinting. Kerning should be identical for modern rasterizers on all platforms nowadays.
If we left typography up to developers then we’d have the web equivalent of Linux - “good enough”.
Typography has a place in design. What you see with grey thin fonts is amateur work by designers who follow trends. To generalize this observation to the whole of design is not fair.
Nitpicking, but in this context I can't help myself: they're not ALL CAPS but sᴍᴀʟʟ ᴄᴀᴩs instead :)
[1] https://pollenpub.com
[2] https://practicaltypography.com/why-racket-why-lisp.html
[3] https://racket-lang.org
[4] https://beautifulracket.com
https://beautifulracket.com/appendix/from-br-to-racket-base....
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.
Highly, highly recommended.
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.
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/
I'd very much like to see more websites in this style and fewer "iframes".
Also the text could use some margins when displayed on a phone.
Why? Can someone explain this?
TNR was derived from a newspaper typeface that addressed two problems:
1. Newspapers are laid out in lots of narrow columns. You want to be able to pack a lot of letters in a short line. 2. Newsprint is a very think paper that absorbs ink, so you need think lines to minimize bleeding
Most people today don't write in tiny columns, so they throw TNR on an 8.5x11 document or a the main block of a website, and you wind up with line lengths that are too long. In use cases with narrow columns, that's fine, but it doesn't fit very well for the main body of text.
The second item is irrelevant. Instead, the thin lines are just harder to read on a screen.
You can test this: go to the new york times on your browser, open an article with dev tools, set the second paragraph in Times New Roman and the third in Georgia, and observe how well each one reads compared to the default font.
Georgia has a large x-height, is wider, has a variety of thin and think lines, all things meant to make it easier to read on low res screens that were the norm in the 90's. Georgia might not be the sleekest option on a retina screen, but it's still very readable.
All of this is more of an art than a science. You can have (or borrow) strong opinions, and have good reasons behind them, without anyone else being wrong.
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.)
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/
Arial is a poor clone of Helvetica. It only exists to avoid licensing it.
one of the most beautifully typeset mathematics books, namely michael spivak's calculus, is typeset in baskerville, which is very similar to times new roman. basically no one in their right mind can claim spivak to be apathetic and sloppy, since he dedicated a massive amount of time to design his own tex math fonts. spivak writes about this here:
https://tug.org/pracjourn/2006-1/spivak/spivak.pdf
i have actually bought his fonts and use them. i have a passing interest in fonts, but am by no means an expert. i choose the low-hanging fruit when i can, such as buying the mathtime professional fonts for use in my LaTeX documents or switching dr. racket (the racket ide) to use consolas instead of its default font. that being said, i find butterick's font choice to be against my own aesthetic. he seems to really like tall, squeezed fonts, and he often plays with font color in ways that i don't like, such as grayed out blacks and colors against white or off-white backgrounds. i have always found it hard to read. for example, in his beautiful racket book, you can use a color picker to show that his blacks are not black and have been reduced. i don't know what purpose this serves. you can also see the grayed out look on the redesigned racket site (https://racket-lang.org/). it makes things very washed out when reading.
another example is that in the below link, look at the "l", "h", "d", and "f" when zoomed in. they all have this slant at the top, but on the f, it almost looks like a rendering bug or issue. when reading at regular zoom, it makes things look just off. it makes reading such fonts more tiring because there's little things like that you have to unconsciously process.
https://beautifulracket.com/appendix/from-br-to-racket-base....
all that to say, it seems font choices, like many things, are rather personal. i personally prefer things that don't seem so designed. most of his fonts seem heavily designed. so, such hard ultimatums like what you quoted should basically be ignored.
Deleted Comment
[1] http://www.georgduffner.at/ebgaramond/ https://fonts.google.com/specimen/EB+Garamond
[2] http://www.ratz.com/robin/books.html
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.
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