Practical Typography
practicaltypography.com
practicaltypography.com
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.
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.
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.
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.
I did change my terminal to use Hack, however.
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...
Well, actually ... yes you do (Proxima Nova). Some of it is even thin!
That said, I'll probably fix those fonts soon. Thanks for pointing that out.
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.
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.
Could you elaborate? macOS doesn't typically do TrueType or CFF hinting. Kerning should be identical for modern rasterizers on all platforms nowadays.
> 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.
Nitpicking, but in this context I can't help myself: they're not ALL CAPS but sᴍᴀʟʟ ᴄᴀᴩs instead :)
[2] https://practicaltypography.com/why-racket-why-lisp.html
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?
Arial is a poor clone of Helvetica. It only exists to avoid licensing it.
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.
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.
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.
[1] http://www.georgduffner.at/ebgaramond/ https://fonts.google.com/specimen/EB+Garamond
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
The chapters are short, so if you only have 10 minutes, you'd get more out of reading the first few.
A small improvement on a large scale is better than no improvement.
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.
But I think LaTeX doesn't get this right by default, too. The microtype package is something that avoids most unnecessary hyphens.
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.