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.
Just nitpicking - Baskerville 95% people won't have. Even less people will have 'Hoefler Text'. So you end up with most people seeing Georgia - you should focus on that experience. For some reason with Georgia there is gigantic word spacing. Like you would need like word-spacing: -0.6em to get somehow cool. Not sure why it happens on site or if its Georgia.
I see you have gripe with designers but you have to understand few things
1. There is as many bad designers as there is bad programmers. Lot of the companies hire quite unexperienced designers because it sort of works out. Don't forget designers get lot less money then programmers so it might also mean that the quality people are programmers by now.
2. Designing graphics is mostly about putting yourself into someone elses shoes. Nobody else in company has to like the design, important is that your clients do and for that you can gather data. Often you would be suprised what people actually like.
3. I have read this https://geoff.greer.fm/2018/04/02/conserve-vectical-pixels/ and it seems like you want to have very functional approach to design. But you have to realize that function in visual communication is not straightforward. Its not about cramming most of data on page. Empty space is extremely functional element. It might not be so important for you but for most people it is. It establishes hiearchy and helps to rest your eyes. 95% time you are not designing Bloomberg Terminal but some interface people will see for the first time or maybe just from time to time. Things might seem to you super obvious because you spent so many hours with them but thats just not what most of the people get. And i am not even talking about their experiences with the computer itself.
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.
i think the low contrast in your Geoff.Greer.fm logo and the "go dark" button might be what GP is talking about. i didn't realize the button had words until i saw the hover state had opacity: 1
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.
>Presumably if they found that font ugly they’d change it, and in doing so your website would change as well.
Not everybody with a sense for style is techy enough to change it, or even in a position to do so. E.g. people who are stuck with Windows for work and aren't allowed to mess with the system.
If you use JS and design sites you could check out Typography.js, you can include webfonts through NPM. Performance is better than fetching them from a CDN.
> 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.
It's not benign -- icon fonts are bad for accessibility because screen readers will read out the actual glyph unless you use pseudo-elements or extra markup. Additionally, many users on limited connections will turn off web fonts, and then your icons will break.
It's a hack that was necessary at one point, but has been largely displaced, like table layouts or image-based drop-shadows. SVG is just better nowadays[0]. You can even use the same pseudo-element tricks to insert them purely in CSS, which is yet another accessibility win.
Maybe I'm mistaken, but f I recall correctly, I think the issue with icons as font was accessibility, rather the average user with full sensory capabilities.
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.
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.
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
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.
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.
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.
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.
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.
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.
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/