5 ms·

Tufte CSS

169 points by larkinrichards 11y ago

dang 11y ago
Also https://news.ycombinator.com/item?id=10552626 https://news.ycombinator.com/item?id=10552626.
zeckalpha 11y ago
Since last time this was discussed a few months back (https://news.ycombinator.com/item?id=10012360 https://news.ycombinator.com/item?id=10012360), this became an official Edward Tufte project, rather than just being inspired by his work.
- adsche 11y ago
  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.
hayksaakian 11y ago
serif fonts (meaning those with curly endings) feel like an attack on my eyes when I read them on an electronic screen on print they're nice, but on displays they hurt more than they help me. does anyone else feel the same way?
- andyfleming 11y ago
  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/ http://andyfleming.com/why-does-mobile-have-to-win/ Or, similarly with the font on https://medium.com https://medium.com .
- mimo84 11y ago
  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.
- noelwelsh 11y ago
  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.
  - olefoo 11y ago
    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.
  - Arnt 11y ago
    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/ 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.
    - glogla 11y ago
      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.
- adsche 11y ago
  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).
- mhd 11y ago
  I'v always been the counter-example for all this. I liked serif fonts even when it was Times New Roman, un-antialiased on a 14 inch CRT. By that I mean that I like reading with it, I tend to be more "impressed" with sans-serif layouts.
- ludwigvan 11y ago
  Have you tried a high resolution screen, like retina displays from Apple? It is virtually indistinguishable from print.
- jccalhoun 11y ago
  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.
something123 11y ago
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.
- _Wintermute 11y ago
  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.
- hadley 11y ago
  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.
  - something123 11y ago
    Sorry I misattributed that. I swore I saw the same style somewhere in his book. I still think it's horrible =) (sorry) 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.
sotojuan 11y ago
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?
- bouvin 11y ago
  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.
chanux 11y ago
Something similar (OK, not all that similar) done by a friend http://vpj.github.io/wallapatta/introduction.html http://vpj.github.io/wallapatta/introduction.html

169 points by larkinrichards 11y ago

dang 11y ago

Also https://news.ycombinator.com/item?id=10552626 https://news.ycombinator.com/item?id=10552626.

Since last time this was discussed a few months back (https://news.ycombinator.com/item?id=10012360 https://news.ycombinator.com/item?id=10012360), this became an official Edward Tufte project, rather than just being inspired by his work.

adsche 11y ago
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.

hayksaakian 11y ago

serif fonts (meaning those with curly endings) feel like an attack on my eyes when I read them on an electronic screen on print they're nice, but on displays they hurt more than they help me. does anyone else feel the same way?

andyfleming 11y ago
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/ http://andyfleming.com/why-does-mobile-have-to-win/ Or, similarly with the font on https://medium.com https://medium.com .
mimo84 11y ago
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.
noelwelsh 11y ago
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.
- olefoo 11y ago
  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.
- Arnt 11y ago
  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/ 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.
  - glogla 11y ago
    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.
adsche 11y ago
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).
mhd 11y ago
I'v always been the counter-example for all this. I liked serif fonts even when it was Times New Roman, un-antialiased on a 14 inch CRT. By that I mean that I like reading with it, I tend to be more "impressed" with sans-serif layouts.
ludwigvan 11y ago
Have you tried a high resolution screen, like retina displays from Apple? It is virtually indistinguishable from print.
jccalhoun 11y ago
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.

something123 11y ago

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.

_Wintermute 11y ago
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.
hadley 11y ago
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.
- something123 11y ago
  Sorry I misattributed that. I swore I saw the same style somewhere in his book. I still think it's horrible =) (sorry) 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.

sotojuan 11y ago

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?

bouvin 11y ago
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.

chanux 11y ago

Something similar (OK, not all that similar) done by a friend http://vpj.github.io/wallapatta/introduction.html http://vpj.github.io/wallapatta/introduction.html