Is it just me who finds the serif font used in this website too narrow and hard on the eyes, even on Retina displays?
replies(3):
> 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.
I feel like I see this every year. Unfortunately I like it less every year too.
calc( 1em + (2 - 1) * ( (100vw - 20em) / ( 100 - 20) ))
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?
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.
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)
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.
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".
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.
if you ctrl-minus a bit, it becomes more bearable
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.
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?).
https://github.com/eddelbuettel/tint
https://cran.r-project.org/web/packages/tint/vignettes/tintH...
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.
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.
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.
More seriously, you bring up a good point about form factors. I imagine you are reading my site on a cell-phone. On these devices I purposely made the page width more-or-less fill the width of the screen to fit more text in at a readable font-size.
This used to be a reasonable choice because cell phones all had bezels. Now that many phones have screens that extend all the way to the edge of the device, pages like mine look weird as the text bleeds underneath the users fingers.
Just another example of how it is difficult to design a page that looks good on the multitude of devices that people use these days.
I'm probably not going to change it though.
Could it be that you unconsciously prefer serif fonts to sans serif fonts? Sans serif fonts are preferred by people with dyslexia, for example.
Another thing that comes to mind is high contrast in stroke thickness, thick vertical strokes and thin horizontal or curved strokes. This is reminiscent of engravings and calligraphy, but can be difficult to read on a screen, especially when the font size is small. Anti-aliasing options can also affect this and lead to even greater differences between letters than expected.
Articles like this one may provide you with the right words to describe what you don't like about certain fonts: https://medium.com/design-bootcamp/a-beginners-guide-to-web-...