Live data from Hacker News

Tufte CSS

edwardtufte.github.io

21–30 of 50 posts

Re: Tufte CSS

#22
post #8

Earlier quoted context omitted.

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

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.

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.

Re: Tufte CSS

#23
post #10

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.

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

Re: Tufte CSS

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

Re: Tufte CSS

#25

Earlier quoted context omitted.

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

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.

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

Re: Tufte CSS

#26

There is more to this https://resilientwebdesign.com

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

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

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

Re: Tufte CSS

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

Re: Tufte CSS

#28
post #27

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

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

Re: Tufte CSS

#29
post #23
post #10

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.

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 on OCD level triggering event to read that text.

Re: Tufte CSS

#30
post #27

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

how else would one reference the topic of the article? The name seems like the most concise way to me.
Post reply on HN