
Tufte CSS - isp
http://www.daveliepmann.com/tufte-css/
======
bane
I think this:

a) looks like a reasonable simulation of Tufte's print style

b) is missing the point Tufte tries to make

Tufte isn't saying you _have_ to make your presentation look like his, his
basic thesis is "don't add unnecessary things that take away from the clarity
of your presentation" and he's made a name by critically analyzing other
people's presentation and work to show where they've gone overboard and why
that detracts from the message they're trying to show.

I've sat in his class, read his books and website and followed him for years.
His approach and critical analysis of web sites is actually fairly different
from print. He understands that the web is a different medium and should be
approached differently. His critiques of ESPN and various weather websites are
_fascinating_ not because he complains they aren't using enough whitespace or
don't follow his print style, but because he actually likes how they clearly
and concisely present summaries of dense, compact information.

I'm afraid this comes off a little like cargo-culting Tufte, going through the
ceremony without actually grokking his meaning.

~~~
acqq
Yes, the first thing I've thought looking at the page on the computer was "I
wonder how that looks on my iPhone." I've tried: not easily readable, for me.

~~~
collyw
Is it not the case that san-serif fonts are better on screen and serif better
in print? Seems a bit strange that the webpage uses serif.

~~~
barkingcat
Again, this statement just seems like cargo culting when taken as a rule.

The reason san-serifs were better on screen is that screens used to have lower
DPI's, and thus can't actually show the serifs as well as on paper.

In the old days of CRT's and 72 dpi screens, the serifs would be distorted
because the display can't show details fine enough. In those cases, san-serifs
get you around the problem of low dpi screens.

Nowadays, with retina and high dpi displays, serif fonts can look as good as
in print.

Just be aware of why these guidelines exist. It's not always a firm "it has to
be this way" hard rules.

------
jacobolus
Cute idea. Needs a better example document to really be judged properly (for
example, this document has a far too many large and imposing headings), but in
any case, some comments:

Would be better with less leading, a smaller text size, smaller left margin,
and more characters per line. This current version has a text block more like
a newspaper column width than a book, and the large type and unnecessarily
generous leading (especially in block quotations!) make it feel a bit like a
children’s book. Not much content fits on screen at any time.

Small caps shouldn’t be used with a typeface/browsers that don’t properly
support them and just shrink capital letters instead, they just look spindly
and bad. Either find a real small caps font, or skip the idea. Likewise for
italics: use a real italic font instead of a browser-generated oblique version
of the roman font.

If you want it to look like a nicely typeset book, use an indented first line
for new paragraphs rather than a blank line.

Lots of other parts need tweaks, but it would take making several sample
documents and then judging how the parts interact.

Final note: Tufte’s books don’t look good because of the basic style choices,
but because of the incredible care and attention he puts into writing and
composing them. Crappy content is not going to suddenly become amazing when a
different stylesheet is slapped onto it, and any document that aspires to be
as pretty as a Tufte book is going to take many hours of manual composition.

~~~
sombremesa
I find that columns with smaller width and larger text are far more readable -
any text that is the raison d'être for the page should be readable first, with
worries about looking like a "children's book" becoming second concern.

“Critics who treat 'adult' as a term of approval, instead of as a merely
descriptive term, cannot be adult themselves. To be concerned about being
grown up, to admire the grown up because it is grown up, to blush at the
suspicion of being childish; these things are the marks of childhood and
adolescence. And in childhood and adolescence they are, in moderation, healthy
symptoms. Young things ought to want to grow. But to carry on into middle life
or even into early manhood this concern about being adult is a mark of really
arrested development. When I was ten, I read fairy tales in secret and would
have been ashamed if I had been found doing so. Now that I am fifty I read
them openly. When I became a man I put away childish things, including the
fear of childishness and the desire to be very grown up.” - C.S. Lewis

~~~
jacobolus
I don’t have anything against children’s books; I love children’s books! If
the goal is to fit 2 sentences on a page with a big picture and individual
letters that are easy to discriminate to help when just learning to read, then
large text is a perfectly reasonable part of the design. Large widely spaced
text is just not necessarily appropriate for other types of material, where
fitting more text on the screen is an important design feature.

