Live data from Hacker News

Tufte CSS

edwardtufte.github.io

31–40 of 50 posts

Re: Tufte CSS

#31
post #29
post #23

Earlier quoted context omitted.

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

Basically every problematic pair with one of the letters being uppercased Tu in Tufte Pl in Please We in Webpages Al in Also Punctuatuion symbols as in Finally, Markdown’s As for small caps, on apple this is really bad “In his later books” List goes on Cursive in “as close as possible” has stroke width not matching the regular font. In regular font uppercased letters have thicker strokes than lowercased. It’s really…

> Basically every problematic pair with one of the letters being uppercased

And to make it even more whacky, even that is not consistent. Dave, Markdown, and Github are fine, to name a few. It's like two letters can't share the same space - whatever the word for that is (kerning?).

Re: Tufte CSS

#33
post #24

> 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 Bri…

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 dyslexi…

Contrast is a silly setting to even have for displays. Step #1 for decent monitor and TV calibration is always to set contrast to max anyway.

Re: Tufte CSS

#34
post #5
post #2

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

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.

Nope, I use light mode.

Re: Tufte CSS

#35

> 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 Bri…

> Although paper handouts obviously have a pure white background

This alone makes it clear enough they’re not going to make much sense.

As far as I am aware there is nothing “pure” white, or at least, nothing you’re going to print on with a laser printer.

Re: Tufte CSS

#36
post #7

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 Tuf…

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?

It's using a custom font called "ET Book," which is (according to its GitHub) inspired by Bembo.

If I had to guess at what you find grating, it might not be the letter shapes, but rather the spacing. At least rendered on a Mac, the inter-letter spacing just looks off; it's a little too tight all around, and certain pairs look inconsistent. It lacks visual smoothness. (I know that sounds like somebody talking about wine or oxygen-free audio cables, but I can't think of a better phrase.) It's possible that this is a quirk of Apple's font rendering algorithms, but I'm not convinced -- and it's definitely the font. If you prevent external fonts from loading or use the web inspector to remove "et-book" from the CSS and let it fall back to Palatino, the typesetting improves.

Re: Tufte CSS

#37

> 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 Bri…

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.

I think that's sort of what the author is getting at, if expressing imperfectly -- when you look at black ink on white paper, you're almost certainly not seeing a physical embodiment of #000000 on #FFFFFF. I tend to think moving at least one of the two colors off "pure", if not both, makes pages look more pleasant. (To stave off people leaping in to say "you web designers hate contrast," I'm not talking about moving to light gray on slightly less gray; it's not difficult to keep well above the WCAG's 7:1 AAA-level contrast ratio while bringing things down just a notch.)

Re: Tufte CSS

#39
> "Blue text, while also a widely recognizable clickable-text indicator, is crass and distracting. Luckily, it is also rendered unnecessary by the use of underlining."

Can someone explain this to me? I don't get the 'crass' part of it. I find that having different colors for things really helps me parse things quickly. By removing the color dimension from the equation, it seems to make it more difficult to know what is what.

Post reply on HN