Skip to content(if available)orjump to list(if available)

Tufte CSS

Tufte CSS

27 comments

·September 3, 2025

corysama

> 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. Tufte CSS uses #fffff8 and #111111 because they are nearly indistinguishable from their ‘pure’ cousins, but dial down the harsh contrast.

I never got this argument.

I can see an argument for "We need to reserve some headroom and footroom for Darker Than Common Black and Brighter Than Common White for occasional emphasis scenarios. Or, for differentiation from pure black/white in images and background elements."

But, I read "dial down the harsh contrast" as "We presume users have their monitor contrast settings set too high and intentionally use a reduced range to compensate for their mistake even though it costs us a bit of color precision."

Meanwhile, I might have an LCD monitor with the contrast dialed down next to an OLED with the brightness and contrast cranked up. And, even if the common case user setup is not so extreme, it still varies wildly in practice.

As a game engine developer, this is something I've had to deal with in practice for a long time... Reduced contrast range as a stylistic choice can be quite valid. But, trying to predict user viewing conditions is wishful thinking.

42lux

The author's conclusion is flawed: paper and ink are never truly pure white or black. Perfect white/black exists only in digital spaces, while physical materials always have subtle variations in tone and color.

bryanlarsen

Not using #000000 for background black removes an opportunity for your site to look awesome on OLED screens.

sxp

As far as I can tell, OP's argument is bullshit. I did a bunch of research into max contrast displays and haven't found any reason to not use them. There are reasons to not use max _brightness_ since a bright screen can be problematic in the dark, but it's better to use max contrast on a slightly dim screen than to use max brightness with a slightly lower contrast.

There was some minor effects for people with dyslexia and high contrast, but no science-backed a11y guidelines provide evidence of reducing contrast for the general population. And since most people have crappy cheap screens instead of fancy Macbooks that UI designers use, reducing contrast makes it worse for them. Particularly at off-screen angles.

I'm not sure who started this UI trend of grey-on-gray, but it's shitty and should be avoided unless there is an intentional stylistic reason to sacrifice form for function.

iammjm

ctrl+F "tufte" results in 47 hits in this fairly short article. The guy must love his name even more than Wolfram.

eindiran

The first four words on that page include the name of the author "Dave Liepmann" which != Tufte

tomhow

Previously:

Tufte CSS - https://news.ycombinator.com/item?id=42820449 - Jan 2025 (4 comments)

Tufte CSS - https://news.ycombinator.com/item?id=35032334 - March 2023 (32 comments)

Tufte CSS - https://news.ycombinator.com/item?id=23828196 - July 2020 (9 comments)

Show HN: A minimalist blog based on Tufte CSS - https://news.ycombinator.com/item?id=19615895 - April 2019 (74 comments)

Tufte CSS - https://news.ycombinator.com/item?id=15633102 - Nov 2017 (59 comments)

Tufte CSS - https://news.ycombinator.com/item?id=10555319 - Nov 2015 (26 comments)

Tufte CSS - https://news.ycombinator.com/item?id=10012360 - Aug 2015 (103 comments)

lucideer

I recall quite liking the typography on this website the first time I saw it years ago. It's amazing how much it has dated for me since (I think primarily due to being liberally copied exactly in too many places around the web).

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

Reading this I think an interesting alternative approach could to be apply Tufte's principles to a CMS rich text field editor or to a frontend templating library - something that generates HTML - rather than focusing purely on the CSS side. This & selecting some less print-oriented type.

____tom____

Really? I took an immediate dislike to it. Same for the site linked in the comments below - https://resilientwebdesign.com

It reminds me of the printing found in 200 year old books. I can't quite put my finger on what I don't like about it, but it grates. Perhaps it's inconsistent letter shapes.

Can anyone more informed comment on the font?

mediumsmart

There is more to this

https://resilientwebdesign.com

skrtskrt

That looks horrific too why is there an enormous amount of space between each letter, word, and line.

NooneAtAll3

imo that effect is simply due to website being too zoomed-in

if you ctrl-minus a bit, it becomes more bearable

daemonologist

The line height is cranked up to 1.75 and font size is derived from the view width:

    calc( 1em + (2 - 1) * ( (100vw - 20em) / ( 100 - 20) ))
Works on mobile (and probably on a vertically oriented monitor) but it's pretty poor on a small and wide laptop screen. Fortunately it's constrained to 2em above a vw of 100em or ultrawide would be very interesting indeed.

wmf

The text is enormous on a "standard" 1280px desktop window and very little content fits on the screen due to the vertical spacing.

LoganDark

Seems like it was designed mobile-first. Or mobile-only.

behnamoh

Is it just me who finds the serif font used in this website too narrow and hard on the eyes, even on Retina displays?

Y-bar

You use dark mode I assume? The serif text work much better in light mode. Dark mode often need additional font weight to work well.

CGMthrowaway

This style (fancy Georgia-like typeface on a cream background) was a big trend back in the 2010s, when this page was created.

weego

And I really don't think it's aged that well. Large parts of defining what "good layout" for text is relies on a societal consensus that their taste aligns with it, and I think we've moved on.

imiric

I'm not so sure.

Design trends are cyclical, but clean and simple design can be timeless. E.g. Helvetica, Braun, etc.

This uses a classical serif font with minimal formatting and colors. It is inspired by a simple book layout, which wouldn't look out of place in any classy publication today, from a hundred years ago, and likely a hundred years from now.

There's not much here that can "age", or that we can move on from.

itronitron

It doesn't work as white text on a dark background.

piskov

Bembo-like font is atrocious.

Kerning is horrible.

Small caps have different stroke widths.

Tufte’s style is ok, just the open-source Bembo bad-clone font is very-very bad.

imiric

I'm usually sensitive to such issues, but I'm not seeing it in this case.

Can you point out where that's most visible? Or screenshot it?

Maybe it has to do with font rendering on your system. It looks fine for me on Windows and Firefox.

Hhmm although upon a closer look, the kerning in "We" is a bit wide. But the small caps look fine to me. If this is the only thing, I'd hardly label it "atrocious".

coneonthefloor

How many times will Tufte CSS be reposted?

I feel like I see this every year. Unfortunately I like it less every year too.

daemonologist

I think posting Tufte CSS, upvoting it, and complaining about it in the comments is a bit of an HN tradition at this point. Here's the first iteration from ten years back: https://news.ycombinator.com/item?id=10012360

ChrisArchitect

Was going to say maybe time to add a (2015) to it, but it does look like there's been incremental updates in recent years with tweaks and things like dark mode etc.