22 ms·

Prac­ti­cal Ty­pog­ra­phy

• dsr_ 8y ago
  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 8y ago
    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.
  • danShumway 8y ago
    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. Highly, highly recommended.
• xrayspec 8y ago
  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 8y ago
    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.html https://beautifulracket.com/appendix/from-br-to-racket-base....
    • samth 8y ago
      `#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.
• aasasd 8y ago
  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.
  • waivek 8y ago
    Try equity also
  • unimpressive 8y ago
    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 8y ago
      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 8y ago
        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.
• feider 8y ago
  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.
• vharuck 8y ago
  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 8y ago
    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.
• Inu 8y ago
  "And never choose Times New Roman or Arial, as those fonts are favored only by the apathetic and sloppy." Why? Can someone explain this?
  • tacon 8y ago
    >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.
  • deleted 8y ago
    [deleted]
  • jahewson 8y ago
    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.
  • crazygringo 8y ago
    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 8y ago
      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/
• forrest92 8y ago
  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 8y ago
    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 8y ago
      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
• ggreer 8y ago
  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/
  • SSLy 8y ago
    Don't ship icons as fonts either. SVG was made for a reason.
    • ggreer 8y ago
      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.
      • RandomInteger4 8y ago
        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.
• thomk 8y ago
  I go to typewolf.com for all my typography needs.
• carapace 8y ago
  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 8y ago
    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}).
• schlagetown 8y ago
  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
• danShumway 8y ago
  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.
• vagab0nd 8y ago
  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/