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

21–30 of 64 posts

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

#21

Post by RandomInteger4 »

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.

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.

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

#22

Post by ggreer »

RandomInteger4 wrote: post #21
ggreer wrote: post #19

Earlier quoted context omitted.

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.

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.

Similar to icon images, you'd use aria-label, aria-hidden, and title attributes.

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

#23

Post by nikofeyn »

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?

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:

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.

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

#24

Post by deltron3030 »

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…

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.

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

#25

Post by nikofeyn »

xrayspec wrote: post #4

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 [2] https://practicaltypography.com/why-racket-why-lisp.html [3] https://racket-lang.org [4] https://beautifulracket.com

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

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

#26

Post by microcolonel »

SSLy wrote: post #18
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…

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

One benefit of shipping icons as fonts is that you can use hints to make them work on non-multiple grids.

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

#27

Post by saagarjha »

deltron3030 wrote: post #24
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…

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 tha…

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.

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

#28

Post by carapace »

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

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

#29

Post by deltron3030 »

saagarjha wrote: post #27
deltron3030 wrote: post #24

Earlier quoted context omitted.

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 tha…

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.

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

#30

Post by tptacek »

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…

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.
Post reply on HN