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

31–40 of 64 posts

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

#31

Post by aasasd »

unimpressive wrote: post #16
aasasd wrote: post #5

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

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

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.

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

#32

Post by xrayspec »

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…

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.

[1] https://geoff.greer.fm

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

#33

Post by coffeefirst »

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?

I have an actual answer for Times New Roman.

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.

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

#34

Post by mrhappyunhappy »

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…

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.

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

#35

Post by ggreer »

xrayspec wrote: post #32
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…

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. [1] https://geoff.greer.fm

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.

1. I picked Baskerville because it's slightly more convincing than other fonts: https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye...

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

#36

Post by choochootrain »

ggreer wrote: post #35
xrayspec wrote: post #32

Earlier quoted context omitted.

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. [1] https://geoff.greer.fm

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…

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

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

#37

Post by xrayspec »

ggreer wrote: post #35
xrayspec wrote: post #32

Earlier quoted context omitted.

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. [1] https://geoff.greer.fm

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…

> I don't use web fonts.

Well, actually ... yes you do (Proxima Nova). Some of it is even thin!

https://floobits.com/

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

#38

Post by schlagetown »

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

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

#39

Post by ggreer »

xrayspec wrote: post #37
ggreer wrote: post #35

Earlier quoted context omitted.

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…

> I don't use web fonts. Well, actually ... yes you do (Proxima Nova). Some of it is even thin! https://floobits.com/

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.

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

#40

Post by pcwalton »

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.

Post reply on HN