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.
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.
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.
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.)
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.
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.
[+] [-] ordinaryradical|7 years ago|reply
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.
[+] [-] dmix|7 years ago|reply
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.
[+] [-] killjoywashere|7 years ago|reply
[+] [-] bill_rr|7 years ago|reply
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.
[+] [-] mirimir|7 years ago|reply
>> 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.
[+] [-] Eiriksmal|7 years ago|reply
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.
[+] [-] larkeith|7 years ago|reply
[+] [-] fouc|7 years ago|reply
[+] [-] gjstein|7 years ago|reply
[1] http://cachestocaches.com
[+] [-] Eiriksmal|7 years ago|reply
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.
[+] [-] _bxg1|7 years ago|reply
[+] [-] kqr|7 years ago|reply
At least, that's why I did it the way I did at https://two-wrongs.com.
[+] [-] Tomte|7 years ago|reply
[+] [-] velcrovan|7 years ago|reply
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.
For comparison, here’s a one-off article of mine that I published using Tufte CSS: https://thelocalyarn.com/excursus/secretary/posts/web-books....
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.)
[+] [-] Eiriksmal|7 years ago|reply
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.
[+] [-] kibibu|7 years ago|reply
[+] [-] wildmindwriting|7 years ago|reply
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'.
[+] [-] tills13|7 years ago|reply
[+] [-] jez|7 years ago|reply
I put together a project to be able to make new Tufte CSS sites with Jekyll:
https://github.com/jez/tufte-pandoc-css
It makes it easy to use Tufte CSS with markdown (including side notes!)
[+] [-] Eiriksmal|7 years ago|reply
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.
[+] [-] meerita|7 years ago|reply
[+] [-] jacobedawson|7 years ago|reply
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.
[+] [-] kevingrahl|7 years ago|reply
Does anyone know if there’s a preferably open source alternative available that I could host on my own server?
[+] [-] dmix|7 years ago|reply
[+] [-] lordgrenville|7 years ago|reply
https://github.com/apas/athena
[+] [-] q-base|7 years ago|reply
[+] [-] AndrewStephens|7 years ago|reply
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.
[0] https://sheep.horse/2017/10/how_you_are_reading_this_page.ht...
[+] [-] weego|7 years ago|reply
[+] [-] Eiriksmal|7 years ago|reply
[+] [-] combatentropy|7 years ago|reply
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.
[+] [-] JoshuaRLi|7 years ago|reply
[+] [-] lenova|7 years ago|reply
"Pelican static site generator config for Lawler.io": https://github.com/Eiriksmal/lawler-dot-io
[+] [-] Eiriksmal|7 years ago|reply
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.
[+] [-] indigodaddy|7 years ago|reply
[+] [-] fouc|7 years ago|reply
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.
[+] [-] pmiller2|7 years ago|reply
[+] [-] lazyjones|7 years ago|reply
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.
[+] [-] unknown|7 years ago|reply
[deleted]
[+] [-] mattbgates|7 years ago|reply
https://writetufte.com