Tufte CSS
edwardtufte.github.io
edwardtufte.github.io
on 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.