HN Distilled

Essential insights from Hacker News discussions

Tufte CSS

Original Article

Hacker News Discussion

This Hacker News discussion primarily revolves around the aesthetics and design choices of a website heavily influenced by Tufte's principles, particularly as implemented through Tufte CSS. Key themes include typography, readability, design trends, color contrast, and the recurring nature of Tufte CSS discussions on Hacker News.

Typography and Readability Concerns

A significant portion of the conversation is dedicated to the legibility of the website's serif font, "ET Book," which is inspired by Bembo. Users voiced strong opinions on whether the font is easy or difficult to read, with several pointing to specific issues like spacing and rendering.

  • Narrow and Hard-to-Read Serif Font: Some users found the serif font, even on Retina displays, to be too narrow and straining on the eyes.

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

  • Dark Mode Issues: The use of the serif font in a dark mode context was also criticized.

    • itronitron stated, "It doesn't work as white text on a dark background."

  • Spacing and Kerning Problems: Several participants highlighted issues with letter and word spacing, along with what they perceived as poor kerning.

    • skrtskrt found the spacing abhorrent: "That looks horrific too why is there an enormous amount of space between each letter, word, and line."
    • piskov was particularly harsh: "Bembo-like font is atrocious. Kerning is horrible." They later elaborated on specific problematic pairs: "Basically every problematic pair with one of the letters being uppercased... Punctuatuion symbols as in Finally, Markdown’s."
    • chipotle_coyote suggested the issue might be the spacing: "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."

  • Font Rendering and System Differences: The perception of font issues was also linked to differences in operating system and browser font rendering.

    • imiric, while not seeing major issues, acknowledged potential differences: "Maybe it has to do with font rendering on your system. It looks fine for me on Windows and Firefox."

Design Trends and Aging Aesthetics

The discussion touched upon whether the website's design, inspired by a 2010s trend, has aged well in the context of evolving web design sensibilities.

  • Dated Design: Some users felt the design aesthetic, particularly the "fancy Georgia-like typeface on a cream background," was a trend from the early 2010s that hasn't aged gracefully.

    • CGMthrowaway noted, "This style (fancy Georgia-like typeface on a cream background) was a big trend back in the 2010s, when this page was created."
    • weego agreed: "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."

  • Timelessness vs. Trends: A counterargument was presented that the design's inspiration from classical book layouts could be considered timeless rather than trendy.

    • imiric countered, "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."

  • Familiarity and Overexposure: One user suggested that the perceived dating of the design might be due to its widespread adoption and subsequent overexposure.

    • lucideer recalled liking it initially but felt it had dated over time: "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)."

Layout and Responsiveness

Specific comments addressed how the website's layout and responsive design choices impact user experience, particularly on larger screens.

  • Mobile-First or Mobile-Only Design: The layout was perceived by some as being designed with mobile devices as the primary consideration, leading to issues on desktop.

    • LoganDark commented, "Seems like it was designed mobile-first. Or mobile-only."

  • Dynamic Font Sizing and Line Height: The use of calc() for font sizing based on viewport width and a high line height was identified as a cause for text appearing too large and sparse on certain screen resolutions.

    • daemonologist explained, "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."
    • wmf elaborated on the impact on larger screens: "The text is enormous on a "standard" 1280px desktop window and very little content fits on the screen due to the vertical spacing."

  • Zoom Level as a Factor: One user suggested that the perceived issues could be due to the user's browser zoom level.

    • NooneAtAll3 offered, "imo that effect is simply due to website being too zoomed-in. if you ctrl-minus a bit, it becomes more bearable."

Color Contrast and Digital vs. Physical Realities

The discussion also delved into the rationale behind the website's use of off-white and off-black colors, challenging the premise of "dialing down harsh contrast."

  • Off-White and Off-Black Rationale: The website's use of #fffff8 and #111111 to "dial down the harsh contrast" was met with skepticism.

    • corysama questioned the argument: "I never got this argument. ... 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.'"

  • OLED Screen Considerations: The choice to avoid pure black (#000000) was seen as a missed opportunity for OLED screens.

    • bryanlarsen stated, "Not using #000000 for background black removes an opportunity for your site to look awesome on OLED screens."

  • Accessibility and User Variations: Some users argued that reducing contrast could negatively impact users with less sophisticated displays or those with visual impairments, contradicting accessibility principles.

    • sxp argued forcefully: "OP's argument is bullshit. ... 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. ... And since most people have crappy cheap screens instead of fancy Macbooks that UI designers use, reducing contrast makes it worse for them."

  • Calibration and Contrast Settings: The nature of display contrast settings and calibration was also debated.

    • crooked-v commented, "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."
    • nkrisc also took issue with the premise: "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."

Recurring Discussion of Tufte CSS

A recurring theme was the frequent reappearance of Tufte CSS-related posts on Hacker News, often eliciting similar discussions and criticisms.

  • HN Tradition: The poster noted the cyclical nature of Tufte CSS discussions on the platform.

    • coneonthefloor asked, "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 confirmed this sentiment: "I think posting Tufte CSS, upvoting it, and complaining about it in the comments is a bit of an HN tradition at this point." A link to a 10-year-old discussion was provided to illustrate this.

  • Incremental Updates: Despite its recurring nature, it was noted that Tufte CSS has seen some minor updates over the years.

    • ChrisArchitect remarked, "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."