Since last time this was discussed a few months back (https://news.ycombinator.com/item?id=10012360), this became an official Edward Tufte project, rather than just being inspired by his work.
And, at least for me, it became much better. It used to have a lot of glitches and weirdnesses, mostly in Firefox on Linux, now its very nice. I like it a lot.
I think it can feel like an abrupt change compared to browsing the rest of the web, but I think if you spend some time with it, you'll fine that it feels more readable with a larger body of content.
Also, it is great when the line length is appropriate (which it is in this example). It just reads better.
Depending your screen, you may find that the contrast is jarring. Try setting the font to be slightly lighter. Maybe try #5A5A57 instead of #111 on that example.
There are also some serif typefaces that have less intricate details. If you look at the font on my site here. It's a serif font, but not as intense to look at as the one in the exapmle. http://andyfleming.com/why-does-mobile-have-to-win/ Or, similarly with the font on https://medium.com .
I feel the other way around: I prefer serif fonts in general, however well designed websites should not have any issue with the font style chosen, as long as the basics of design and human vision are respected; e.g. contrast ratio, size, line heights etc.
Agreed, subject to caveats. I don't like the typography in this project. Fonts for display on screens are generally simpler than ones in print, which works better with the lower available resolution. I don't dislike serif fonts per se, but I do think the fonts chosen in this project are overly complex for the medium.
It's a matter of being attuned to the needs of your audience. These days retina screens are the rule rather than the exception for some user populations. The difference in resolution between print and screens has already gone away for a lot of people.
That was true back in the time of 72dpi and 96dpi screens, no question, but do you think it remains true now?
I don't have figures for deployed laptops, but google collects data, and https://developer.android.com/about/dashboards/ says 80% of android phones have a display resolution above 240dpi. AIUI few printed publications use resolutions as high as 240dpi.
Well, 1366768 on 15" dislay is 100 PPI. Lot of consumer class laptop have displays like that. Hell, even Lenovo T450 or T550 have 1600900 14" (127 PPI) or 1920*1080 15" (140 PPI) displays, and those are expensive, professional machines.
Generally displays in laptops are terrible, unless you go with ultrabook or Apple.
I used to feel the same way, but that changed when I got a higher resolution display. Now (for me) it's pretty much the same as on paper. I prefer serif for long texts so much that I override the default sans fonts on some news sites I visit with serif fonts.
For the record, the submitted CSS has a "sans" class, which uses Gill Sans instead (its on the page).
This is a personal pet peeve but too many sans-serif fonts make it too hard to distinguish between "I" and "l." And even though it is easy to figure out from the context (and the font used here does distinguish so good for HN!) that is reason enough for me to prefer serif fonts in most cases.
I don't really like the fetishizing of Tuft's style.
If you actually read his books, what he actually does is present a mental model for what to take into account when designing. But his style isn't meant to be the end-all of typesetting or data presentation! The books aren't saying "see, I made this design for the following reasons. Now everyone should emulate me!" It's just one solution in the realm of all good design solutions.
One example I would immediately point to would be ggplot2. A wonderful library in a lot of respects, but the defaults are absolutely horrendous!! The default grey background with white lines was just pulled from one of Tufts's books without a second of thought b/c these grey backgrounds are horrible waste of ink when printing and are actually chart-junk b.c most of the time you have a white background - for-instance in a powerpoint (<- that was a funny b/c Tuft hates powerpoint)
Here too, the cream colored background looks gorgeous on paper and just weird and out of place on a webpage.
I'm sceptical that ggplot's default was inspired by Tufte, it goes against almost every point he makes in 'The visual display of quantitative information' in terms of data to ink ratio. I have to disagree with yourself and Tufte in this case though, as I think it works really well.
It's completely not true that ggplot2 defaults were copied without thought from Tufte.
A pale grey background is not chart junk because it does not distract the eye (and indeed it actually enhances colour). You are using Tufte's terms without really understanding them.
>Here too, the cream colored background looks gorgeous on paper and just weird and out of place on a webpage.
Sounds like a case of habit. Or would you say Hacker News background color look weird and out of place too?
To me it is easier on the eyes, but more importantly having white as an accent color is useful to emphasize or separate graphs and figures from the main text.
I can't agree more with your general point though. Mindless copycating is a plague.
> The default grey background with white lines was just pulled from one of Tufts's books without a second of thought b/c these grey backgrounds are horrible waste of ink when printing
I don't follow. If it's a waste of ink, why were they in a book? And why is it bad to copy them to ggplot, which - well, I don't know whether print or screen or neither is considered its primary focus, but there's no denying that it's used a lot for screen graphics, and those don't need to worry about ink.
> I don't really like the fetishizing of Tuft's style.
Just so we're clear, this isn't some fanboy trying to imitate Tufte, this project is partly by Tufte. Is someone creating something promoting their own work and style fetishizing themselves?
But the practical implementation of CSS that mimics the style of his books completely misses the lessons in the books whether it's an official Tufte project or not. It may be a useful tool but it does not help anyone understand what's important about Tufte's work.
Tufte evidently thought it would help people understand what's important about his work:
> the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”
It's really not just mimicry. For example, a distinctive design element is the cream colored background called out by the grandparent comment:
> Here too, the cream colored background looks gorgeous on paper and just weird and out of place on a webpage.
In fact, it was chosen deliberately to deviate from paper:
> Although paper handouts obviously have a pure white background, the web is better served by the use of slightly off-white and off-black colors.
Other examples include:
> Sidenotes are a great example of the web not being like print. [...] The goal is to present related but not necessary information such as asides or citations as close as possible to the text that references them.
> In print, this means [graphics] are not relegated to a separate page. On the web, that means readability of graphics and their accompanying text without extra clicks, tab-switching, or scrolling.
I started using Tufte LaTeX for my school papers and I've been met with a lot of praise, but I've only used the CSS for a personal blog-ish site that, while public, is really meant to be just for me. Has anyone used it for anything interesting?
I'm on the other side of the fence – I'm using tufte-css for my course on Computer Architecture at the CS department in Aarhus, Denmark. I've found the design very easy to work with and easy to read for the students.
26 comments
[ 2.0 ms ] story [ 70.3 ms ] threadon print they're nice, but on displays they hurt more than they help me.
does anyone else feel the same way?
Also, it is great when the line length is appropriate (which it is in this example). It just reads better.
Depending your screen, you may find that the contrast is jarring. Try setting the font to be slightly lighter. Maybe try #5A5A57 instead of #111 on that example.
There are also some serif typefaces that have less intricate details. If you look at the font on my site here. It's a serif font, but not as intense to look at as the one in the exapmle. http://andyfleming.com/why-does-mobile-have-to-win/ Or, similarly with the font on https://medium.com .
I don't have figures for deployed laptops, but google collects data, and https://developer.android.com/about/dashboards/ says 80% of android phones have a display resolution above 240dpi. AIUI few printed publications use resolutions as high as 240dpi.
Generally displays in laptops are terrible, unless you go with ultrabook or Apple.
For the record, the submitted CSS has a "sans" class, which uses Gill Sans instead (its on the page).
By that I mean that I like reading with it, I tend to be more "impressed" with sans-serif layouts.
If you actually read his books, what he actually does is present a mental model for what to take into account when designing. But his style isn't meant to be the end-all of typesetting or data presentation! The books aren't saying "see, I made this design for the following reasons. Now everyone should emulate me!" It's just one solution in the realm of all good design solutions.
One example I would immediately point to would be ggplot2. A wonderful library in a lot of respects, but the defaults are absolutely horrendous!! The default grey background with white lines was just pulled from one of Tufts's books without a second of thought b/c these grey backgrounds are horrible waste of ink when printing and are actually chart-junk b.c most of the time you have a white background - for-instance in a powerpoint (<- that was a funny b/c Tuft hates powerpoint)
Here too, the cream colored background looks gorgeous on paper and just weird and out of place on a webpage.
A pale grey background is not chart junk because it does not distract the eye (and indeed it actually enhances colour). You are using Tufte's terms without really understanding them.
I remember one of the other preset themes was a lot better (though I have a lot of trouble trying to find a list of them)
I absolutely love your libraries and all that you've done with R. You've really transformed data analysis for me. Thank you.
Sounds like a case of habit. Or would you say Hacker News background color look weird and out of place too? To me it is easier on the eyes, but more importantly having white as an accent color is useful to emphasize or separate graphs and figures from the main text.
I can't agree more with your general point though. Mindless copycating is a plague.
I don't follow. If it's a waste of ink, why were they in a book? And why is it bad to copy them to ggplot, which - well, I don't know whether print or screen or neither is considered its primary focus, but there's no denying that it's used a lot for screen graphics, and those don't need to worry about ink.
Just so we're clear, this isn't some fanboy trying to imitate Tufte, this project is partly by Tufte. Is someone creating something promoting their own work and style fetishizing themselves?
> the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”
It's really not just mimicry. For example, a distinctive design element is the cream colored background called out by the grandparent comment:
> Here too, the cream colored background looks gorgeous on paper and just weird and out of place on a webpage.
In fact, it was chosen deliberately to deviate from paper:
> Although paper handouts obviously have a pure white background, the web is better served by the use of slightly off-white and off-black colors.
Other examples include:
> Sidenotes are a great example of the web not being like print. [...] The goal is to present related but not necessary information such as asides or citations as close as possible to the text that references them.
> In print, this means [graphics] are not relegated to a separate page. On the web, that means readability of graphics and their accompanying text without extra clicks, tab-switching, or scrolling.