I have to say it is refreshing to see someone actually thinking about things like line length when it comes to how their content is portrayed. To me, this is not just being persnickety, it's about intention. If you want me to resonate with your idea, the more clearly it is communicated (writing and typography) the easier it is for me to get invested.
Look at the simplicity of articles on The New Yorker, for example, which are very long but very readable because there's very little cruft to distract you and the design is so simple. My experience there is almost interchangeable with a "reader view" of the page, a feature that by its very existence should communicate that the modern web has lost its way in thinking about these things.
It's not that every site needs to be minimalist, but if you're writing essays or text of substance, caring about this kind of stuff goes a long way. "Engagement" is not just how long I stick around but the mental investment I put into what's there, and when it comes to writing, less design is often more.
> I have to say it is refreshing to see someone actually thinking about things like line length when it comes to how their content is portrayed.
Most people (rightfully) are letting the frameworks handle this. The creators should be experts at typography, which includes line-heights and various rules. It's not a pure science though, so there will always be variation.
I don't do webdev, so my primary use for the inspectors built into browsers is to right-click-inspect-element and delete offending elements. I find myself doing this especially on Wired articles.
The New Yorker is indeed pretty solid, but it's funny that that's the standard because - as you say - it's still not quite as good as most "reader modes." The margins contain ads and I feel like I'm seeing "suggested articles" (aka pictures of AOC) every 5 minutes - which is a lot of AOC since some of the articles take up to an hour.
> Why doesn’t this website fill 100% of your 1080p or 4K monitor’s screen with text? There’s a very specific reason, and that is text measure.
>> A block of text or paragraph has a maximum line length that fits a determined design. If the lines are too short then the text becomes disjointed; if they are too long the content loses rhythm as the reader searches for the start of each line.
>> Wikipedia entry on “Measure (typography)”, 2019
> The optimal width of a paragraph of text is anywhere from 50–80 characters per line, depending on which of the many studies you cite. If a paragraph is too wide, your eye loses its place when tracking back to the beginning of the next line. This decreases reading comprehension—and increases my irritation when I realize I’m re-reading the same line.
OK, so have the text flow into multiple columns on wide displays.
I've been thinking that through today, actually. Newspapers don't choose multi-column layouts because it's the easiest to read--it's to make the most of an expensive resource available in a fixed size. Besides that, imagine the UX difficulty in unrolling a pre-Gutenberg scroll to catch up on the day's news!
For a computer, even if you could fit 4-8 text columns on a 5K monitor... What do you do if the content demands a 5th-9th column? You'll have to scroll.
As someone else pointed out in the first iteration of my design here, using non-standard behavior for the margin notes in the mobile view meant it took experimenting to figure out that tapping on a cross-in-a-circle icon would expand additional flavor text. A distinctly un-cool surprise.
When presented with a multi-column text layout, would a user know how to intuitively use the site? They're trained to look for a scrollbar on the right side of the screen to indicate "Hey, friend! More content below." Would you keep adding columns and scroll horizontally indefinitely? There are a lot of challenges to overcome in that design.
The appeal of the Tufte-styled site, for me, is the side notes/margin notes. The whole site is ~1200px wide in three columns. 200px nav, 600px text body, and 315px side notes--the rest is padding between columns. The design takes advantage of the "wasted" space to add in delicious flavor text that I'd otherwise cram in with loads of em dashes and lengthy parenthetical asides.
I designed the page on a/for a 1080p screen, assuming most 4K+ users are used to seeing websites hang out in the middle of their massive TV-sized displays.
Someday, though, it'd be interesting to see if there's a way to combine more information density on a high resolution display without sacrificing readability/usability.
My display is only 1900 wide, and it annoys me to scroll 80-character columns. Especially when they blow up to 30+ points, and I need to resize the browser window.
If WP for DOS could format multi-column pages, I can't imagine that it's that hard. Scrolling sideways is pretty intuitive. And it's become common for image slideshows. Or one could replace continuous scrolling with jumping to the next page.
Side scrolling is also common for online epub readers, and with a visual 'assist' of looking like a book, or large left-right arrows it's rather intuitive.
I think my next blog redesign might incorporate a 'book-ish' horizontal scroll, rather than the infinite vertical scroll...
> If WP for DOS could format multi-column pages, I can't imagine that it's that hard
Funnily enough browsers have this support already (using column-width, or a prefix version of it), so for the web it's basically free, and trivial to add to a site:
Columns don't really work well with scrolling, unfortunately. You can do multiple pages of multiple columns or one scrollable column for longer content - personally, I prefer the latter (and it's simpler technically), but either works.
Multiple columns don't work well for vertical scrolling. They should work fine if you horizontally scroll to see more columns (for example to the right for writing in English).
This would allow more content to be displayed for users with larger screens without overly penalizing users who could only view one column at a time.
The challenge would be to convert the normal vertical scroll to a horizontal scroll in an intuitive way (ie not too jarring for the user).
But you can get display size, and paginate with ~80 character columns. So there's no need to scroll. As you say, scrolling really only works with one column. When I need to read lots of stuff that's hard-coded with two columns, I rotate my monitor to portrait.
Current Microsoft's UI guidelines seems to prefer viewport height columns and horizontal scrolling, which makes much sense, but the UI which presents sane UX with that idea simply is not there yet.
This line length stuff probably only applies to books/mobile/tablet, but not desktop where it's easy to keep track of where you are w/ scrolling & the mouse cursor.
Love the Tufte style. One real limitation, however, is the "mobile view" in which the margin notes collapse into clickable superscript numbers. I don't think it's clear to most readers that one is supposed to click on those to expand them, meaning they aren't likely read by perhaps 50% of your readers. One thing I've seen, and adapted for my own site [1], is inserting these margin notes beneath the paragraph in mobile mode; this way, the notes do not go unread.
Gregory, your margin notes look great in the mobile view. I'm using mine as "frenetic" textual additions (thanks for the great description, HN commenter!), which would be too messy to inject straight into the content without a click-to-reveal.
It's a nice reminder, however, that search engines suck up the margin notes and inject them in the text where they find them. I noticed my site is indexed in Bing/DDG with the circle-cross icon in the middle of the text. I've been placing them so they line up nicely with the paragraph they're found in, but that doesn't lend to a very mobile-friendly reading experience.
A solution where I use eg cornflowerblue underlined icons, as suggested in the sibling comment, would be a solid solution for my personal use-case.
For me it was weird having to tap around (to open and to close) in such a fluid article. It was distracting in a way. I would suggest trying to simply insert them into parentheses on mobile, perhaps heavily grayed out if you want to deemphasize, or if they're not that important drop them altogether.
I love minimalist design, but have never understood the point of Tufte CSS. I find it baroque, without a clear design idea (just look at all those font sizes, combined with their apparent non-relationship to padding, for example at those Hacker News quote notices), and quite hard to read.
The content at the link is simply a poor adaptation of Tufte CSS. The text block has been made too narrow, lots of bloggy little headers and footers have been sprinkled everywhere, and marginal notes are used in a frenetic way that competes with the text.
The original design of Tufte CSS is good, but even that won’t convince a reader to take a super bloggy blog seriously (and I’m a fan of super bloggy blogs). The design has to match the ideas and the writing.
It’s my own thing, so obviously I’m biased. But I can say objectively: A) I didn't dick around with the original Tufte design, B) I rewrote it for a year until I felt it was telling a coherent message, C) to me it is much easier to look at than the above (why would that be?) D) it was very well received E) in the 3 (?) years since I wrote it, I haven’t written anything else for which I felt like Tufte CSS would be a good fit.
(Another thing to consider: the ET Book font in Tufte CSS just doesn't look very good on low-DPI displays.)
That is fascinating, impressive, inspirational - thank you for the link & the article.
And yet, it's also demotivating to the point of being depressing. Clicking through the chain of links culminating with Polen and Racket, the sheer depth of the stack required, the learning & work, to create beautiful digital+printed books, feels like it has much to be desired :-/
I know that feeling! It just means you have a lot of reading and tinkering to do.
Design+publishing is inherently complicated and that complexity is conserved; you make one part of it simpler, you necessarily make another part harder. This is true of print publishing and it is true of web publishing, and they each have their own stacks. Any attempt to combine the two is going to have its own complexity. For this reason most people aren't interested in going there, so the tooling can seem very rudimentary compared with the tools that exist in either medium in isolation.
Pollen and Racket seemed arcane at first. But both are elegant, well-documented tools with extremely helpful communities. Delving into them has been probably the most rewarding experience I’ve had with anything computer-related, and that experience is still ongoing.
I'm still struggling to get the <blockquotes> to look right. There's not quite enough of an offset from the body text. Do you have any suggestions there?
In regards to font sizes, there are 5: H1s, H2s, H3s, body text, and captions.
Edit: Ahhh, and the paragraph lead ins makes 6 different sizes. That should be adjusted.
For blockquotes I personally favor a small 3px border-left thats preferably colored. It provides a clear visual separation from the main content and most people are accustomed to seeing a border-left as a quote from their usage in email reply’s (quote level).
Here’s a link to one article on my blog as an example:
I also find that all the pseudo-print fonts that people choose for Tufte-style sites are either blurry or have wildly inconsistent stem widths. Maybe it's a Windows thing.
I like your site design (and the most recent article), particularly the side/margin notes. I had done a similar thing on a previous incarnation of my own site but eventually decided to keep them in the footnotes section so that the focus would be kept on the essay. But seeing them here makes me rethink that decision.
I am slowly working my way through Web Typography by Richard Rutter (http://www.book.webtypography.net/) as I redesign my website. You may find it helpful as well. Another inspiration is Craig Mod's (https://craigmod.com) site (of which I took more than a few suggestions from).
Looking forward to reading your other articles! Good luck with the writing practice.
Edit: Change 'first article' to 'most recent article'.
What's with this trend of blogs putting the full post in the catalog / archive view? It makes it hard to scroll through to find something worth reading - I just want to see titles and a snippet (a hook). If it's interesting, I'll click in.
Excellent! I'm positive I saw your plugin while researching the design for my site. It looks like a great package of tools. In the end, I decided to stay away from Rails and use Pelican + Python3. I needed an excuse to brush up on my Python.
Regardless, we've implemented almost identical end-results (I also chose Solarized light, heh) for two different languages' static site generators. All we need is the creator of the Lisp equivalent to chime in...
Edit: Oh, I used Solarized Dark. Thought I swapped that for light at one point, as there's not quite enough contrast across all display qualities.
I like fluid layouts because i like to control the width of every window I open in my computer. I hate those 80-line & fixed designs so much. I enjoy the freedom of setting the content the way I want.
I've found https://outline.com/ to be great for reading content on the net regardless of the original layout, as it basically extracts the text and places it in a centered page with really legible line-height, letter-spacing, font-size & family. Evernote used to have a similar extension but it was sunsetted a couple of years ago.
A similar idea is Athena[1], also based on Tufte CSS. It's a static generator like Jekyll with a minimalist look. Pretty easy to set up and get going, and integrates well with hosting on Github Pages.
Thanks a lot for this! I am really wanting to change my WordPress site to something more simple. Been fascinated for a while about different minimalist static sites, but never found a good way to get started. This looks like an easy way to start, with something that is close to what I am after.
I really like the Tufte CSS style, so much so that I adapted it for my own blog. In my opinion it suits the longer, more thoughtful posts that I was trying to create.
Tufte-style presentation really shines when trying to convey very complex ideas that require a lot of text. For example, this is my attempt at explaining HTTP from the ground up[0]. The side-notes really help to add additional information without breaking the flow of text.
That said, I don't think it looks that great on mobile devices in portrait mode. I still haven't found a good solution to this.
I wouldn't have guessed that those circles were clickable annotations on mobile had I not looked at desktop view and wondered where they'd. I like it as a principle but it's badly signposted as it doesn't feed into any existing experiences.
This is a solid point, thank you. I'll see if I can think of a better way of delineating the mobile margin notes. Maybe Stratechery or Wikipedia have good examples of this.
Usually I'm with you, except for a few fonts like Google's EB Garamond (https://fonts.google.com/specimen/EB+Garamond) and the one used here, ET Book. I think these are better than Times New Roman or Georgia, the two serif fonts I have to choose from if I don't go with web-imported fonts.
My opinion (not a web designer): don't let fonts define design, let them compliment it later on - I know sometimes I would be choosing fonts even before making the layout or content. For most sites, chances are web safe fonts are perfectly fine. If there is a specific and justified design vision, then choose wisely. Try and pull in one serif and one sans-serif font, at maximum. I've seen sites that slap on a bunch of fonts and quite frankly, it's not ideal. If possible, see if you can serve woff2, from a fast (or popularly cached) CDN.
My favorite feature is the one-click deployments. Through the power of SSH keys, the site is deployed with a simple `make rsync_upload`. No Chef scripts, no AWS CodeDeploy pipeline, just plain ol' rsync over SSH.
I guess I assumed this was a blog engine or SSG of some like kind. After reading the article I guess I gather that I assumed incorrectly. Good article though and nice looking blog actually.
The text measure / line length argument probably makes sense for paperback books, and that would likely extend out to mobile/tablet as well.
But perhaps it doesn't make sense when reading on the desktop.
In desktop, you can easily scroll the page to keep track of your spot. You can also use the mouse cursor for to keep your spot in difficult areas. The gains of having long line lengths likely outweigh the occasional difficulty in keeping your spot. The eye reads across faster after all.
> The In both typography- and computer-speak, a character is an individual letter or typographic mark. optimal width of a paragraph of text is anywhere from 50–80 characters per line,
So... Why does the blog format the main text body to be around 40 characters per line on my default window size? If you want to put the focus on this range of line lengths, you'll have to be more flexible with font sizes.
I saw Tufte CSS and loved it too. I'm glad to see someone putting it into action. I loved it so much I wanted others to be able to use it. So I created this nearly complete project to allow anyone to write Tufte essays, blogs, or articles.
Nice! That does make for an extremely-classy table. My only suggestion is that, at 1080p, there's an eye-water 330px gap between the text in the 1st and 2nd columns in the first table. This makes it a bit difficult to tell if quinoa is 1:1.25 or 1:6-1:7. Perhaps there's an elegant way to clamp the maximum table width that works for all 4 tables?
kqr, there are a lot of usability problems that come from stretching columns across the screen. There's a thread talking around some of them here on this post: https://news.ycombinator.com/item?id=19621284
My thinking is that most programmers love information-dense displays. But designers have shown that empty space is vital to creating a truly usable design.
If a website used some minor CSS to add a bit more line-height and slightly-larger font than most browsers ship with, then fills 3840 pixels with wall-to-wall-text, you'll successfully achieve the most information-dense possible site, but utterly sacrifice readability.
Again, I don't think it's accidental that books don't use multiple columns of 66 characters in a landscape-style aspect ratio.
In true HN fashion, commenters are searching for a local maximum (use more of my big monitor) that defies how ordinary people interact with the written word. :)
I think you'd love what my best friend and I have been building for the last two years. It's like Hacker News except no commenting on articles you haven't read (and no skimming allowed!)
I liked the idea but have to say I’m not a fan of your design. It just feels a little rough. Also I expected comment chains to be collapsible.
I also experienced long load times for articles (>5s, some >15s) which is way to long. The first article I read only showed a completion of 77% although I read the whole thing. Not sure how you determine how much has been read but I assume I’m just reading faster than what you’re used to.
Yo - this could be a good idea but I wouldn't be able to tell (apparently) since I can't view any of the content without either downloading an app or signing up.
It might be a better policy to show visitors the top e.g. 5 - 10 trending articles on readup to get them 1.) to get a taste of what's shared and 2.) see if that's any better / different to what they'd find on hacker news (which can be read freely).
Look at the simplicity of articles on The New Yorker, for example, which are very long but very readable because there's very little cruft to distract you and the design is so simple. My experience there is almost interchangeable with a "reader view" of the page, a feature that by its very existence should communicate that the modern web has lost its way in thinking about these things.
It's not that every site needs to be minimalist, but if you're writing essays or text of substance, caring about this kind of stuff goes a long way. "Engagement" is not just how long I stick around but the mental investment I put into what's there, and when it comes to writing, less design is often more.