Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

practicaltypography.com

Post reply on HN
Print view View original

41–50 of 64 posts

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

#41

Post by ggreer »

pcwalton wrote: post #40
ggreer wrote: post #17

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, desi…

> They chose web fonts that hurt page load times and had kerning and hinting issues on platforms besides macOS. Could you elaborate? macOS doesn't typically do TrueType or CFF hinting. Kerning should be identical for modern rasterizers on all platforms nowadays.

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.

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

#42

Post by dwrodri »

crazygringo wrote: post #14
Inu wrote: post #9

"And never choose Times New Roman or Arial, as those fonts are favored only by the apathetic and sloppy." Why? Can someone explain this?

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…

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/

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

#43

Post by iwiririwo »

forrest92 wrote: post #15

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.

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

#44

Post by aasasd »

pcwalton wrote: post #40
ggreer wrote: post #17

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, desi…

> They chose web fonts that hurt page load times and had kerning and hinting issues on platforms besides macOS. Could you elaborate? macOS doesn't typically do TrueType or CFF hinting. Kerning should be identical for modern rasterizers on all platforms nowadays.

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.

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

#45

Post by pcwalton »

aasasd wrote: post #44
pcwalton wrote: post #40

Earlier quoted context omitted.

> They chose web fonts that hurt page load times and had kerning and hinting issues on platforms besides macOS. Could you elaborate? macOS doesn't typically do TrueType or CFF hinting. Kerning should be identical for modern rasterizers on all platforms nowadays.

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.

Apple's rasterizer doesn't do grid fitting, which essentially means it ignores the hinting instructions, but it does do pixel snapping in some cases.

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

#46

Post by rhblake »

carapace wrote: post #28

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/ https://fonts.google.com/specimen/EB+Garamond [2] http://www.ratz.com/robin/books.html

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}).

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

#47

Post by danShumway »

ggreer wrote: post #17

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, desi…

I have issues with these criticisms.

> 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.

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

#48

Post by danShumway »

ggreer wrote: post #19
SSLy wrote: post #18

Earlier quoted context omitted.

Don't ship icons as fonts either. SVG was made for a reason.

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.

[0]: https://css-tricks.com/icon-fonts-vs-svg/

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

#49

Post by 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.

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

#50

Post by gnicholas »

iwiririwo wrote: post #43
forrest92 wrote: post #15

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.

1: https://imgur.com/a/Bw4fYE6

Post reply on HN