
Tufte CSS - dpeck
https://edwardtufte.github.io/tufte-css/
======
qrv3w
To those interested, I made a Markdown-to-Tufte converter a few months ago.
[1] Its still very rough around the edges but you can easily use the Docker
image to convert a bunch of Markdown documents into a Tufte-style book. Its
mostly based off jez/tufte-pandoc-css [2] which did the heavy lifting of
converting the Tufte CSS to be used with pandoc.

[1]:
[https://github.com/schollz/markdown2tufte](https://github.com/schollz/markdown2tufte)

[2]: [https://github.com/jez/tufte-pandoc-css](https://github.com/jez/tufte-
pandoc-css)

~~~
AndrewStephens
Interesting project. The static generator I use for my site also converts
markdown->tufte.css, although with a different set of custom tags for things
like margin notes.

~~~
ryanmarsh
Do you have any plans to open source it?

~~~
AndrewStephens
Yes and no. The code is available[1] but it is a rather poor state, having no
documentation and not being packaged properly.

Getting it into some sort of shape is on my list of things to do.

[1]
[https://github.com/andrewstephens75/gensite](https://github.com/andrewstephens75/gensite)

------
ChrisSD
> Finally, a reminder about the goal of this project. The web is not print.
> Webpages are not books. Therefore, 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”. Tufte CSS is
> merely a sketch of one way to implement this particular set of ideas. It
> should be a starting point, not a design goal, because any project should
> present their information as best suits their particular circumstances.

The above paragraph is a critical caveat. This is only one possible
implementation of a minimalist design. There's no research to suggest it's the
best, most engaging, or any other adjective you wish to use.

Which is not to say it's bad (not at all) but it's not the One True Way™
either.

~~~
michaelbuckbee
Also, what a great thing to include in such a release. A humble and
encouraging starting point for others to start building with.

------
dang
From 2015:
[https://news.ycombinator.com/item?id=10012360](https://news.ycombinator.com/item?id=10012360),
[https://news.ycombinator.com/item?id=10555319](https://news.ycombinator.com/item?id=10555319).

And there was
[https://news.ycombinator.com/item?id=10552626](https://news.ycombinator.com/item?id=10552626)
as well.

------
user5994461
Please STOP using tufte fonts for everything that's displayed on a web site.
No exception ever.

These fonts are only available on Apple OS. They will render poorly on
everything else, making the text hard to read and killing your readership.

You don't need to believe me, just ask any web designer recommending tufte
fonts what operating system he's using? You'll quickly realize that they're
all on apple.

Tufte (1942 - present) did a lot of work on typesetting for printing books,
sadly his work was never adapted or ported to computers.

~~~
kps

      > These fonts are only available on Apple OS.
    

Eh? The article uses [https://github.com/edwardtufte/et-
book](https://github.com/edwardtufte/et-book) with fallback to various names
of Palatino, which as one of the base 35 Postscript fonts has been available
everywhere for approximately forever.

------
AndrewStephens
I use Tufte CSS stylesheet (very slightly modified) on my blog/static
generator. I like it for its focus on plain text and clarity over flashy
presentation. Some people have complained about the font - serif fonts are out
of style on the web but I find it easy on the eye.

The biggest problem I have found is that it really doesn't have a great answer
for vertical mobile screens. It works, but I find the layout sub-optimal. I
decided it was acceptable though.

These two posts demonstrate what I was going for the best:

[https://sheep.horse/2017/9/crossfading_photos_with_webgl_-
_b...](https://sheep.horse/2017/9/crossfading_photos_with_webgl_-
_boston_bridge_proj.html)

[https://sheep.horse/2017/10/how_you_are_reading_this_page.ht...](https://sheep.horse/2017/10/how_you_are_reading_this_page.html)

~~~
brightrhino
As I shrank the safari window on Mac on your site, there is a point when the
font size jumps up to be huge, that seems like a bug.

~~~
AndrewStephens
Yes, it is a bug (in my modifications, not in tufte.css itself), or at least
an unintended side effect. It is on my list of things to revisit but I am
prioritizing writing posts instead of futzing around with the styles.

The general layout of Tufte.css really wants to be larger in the horizontal
direction to fit in the side notes. This causes problems for people who read
the page in a narrow window or on cell phones.

------
shabbyrobe
This is a really nice looking stylesheet. I'd almost certainly use it the next
time I needed to share some content, but unfortunately it has some pretty
janky FOUT and FOIT issues for me here in Australia. I'm no CSS guru, so the
best I can really do is to report: [https://github.com/edwardtufte/tufte-
css/issues/119](https://github.com/edwardtufte/tufte-css/issues/119)

~~~
SaturateDK
It's not minimized or served over HTTP/2, and then there's the images, they
could be much smaller. Like 5.3MiB smaller.

I'll make a PR for the easy stuff :-)

------
chevas
I have grown to appreciate Tufte a lot and I think he's spot on with some
things, but when it comes right down to conveying information from one brain
to another, I think Matthew Butterick's principles are better, though I am
sure there is lots of crossover.

------
iridium
I think Tufte is great, and his ideas of reductionism should never go away.
But, this is giving me MLA flashbacks all over again.

~~~
mikecsh
MLA?

~~~
zbentley
They are likely referring to the MLA style manual, which is heavily used in
some academic areas, and is often the subject of complaints regarding its
highly specific and easy-to-mistake rules regarding citations:
[https://en.wikipedia.org/wiki/MLA_Style_Manual](https://en.wikipedia.org/wiki/MLA_Style_Manual)

~~~
mikecsh
Aha, thank you.

------
justin--sane
This is extremely nice. "The Visual Display of Quantitative Information" and
"Envisioning Information" are, IMHO, masterworks.

------
slmyers
They should follow the more familiar pattern of CSS libraries with a series of
simple examples. I feel this reads more like a paper.

~~~
RickHull
I disagree. It's made for writing papers and paper-likes. It sets the tone and
expectation with itself as a fluid set of examples.

------
neves
It is really nice. Can I use it in a Python Jupyter Notebook?

~~~
levesque
It would be nice to wrap a Jupyter notebook in this format. I'd be able to
produce beautiful webpages quickly from research material!

~~~
kadal
Emacs org-mode HTML export + ob-ipython could do it for you, with some
configuration...

------
ggm
I suspect that many, myself included will struggle with reductionist
proscriptive limits. Not because they are wrong, but because we have become
seduced by apparently beneficial things like bullet lists and two column
output.

Relearning to focus on content is hard.

~~~
joelanman
At GOV.UK we do a lot of user research, and find bullet points to be very
successful in drawing affection to and clearly conveying lists of things. For
example requirements.

~~~
nathell
Are the results of that research written up somewhere, or is this purely
internal?

~~~
joelanman
Can't think of where that particular finding is written up, but you can find a
lot of our research and guidance on our blogs and site:

[https://designnotes.blog.gov.uk/](https://designnotes.blog.gov.uk/)

[https://insidegovuk.blog.gov.uk/](https://insidegovuk.blog.gov.uk/)

[https://www.gov.uk/service-manual](https://www.gov.uk/service-manual)

~~~
nextos
I find all gov.uk web stuff really top notch compared to other EU govts. Keep
up the good work.

------
zwieback
I appreciate simplicity and restraint but I just don't get Tufte. The Napoleon
chart is cool but beyond that it just makes my eyes hurt, for me personally
it's really hard to digest information presented in his style.

~~~
_jal
I take Tufte as doing something slightly different than what his stated goal
is. I see him more as playing with design principles to build visual grammars
very different than we're used to, that sometimes run to extremes - like the
Napoleon chart. The information density, compared to a normal chart, is huge
and the conventions, well, unconventional. Also, it took a ton of labor, and
there aren't really tools for normal humans to create such charts in the time
people typically have for Powerpoint. So I see that chart, in particular, as a
demonstration model, or maybe an art piece.

------
mplewis
I like the look of Tufte CSS. I used it for my personal website, with some
changes – [http://mplewis.com](http://mplewis.com)

------
suleiro
We've created Wordpress theme based on that:
[https://github.com/Naturaily/tufte-wp-
theme](https://github.com/Naturaily/tufte-wp-theme)

------
zellyn
This is lovely. Anyone know of a Hugo theme that implements it?

------
chmaynard
I'm authoring my personal blog using Markdown and a Jekyll theme. How would I
go about using Tufte CSS in this context? Does that even make sense?

~~~
grzm
From the article:

> _”To use Tufte CSS, just copy tufte.css and the et-book font directory to
> your project and add the following to your HTML doc 's head block:”_
    
    
        <link rel="stylesheet" href="tufte.css"/>

~~~
SaturateDK
And to elaborate a bit, yes it would make sense to include it. What engine are
you using? I might just create a theme for it.

EDIT: You mentioned the Jekyll, I was a bit slow.

------
ocrcustomserver
Any recommendations for similar looking stylesheets?

------
jonahx
The side notes seem to vanish altogether on small screens, rather than merging
into the text as I would have expected.

~~~
adamrezich
>This document currently uses the symbol ⊕ (&#8853;), but it’s up to you.

They turn into click-toggleable inline links with a distinctive symbol to
represent them.

------
Numberwang
I don't find the font all that good looking. In general, I'd say Material
Desing beats this.

~~~
ssijak
I hate material design on the web, it feels overanimated and bloated. On
android it looks fine.

------
decafbad
That's an awful font.

~~~
Angostura
Because?

~~~
decafbad
Are we seeing the same page?
[https://i.imgur.com/LOOHFFz.png](https://i.imgur.com/LOOHFFz.png)

What's the point of making 'e's look very close to 'o's?

~~~
talideon
I suspect the issue may be down to however your computer, which I'm guessing
is running Windows, is rasterising the font. On Mac OS, it renders perfectly,
whether on a Retina display or a normal monitor. Ditto for Ubuntu.

It looks like ClearType is making certain elements of the typeface finer and
lighter. You might want to tune your ClearType settings.