This is especially relevant when we’re talking about Edward Tufte: Tufte
devotes a huge portion of his books to emphasizing that information
presentation is improved when more information is presented in a smaller
space, to facilitate references and comparisons between different
items/sections. “Information wants to be spatially adjacent so as facilitate
comparisons made within the common eyespan of the viewer.”

As a concrete comparison, here’s what fits in my browser view in this “Tufte
CSS” document: [http://imgur.com/iLNgoaU](http://imgur.com/iLNgoaU)

Here’s what fits on a page in an Edward Tufte book:
[http://imgur.com/dTLcDx2](http://imgur.com/dTLcDx2)

~~~
oneeyedpigeon
This will obviously depend upon what device you're using, but hold a book up
in front of you at about the distance you would typically read it (this should
be MUCH closer than your screen!). Now compare the size of the text
(admittedly, this is tricky because of focus, but it's just about possible) -
the font size in the example is pretty much exactly the same as in a typical
book, for me at least.

Designers have, for a long time, thought that 'small text is cool/looks
better' but there has been a pushback on this by web designers over the past
few years. Maybe even HN will one day update its styles for readability; at
least a shorter line-length/larger leading would be a great start.

------
mkozlows
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
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
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
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
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.

------
christopheraden
Tufte-Latex, mentioned in the article, is a really nice template that produces
some gorgeous Latex handouts with very little effort (I've used it a couple
times when I wanted something to not look like the standard Latex article
class). I thought it worth linking here for those that didn't read the link:
[https://tufte-latex.github.io/tufte-latex/](https://tufte-
latex.github.io/tufte-latex/)

~~~
JohnHammersley
I agree -- I use that template for writing most of my documents now.

It's also available to try out online on Overleaf if you don't fancy
installing LaTeX: [https://www.overleaf.com/latex/templates/handout-design-
insp...](https://www.overleaf.com/latex/templates/handout-design-inspired-by-
edward-tufte/dtsbhhkvghzz)

(Note: I'm one of the co-founders of Overleaf, so any feedback appreciated,
thanks!)

~~~
Omni5cience
I went to one of Mr. Tufte's workshops several months ago, and I do believe he
mentioned Overleaf while discussing LaTeX. I must admit I had forgotten about
it until just now, so thanks for the reminder. It looks like a fairly slick
interface (and a nice solution for what I recall was a relatively painful
problem i.e. installing and using LaTeX).

~~~
JohnHammersley
Thanks -- yes, I believe he's used Overleaf in his workshops for the past
couple of years (starting back when we were called writeLaTeX). The Tufte
handout and book templates are ones we use again and again when we're asked
for examples of such layouts, and they're very popular.

As an interesting tidbit re Overleaf, we recently passed the 3 billion pages
compiled mark :) If you stacked up all those pages, you'd have a pile that's
(roughly!) the height of Pluto: [https://www.overleaf.com/blog/219-youve-
created-three-millio...](https://www.overleaf.com/blog/219-youve-created-
three-million-projects-and-counting-dot-dot-dot)

------
SeanLuke
Resizing the window reduces the user's desired font size: I don't know how
many web readability rules this breaks.

If the user then increases the font size, the web page obliges, expanding
beyond the window boundary, yet doesn't provide a horizontal scroller! Very
bad.

The thing is: Tufte's style isn't designed for webpages. It's designed for
books. Books have defined margins, a fixed size, and pages with a defined
length. (Good) web pages don't necessarily have any of that. This is where
sidenotes fall down, for example: the CSS author has to jump through a variety
of hoops, breaking various conventions, in order to make them usable when the
user narrows his window width.

------
carsongross
It's very nice looking.

Everyone criticizing the implementation, here, let me help you:

[https://github.com/daveliepmann/tufte-
css](https://github.com/daveliepmann/tufte-css)

------
unicornporn
I like the idea but turned away when I saw those ugly fake italic headings.
Never italicize fonts that are missing italic type styles.

~~~
daveliepmann
Sorry! Does this help? [https://github.com/pyrocat101/tufte-
css/commit/0a810a7d5f470...](https://github.com/pyrocat101/tufte-
css/commit/0a810a7d5f4707941c6f9fe99a53ec41f50a5c00)

~~~
unicornporn
No need to say sorry :) It does help, awesome!

------
namuol
For a typography-centric project, it pains me to see that you're not including
the proper italic version of the font used in the article, forcing my browser
to do ugly guesswork [1].

[1]: [http://i.imgur.com/CNBSMVH.png](http://i.imgur.com/CNBSMVH.png)

~~~
daveliepmann
I feel your pain. I think Linjie Ding's contribution resolved the issue, let
me know your thoughts: [https://github.com/daveliepmann/tufte-
css/pull/8](https://github.com/daveliepmann/tufte-css/pull/8)

------
tjohns
Personally, I feel like the text is too big.

Medium's site is already on the upper end of what I consider to be a usable
font size (22px), and this is even larger (24px). At some point, larger type
makes it difficult to quickly scan the page.

For comparison, even Tufte's own site is rendered with a 16px font.

~~~
gknoy
The font appears to scale (in a step function?) related to pixel-width of your
window. Try using a narrower window. (This may or may not be related to retina
resolution. I didn't read the code to find out.)

~~~
dredmorbius
The font size _does_ scale, in ways I find quite annoying. Smaller scaling
range would likely be better. Or stick to device/user defaults.

------
tdaltonc
Needs sparklines.

[https://www.edwardtufte.com/bboard/q-and-a-fetch-
msg?msg_id=...](https://www.edwardtufte.com/bboard/q-and-a-fetch-
msg?msg_id=0001OR)

~~~
daveliepmann
At the moment I think sparklines are outside the scope of this project.
However:

[https://github.com/daveliepmann/tufte-
css/issues/22](https://github.com/daveliepmann/tufte-css/issues/22)

------
lifeisstillgood
I love the margin diagrams, and would happily use this for print based output,
but I fear the mobile world would have meant Tufte would redesign his approach
to suit the smaller uni-column world, and the best layout on page is very
different to that on a four inch screen

~~~
e12e
Looks quite good on desktop, but even on my Note 3 -- the space used for
sidebars take _way_ too much horizontal space.

It will take some work, but with proper collapsing rules for narrow screens,
this would be very nice.

One problem might be (as others have indicated) that what works in print
doesn't have to be the best solution for digital -- especially where the page
size/width (window size) can vary substantially. Personally I typically give
my web browser 2/3 of the screen on my laptop, half on my desktop -- unless
I'm using it for reference in which case my "work window(s)" \-- terminal
and/or editor get the 2/3 width slot.

This layout would therefore be useless in code documentation for my use-case
-- the window would be ~50% padding, with an anemic main-column that'd be
almost unreadable due to fitting only a single word per line.

[ed: At the very least tufte.css and/or latex.css should enable/use CSS3
_hyphen_ s in order to get word hyphenation that is a little more like LaTeX,
and not completely broken! As is the ragged right is painful in narrow
viewports.]

------
kmfrk
I've always taken a liking to sidenotes, but the main problem with them is
they are complicated by Markdown's rendering of footnotes.

It's great for many other purposes, but a lot of people will probably prefer
doing things in Markdown.

~~~
munificent
I use sidenotes very heavily in my book[1], which is written in Markdown[2].
Instead of putting the contents of the asides in the middle of a paragraph, I
pull them out into separate <aside> tags. Inside the paragraph, I have a
little <span> with a name to indicate which text the <aside> should be
positioned to line up with.

There is some CSS to put the asides on the side[3] (with a ton of variations
to make it play nice on mobile). Then there's a bit of JS to correctly line
them up with <span> markers[4]. It was a bit more effort than I expected, and
I don't like having to rely on JS, but the output is really nice, I think.

For example, take a look at this chapter[5], and try resizing your browser
window or hitting it on a mobile device.

[1]:
[http://gameprogrammingpatterns.com/](http://gameprogrammingpatterns.com/)

[2]: [https://github.com/munificent/game-programming-
patterns/blob...](https://github.com/munificent/game-programming-
patterns/blob/master/book/introduction.markdown)

[3]: [https://github.com/munificent/game-programming-
patterns/blob...](https://github.com/munificent/game-programming-
patterns/blob/master/asset/style.scss#L207-L253)

[4]: [https://github.com/munificent/game-programming-
patterns/blob...](https://github.com/munificent/game-programming-
patterns/blob/master/html/script.js#L24-L42)

[5]: [http://gameprogrammingpatterns.com/double-
buffer.html](http://gameprogrammingpatterns.com/double-buffer.html)

~~~
saidajigumi
I like how your asides move into paragraph flow as the page narrows. The Tufte
CSS page hides the sidebar content completely as the page narrows, which
eliminates access to crucial information.

(Aside: I really love using the Mobile Design View in Firefox and Chrome for
inspecting responsive behavior. You can drag the viewport size by hand, or
switch it to presets that represent target devices easily. All while keeping
the full width of the browser pane for developer/inspector UI. FF even has a
nice toggle shortcut, ⌥⌘M on OS X.)

~~~
dredmorbius
Another responsive sidenote implementation, screenshots:

[http://imgur.com/a/TXpis](http://imgur.com/a/TXpis)

~~~
hftf
> screenshots

What help. /s

~~~
dredmorbius
Basic sidenotes
[http://codepen.io/dredmorbius/pen/OVmKZX?editors=110](http://codepen.io/dredmorbius/pen/OVmKZX?editors=110)

 _Not_ responsive, but @media queries on width and re-scaling width, margin,
background colour, and border colour is what gets you that.

Motherfucking Website. No sidenotes. but other bones of my basic design.
[http://codepen.io/dredmorbius/pen/KpMqqB](http://codepen.io/dredmorbius/pen/KpMqqB)

Daniel Bos's sidenote implementation:
[http://loadingdata.nl/waves/](http://loadingdata.nl/waves/)

(Degrades nicely for non-CSS viewers, _not_ responsive.)

------
javajosh
One of the things I love most about Tufte is the way _his text introduces
every single graphic_. He tells you what he's about to show you; then he shows
you. This stands in stark contrast in most books where the figures are only
very loosely coupled to the text. I didn't realize how jarring I found the
convention until Tufte! And it makes perfect sense in hindsight: why did we
think it's okay to put figures "within a page or two" of the relevant text?

This handout, by contrast, doesn't do this, and so it throws away something
that, to me, is central to Tufte's appeal.

~~~
daveliepmann
That's a great point. I added some text to the demo document making that
point, but I don't have actually relevant graphics or figures to add to it. If
you have any suggestions for wording, just email me or open a GitHub issue.
Cheers!

------
thirdsun
I like it as a starting point, a minor sidenote though: What you perceive and
describe as bright red links, code and sidenotes is for me, as a color blind,
almost indistinguishable from the body text if it wasn't for the underlines
and monospaced font. Those off-black and red colors are for me just very
similar dark hues on an off-white background. If you want to highlight these
elements the current red does a poor job for colorblind people like me.

~~~
startling
I'm colorblind as well, and did a little double-take when I read this comment,
but I think you misunderstood. "Other forms of text—for instance, links and
code—are slightly lighter and sidenote numbers are bright red to distinguish
them from inline text." Only the sidenote numbers are bright red.

~~~
esquevin
Yes, I can confirm to you that only the sidenote numbers are colored.

------
vsbuffalo
Well done. Though shouldn't the sidenotes use HTML5's <aside></aside>? How
does the vertical alignment of sidenote callout and sidenote work?

~~~
exupero
I agree.

It looks like sidenotes are floated right and given negative right margin.
([https://github.com/daveliepmann/tufte-
css/blob/master/tufte....](https://github.com/daveliepmann/tufte-
css/blob/master/tufte.css#L120-L129))

------
thisrod
I must have missed something. Since when does HTML have elements called
article and section?

~~~
fasouto
HTML5 introduced article, section, footer, nav... and many other semantic
elements

------
matiasz
I hope someone follows this up with Doumont CSS.

[http://www.treesmapsandtheorems.com/](http://www.treesmapsandtheorems.com/)

------
nkrumm
This would make a great IPython notebook style as well...

------
rjurney
To the haters: this looks like something you could hand tweak to get a great
result.

~~~
tripzilch
They're not haters. This is the type of discussion you should expect when
discussing typography. It may seem like endless nit-picking, but it's the sum
of nit-picking over all the tiny details that adds up to great typographical
design.

I understand this type of thread doesn't really fit HN's "no gratuitous
negativity" guideline, but IMO there's really no other way to constructively
discuss typography. The whole field is made of attention to excruciatingly
tiny details, but taken together, it adds up to great and beautiful design.
It's one of the things I love about it.

Maybe note that none of the criticisms are entirely dismissive or
unnecessarily harsh, but well-argumented, just about tiny details.

------
pto0239hn
This seems like an okay idea, but does anyone feel that the italics used in
the headings (font family: ETBembo) are generated and are quite ugly?

~~~
adsche
The italics are basically the only thing that looks OK here:
[http://i.imgur.com/H9X3Hpl.png](http://i.imgur.com/H9X3Hpl.png)

Linux/Firefox FWIW.

~~~
makmanalp
Linux / Firefox has long been the most horrible combo for font rendering -
check out Chrome on OSX [http://imgur.com/jsHwIk7](http://imgur.com/jsHwIk7)

~~~
Tiksi
Seems fine with Linux / Firefox for me:

Work: [http://paste.click/LKBLqt](http://paste.click/LKBLqt)

Home: [http://paste.click/zfhnYG](http://paste.click/zfhnYG)

------
myth_buster
I'm surprised how critical people are on this thread.

Perhaps it touched a nerve because there are quite a lot being done in a
relatively small space that makes it look messy.

An option would be to show some features that gel together and list the others
in the git markdown page.

~~~
jpatokal
For lack of a better word, this implementation is half-assed. If the whole
point is typography that's both gorgeous and legible, then you had better dot
your i's and cross your t's, and this doesn't. As a very simple example, look
at the capital B here in the _name of the font_ :

[http://snag.gy/yup65.jpg](http://snag.gy/yup65.jpg)

There's a chunk missing at the top, and it looks like crap! It _should_ look
like this:

[https://upload.wikimedia.org/wikipedia/commons/4/49/BemboMT....](https://upload.wikimedia.org/wikipedia/commons/4/49/BemboMT.svg)

Now I understand full well that it's very difficult to make something that
looks good on every OS, browser, screen size, resolution, yadda yadda -- but
in this case, that's the entire point!

------
kennelliott
great implementation of tufte's look, though i disagree with much of what
tufte believes is great information design.

~~~
thyrsus
Could you elaborate? What struck me was the limitation to two levels of
section/subsection. Perhaps I'm deluding myself, but I _think_ I prefer my
information in clearly layered abstractions, with the presentation following
the contours of the abstractions.

------
fizixer
Tufte-LaTeX link: " ... the style of Edward R. Tufte and Richard Feynman."

Woah! wait a minute. Style of Richard Feynman? When did Feynman get involved
with typography/typesetting work?

~~~
kryptiskt
It's referring to the Feynman Lectures on Physics
[http://www.feynmanlectures.info/](http://www.feynmanlectures.info/), he was
presumably involved in the presentation aspects of that (the books I mean, not
the site).

------
fiatjaf
I don't know who Edward Tufte is, but this seems to me like a place where we
could be living rather well without classes.

More on that:

* [http://www.smashingmagazine.com/2012/06/19/classes-where-wer...](http://www.smashingmagazine.com/2012/06/19/classes-where-were-going-we-dont-need-classes/)

* [http://fiatjaf.github.io/classless/](http://fiatjaf.github.io/classless/)

~~~
packetslave
You might want to educate yourself. He's rather well known.

[https://en.wikipedia.org/wiki/Edward_Tufte](https://en.wikipedia.org/wiki/Edward_Tufte)

~~~
fiatjaf
"Educate"? Are you serious? Knowing famous people is education now?

~~~
rglullis
AT the very least, knowing why some people are famous in their industry or
field.

------
isp
GitHub: [https://github.com/daveliepmann/tufte-
css](https://github.com/daveliepmann/tufte-css)

------
butthackerz
I really like it. Unfortunately, it is not clear what license ETBembo carries,
if any. In fact Tufte indicated that ETBembo is not public. So it may not be
legal to use it. I think that Dejavu serif is an acceptable (superior?)
substitution.

Source: [http://www.edwardtufte.com/bboard/q-and-a-fetch-
msg?msg_id=0...](http://www.edwardtufte.com/bboard/q-and-a-fetch-
msg?msg_id=0000bm)

------
lnanek2
Would have been nice if they had updated it more for the web. When I make my
browser very narrow, for example, the side figure is squished so tiny it is
unreadable. Good web sites are reactive and would have moved it below the
section at that point instead of keeping it at the side. Seems like they just
aped a book style and ended up with something not good for the web.

------
wkoszek
My feeling is that it looks great compared to most of the stuff I see on the
web. It's a good start for a plain minimalistic website. The content needs
more work (one "Tufte's" is fine, while the other don't) and all "don't" have
incorrect '.

------
tripzilch
Something wrong with the centering in my Firefox (v39, Linux) browser:
[http://i.imgur.com/8t95PQS.png](http://i.imgur.com/8t95PQS.png)

Similar thing happened to the full-width image.

I'll try to submit it to the Github.

~~~
daveliepmann
Sorry for the trouble. Both of these should be fixed now. The second table
style PR wasn't fully tested in FF.

------
exizt88
I don't think Tufte ever uses top and bottom borders for tables. Also, the
delimiter below the heading should not be so bold; it's usually a very thin
line.

~~~
daveliepmann
Thanks for the input. This spurred me to make some changes to tables:
[https://github.com/daveliepmann/tufte-
css/commit/c46b8b516a0...](https://github.com/daveliepmann/tufte-
css/commit/c46b8b516a06537f7f40106e0ebd1aed752c4ba4)

------
rcarmo
Biggest issue for me is that on mobile all the side notes go away (on
portrait) and there is no fallback.

------
dredmorbius
First: I very much admire the spirit and concepts presented here, even where
specific aspects strike me as less than ideal. In a world of Web designs which
are both grossly overwrought _and_ fragile, this is a compelling antidote.

 _Specific designs are born of their environment_

Tufte's principles are born of their medium, and both message and format
change as medium does. Understanding the _why_ and _wherefore_ is far more
important than the _what_ of design.

 _Borrow but don 't ape_

So take the _concepts_ and use those which are applicable. But allow yourself
leeway as well. Constraints of pagesize, contrast, and other aspects make some
of Tufte's suggestions less advisible for online. I find the grey-field charts
translate poorly, for example.

 _Layout doesn 't fix bad writing, but it helps most, and exposes bad_

 _Good_ writing can be killed by bad layout and presentation — this is a
frequent observation in HN comments on overstyled articles. _Middling_
writing, with good, well-structured layout, becomes easier to read. _Bad_
writing lies naked on the screen when shorn of its shielding raiment. I've
found that small changes — drop-cap initials and a bold first line, help in
acquiring content particularly when presented in a "cards" view. Quite the
accidental discovery, but one I find very useful.

[https://ello.co/dredmorbius/post/QGKKdiuqUw6O7ROl-V3uJA](https://ello.co/dredmorbius/post/QGKKdiuqUw6O7ROl-V3uJA)

Yes, much of the beauty of Tufte's books comes from the _totality_ of how
they're architected: ideas, structure, presentation, layout, typography. But
incremental steps _help_.

 _Embrace and Accept Medium Properties_

Paper is fixed size. Online is dynamic. Inks are expensive, colour moreso.
Pixels and rgba values are cheap, though _too_ much flash is distracting.
Images can offer zoom for detail on hover or click.

Sections. While Tufte uses only chapters and section headings, his books are
_also_ divided into Parts. As are Feynman's _Lectures_ as I recall. In
practice you'll find at least three, and frequently four, levels of hierarchy
may need support: Part, Chapter, Subsection, and SubSubSection. Technical
writing may have more levels of hierarchy.

Font sizes: _show deference to the user 's stated preference, if it exists_.
If not, _prefer rem and em units_ to _px_ or _pt_. Yes, MSIE back support and
broken Android implementations mean you'll need workaround fixes, but you can
at least build em/rem units in as your base.

Font faces. I take exception with much of the font-bigotry noted here. I
honestly Just Don't Fucking Care most of the time, though I find online font
choices are occasionally _spectacularly_ poor. Generally I prefer a decent,
_widely available_ , and _good enough_ font for online presentation. Excessive
fucking with dynamic Web fonts leads to many pages _which fail to render text
at all_ on older devices.

Colour. Text should be high, though not extreme, contrast. A _slightly_ creamy
background is preferable to lighter text. For _Web-specific elements_ ,
particularly hyperlinks, some affordance indicated by colour is helpful. Also
joining related items (e.g., sidenotes and related text).

CSS counters. These take the manual tracking out of identifying content and
references. Sections, headings, references (side / end notes), figures,
tables, images, etc., can all be automatcially numbered. This is useful
(though not universally supported).

Graceful degredation. A challenge with any UI/UX enhancement is that various
clients don't support all features. Degrading _gracefully_ , and providing
maximum possible content _and_ structure, really helps. (My own sidenote
experiments fail somewhat in this regard.)

:hover, :active, and other interactive elements. While the design shouldn't
_rely_ on these (see above), _offering additional hints by way of these
mechanisms_ can be useful.

Contrast. Provide it. ContrastRebellion is a frequently referenced site.

 _Accomodate Variable Viewports_

Responsive design is pretty much a necessity these days, and it's easier than
you think.

In the case of Tufte.css, some principles, such as ample whitespace, make
sense _in the context of print where sizes are rigidly defined. For online
content, sidebars, sadly, fail to remain viable as viewport widths shrink. My
solution was to transition sidenotes to what are effectively callouts, with a
gradually increasing background shading to identify these, as viewport size
decreases.

Or rather, in a mobile-first design, you build callouts which become marginal
sidenotes as space _increases _.

_ What HTML/CSS Needs*

References. Seriously. Why are we hand-tooling fucking endnotes / sidenotes,
_still_?

Robert Nystrom's _Game Programming Patterns_ <aside> sidenotes are
interesting, see his comments elsewhere. I'm not fully sold, but these could
prove useful.

A client-manipulable comments / discussion aspect is another element that I'm
finding myself increasingly wanting, something that is structured by way of
data (author, date, references, subject), but whose ultimate presentation
(flat, nested, collapsed, semi-threaded, etc.) is ultimately under client
control.

 _HTML5 is an awfully good start_

 _A grab-bag of some of my own experiments_

I've been playing with many of the ideas presented here as well as others.

Sidenotes: [http://imgur.com/a/TXpis](http://imgur.com/a/TXpis)

Motherfucking Website — this is the bones of my own preferred site layout,
though it lacks the responsive elements and much of the polish (which I'm
still working on):
[http://codepen.io/dredmorbius/pen/KpMqqB?editors=110](http://codepen.io/dredmorbius/pen/KpMqqB?editors=110)

HREF sidenotes: similar to the reference sidenotes I use, and incorporating
elments: ::before and ::after content, counters, and negative-margin offsets.
[http://codepen.io/dredmorbius/pen/XJGwQv](http://codepen.io/dredmorbius/pen/XJGwQv)

Ello CSS implmentation of HREF sidenotes:
[http://i.imgur.com/YA0cCNs.png](http://i.imgur.com/YA0cCNs.png)
[http://i.imgur.com/QNygLE8.png](http://i.imgur.com/QNygLE8.png)

Sample site design with table formatting: this adds greenbar and a current-
line indicator but otherwise borrows from Tufte's table concepts.

[https://www.reddit.com/r/dredmorbius/comments/3832wx/occupat...](https://www.reddit.com/r/dredmorbius/comments/3832wx/occupation_classifications_growth_and_change_over/)

------
nikolenkoanton
Nice job ;)

------
michaelbuddy
nice share and creation

