4 ms·

Honestly, this is really rough. The impulse is admirable, but the implementation has a lot of rough edges and ugliness. A web author looking for good typography

Honestly, this is really rough. The impulse is admirable, but the implementation has a lot of rough edges and ugliness. A web author looking for good typography is going to be better served reading Butterick's Practical Typography (http://practicaltypography.com/ http://practicaltypography.com/).

DaveWalk 11y ago
It doesn't have the meticulous shine of Tufte's books, but this is a straightfoward CSS guide. It's a starting point, don't you think? Butterick's implementation is more than a CSS guide though, right? I thought his design was to show off the power of Pollen[0], his online-book-publishing system. [0] http://pollenpub.com/ http://pollenpub.com/
- mkozlows 11y ago
  It's a starting point, but a starting point that directs users to fake italic, fake small-caps, mismatched mono text, inconsistent apostrophes, and ugly underlines. (Oh, and sidenotes and other margin content just disappears on a phone.) If you're going to start from a template, it at least shouldn't lead you astray in multiple ways.
  - hinkley 11y ago
    It also doesn't maintain your current position in the document if the viewport changes width, which... I'm not even sure how you break that. The user agent usually does a very good job of handling scroll position. There's a lot of stuff you'd want to clean up before you let Mr Tufte see it.
    - saidajigumi 11y ago
      I'm not sure what browser(s) or site(s) you're referring to, but just now double checking a few sites in current FF and Chrome I don't see them maintaining scroll position at all. I realize that this agrees with my developed expecations for text heavy pages. Text reflow as the page narrows dominates the viewport position -- content getting longer effectively pushes the viewport up the page. To the user, content appears to flow "downward" as the page narrows. Do you have an example of a site and/or browser that exhibits the behavior you're describing? I'm quite curious if there's an approach to structuring a page that preserves position sensibly.
  - daveliepmann 11y ago
    We've fixed the fake italics, I think I've fixed the mono text (if you're talking about sizing), I've consistentified apostrophes, and changed how underlines are handled. Sidenotes are still a thorny issue (I'd appreciate any suggestions; we're discussing it in the GitHub Issues for the project) and small-caps are still on the to-fix list.
teek 11y ago
For someone well versed in typography, his monospace font Triplicate is absolutely terrible looking to me. The t's, f's, and a's all look oddly slanted and upset the balance.
oneeyedpigeon 11y ago
Thank you; that's an excellent resource! A couple of other good ones: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography http://www.markboulton.co.uk/journal/five-simple-steps-to-be... http://webtypography.net/toc/ http://webtypography.net/toc/
daveliepmann 11y ago
I agree that Butterick is a better resource for general web typography. I was aiming less as a prescriptive resource (which Tufte's work definitely is, and which Butterick's is a good example of for the web) but as a way to work out web analogies to some techniques Tufte used. I'd really appreciate if you could add a GitHub issue or two for the problems you list in your other comment https://news.ycombinator.com/item?id=10012953 https://news.ycombinator.com/item?id=10012953

DaveWalk 11y ago

It doesn't have the meticulous shine of Tufte's books, but this is a straightfoward CSS guide. It's a starting point, don't you think? Butterick's implementation is more than a CSS guide though, right? I thought his design was to show off the power of Pollen[0], his online-book-publishing system. [0] http://pollenpub.com/ http://pollenpub.com/

mkozlows 11y ago
It's a starting point, but a starting point that directs users to fake italic, fake small-caps, mismatched mono text, inconsistent apostrophes, and ugly underlines. (Oh, and sidenotes and other margin content just disappears on a phone.) If you're going to start from a template, it at least shouldn't lead you astray in multiple ways.
- hinkley 11y ago
  It also doesn't maintain your current position in the document if the viewport changes width, which... I'm not even sure how you break that. The user agent usually does a very good job of handling scroll position. There's a lot of stuff you'd want to clean up before you let Mr Tufte see it.
  - saidajigumi 11y ago
    I'm not sure what browser(s) or site(s) you're referring to, but just now double checking a few sites in current FF and Chrome I don't see them maintaining scroll position at all. I realize that this agrees with my developed expecations for text heavy pages. Text reflow as the page narrows dominates the viewport position -- content getting longer effectively pushes the viewport up the page. To the user, content appears to flow "downward" as the page narrows. Do you have an example of a site and/or browser that exhibits the behavior you're describing? I'm quite curious if there's an approach to structuring a page that preserves position sensibly.
- daveliepmann 11y ago
  We've fixed the fake italics, I think I've fixed the mono text (if you're talking about sizing), I've consistentified apostrophes, and changed how underlines are handled. Sidenotes are still a thorny issue (I'd appreciate any suggestions; we're discussing it in the GitHub Issues for the project) and small-caps are still on the to-fix list.

teek 11y ago

For someone well versed in typography, his monospace font Triplicate is absolutely terrible looking to me. The t's, f's, and a's all look oddly slanted and upset the balance.

oneeyedpigeon 11y ago

Thank you; that's an excellent resource! A couple of other good ones: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography http://www.markboulton.co.uk/journal/five-simple-steps-to-be... http://webtypography.net/toc/ http://webtypography.net/toc/

daveliepmann 11y ago

I agree that Butterick is a better resource for general web typography. I was aiming less as a prescriptive resource (which Tufte's work definitely is, and which Butterick's is a good example of for the web) but as a way to work out web analogies to some techniques Tufte used. I'd really appreciate if you could add a GitHub issue or two for the problems you list in your other comment https://news.ycombinator.com/item?id=10012953 https://news.ycombinator.com/item?id=10012953