5 ms·
Tufte CSS
- techlatest_net 1y ago[dead]
- behnamoh 1y agoIs it just me who finds the serif font used in this website too narrow and hard on the eyes, even on Retina displays?
- itronitron 1y agoIt doesn't work as white text on a dark background.
- CGMthrowaway 1y agoThis style (fancy Georgia-like typeface on a cream background) was a big trend back in the 2010s, when this page was created.
- weego 1y agoAnd 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 1y agoI'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.
- Y-bar 1y agoYou use dark mode I assume? The serif text work much better in light mode. Dark mode often need additional font weight to work well.
- behnamoh 1y agoNope, I use light mode.
- mediumsmart 1y agoThere is more to this https://resilientwebdesign.com https://resilientwebdesign.com
- skrtskrt 1y agoThat looks horrific too why is there an enormous amount of space between each letter, word, and line.
- LoganDark 1y agoSeems like it was designed mobile-first. Or mobile-only.
- primozk 1y agoNot so resilient then.
- daemonologist 1y agoThe 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 1y agoThe text is enormous on a "standard" 1280px desktop window and very little content fits on the screen due to the vertical spacing.
- NooneAtAll3 1y agoimo that effect is simply due to website being too zoomed-in if you ctrl-minus a bit, it becomes more bearable
- lucideer 1y agoI 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____ 1y agoReally? I took an immediate dislike to it. Same for the site linked in the comments below - https://resilientwebdesign.com 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?
- chipotle_coyote 1y agoIt'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.
- Karawebnetwork 1y ago> Can anyone more informed comment on the font? 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-and-mobile-typography-f68ebba857db https://medium.com/design-bootcamp/a-beginners-guide-to-web-...
- coneonthefloor 1y agoHow many times will Tufte CSS be reposted? I feel like I see this every year. Unfortunately I like it less every year too.
- daemonologist 1y agoI 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 https://news.ycombinator.com/item?id=10012360
- ChrisArchitect 1y agoWas 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.
- hinkley 1y agoLooks like about every 18 months.
- piskov 1y agoBembo-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 1y agoI'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".
- piskov 1y agoBasically 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.
- stronglikedan 1y ago> 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?).
- imiric 1y agoHeh you're right, it is bad. I don't see it on "Please", "Also", and the small caps, but agree with the rest.
- corysama 1y ago> 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.
- BoredPositron 1y agoThe 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.
- chipotle_coyote 1y agoI 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.)
- bryanlarsen 1y agoNot using #000000 for background black removes an opportunity for your site to look awesome on OLED screens.
- tomhow 1y agoPreviously: Tufte CSS - https://news.ycombinator.com/item?id=42820449 https://news.ycombinator.com/item?id=42820449 - Jan 2025 (4 comments) Tufte CSS - https://news.ycombinator.com/item?id=35032334 https://news.ycombinator.com/item?id=35032334 - March 2023 (32 comments) Tufte CSS - https://news.ycombinator.com/item?id=23828196 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 https://news.ycombinator.com/item?id=19615895 - April 2019 (74 comments) Tufte CSS - https://news.ycombinator.com/item?id=15633102 https://news.ycombinator.com/item?id=15633102 - Nov 2017 (59 comments) Tufte CSS - https://news.ycombinator.com/item?id=10555319 https://news.ycombinator.com/item?id=10555319 - Nov 2015 (26 comments) Tufte CSS - https://news.ycombinator.com/item?id=10012360 https://news.ycombinator.com/item?id=10012360 - Aug 2015 (103 comments)
- iammjm 1y agoctrl+F "tufte" results in 47 hits in this fairly short article. The guy must love his name even more than Wolfram.
- eindiran 1y agoThe first four words on that page include the name of the author "Dave Liepmann" which != Tufte
- stronglikedan 1y agohow else would one reference the topic of the article? The name seems like the most concise way to me.
- malshe 1y agoI like Dirk Eddelbuettel and Jonathan Gilligan's version better: https://github.com/eddelbuettel/tint https://github.com/eddelbuettel/tint https://cran.r-project.org/web/packages/tint/vignettes/tintHtmlIntro.html https://cran.r-project.org/web/packages/tint/vignettes/tintH...
- stevejb 1y ago> "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.
- kelvinjps10 1y agohttps://scribe.rip/ https://scribe.rip/ I like this medium frontent that has tuffle css as stylesheet
- AndrewStephens 1y agoI have been using (an older version of) Tufte CSS on my blog[0] for years now. I had to tweak it quite a bit before I thought it looked OK on both phones and tablets but I really think it does work well for the longer-form posts I was originally aiming for. [0] https://sheep.horse/everything.html https://sheep.horse/everything.html
- camillomiller 1y agoI would add more left and right padding.
- AndrewStephens 1y agoIt's my website and I'll do what I want! :) 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.
- asah 1y agoBeautiful. Bug? when I narrowed the window, the side notes disappeared?