Please revert the line-height change!

Question

Just checking how many people feel similar. At least for me, the increased space between lines makes it a nightmare to read. My eyes lack guidance and just feel somehow lost with so much white space.

This change also breaks posts that use Unicode box-drawing characters, as pointed out in this answer.

Details and reason given for the change:

Our line spacing is ~1.6.

W3C writes the following: "Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one."

We prefer more spacing between our lines for better readability. I think there are possible refinements between block level elements though, and plan on further refinement to header spacing now that this is in production. via comment

Answer 1

The new line-height makes it hard to mentally separate paragraphs. It's difficult to tell from a glance which lines belong to which paragraph, while the old line-height made this very easy to distinguish.

Anyways, let's do what we do best as programmers ;)

Revert Stack Exchange Formatting

• Google Chrome Extension (customizable)
  • Update (May 2021): added option to revert fonts
• Greasemonkey / Tampermonkey script | (only line-height)
• Stylish theme (+ Stylus) --| [Dark mode]

PLEASE UPDATE SCRIPTS!: updated to fix new changes to code blocks (Sep 24, 2020)

Mobile:

• Limited solution: per-page click-activated JavaScript (iOS, Android)
• Kiwi Browser (Android) -- install the Chrome extension above (not tested)

Contribute:

GitHub repo -- help me revert it faithfully!

Answer 2

This probably shouldn't be an answer, but I can't think of where else it should go.

Aaron has commented on the linked question that the line-height is ~1.6.

I maintain that the line-height needs to be tailored to the font in use and the size of that font in normal text. A blanket ratio is not enough; more finesse is required.

Most users will, I guess, use Arial. Arial is a good workhorse with a fairly-large x-height but generally narrow letters. It's the narrow, fairly large letters which make the line-spacing too wide. For posterity, here's a screenshot of the current arrangement:

A line-height ratio of 1.6 does work with other fonts and other source material. Here's a blog I maintain which uses Calluna Sans. That's a wider font. The font size is set as "1em", so it's decided by the browser, and you can see that the letter-height (and the x-height) are quite similar to Arial here with the default browser settings. But it's quite a bit wider, and the stroke weight is heavier. The source material is different, too; this is a text from a Catholic homily. A slightly more densely-argued text may well benefit from a greater line-spacing; and it's reasonable for such a site to look pretty too. However I would argue that for the vast majority of posts in SE, it's not needed.

(The line length in the blog is longer than that, but SE does odd things to wide images)

Stack Exchange posts are, for the most part, not works of art. They are factual posts where the content needs to be read easily, without worrying about how each line relates to the next. It's perfectly possible to see where paragraph breaks happen in this post, but the spacing — when combined with the font choice and possibly the line length — makes it difficult to relate lines together when reading, and that must be the prime objective.

The line-spacing doesn't even need to be whatever it was. I can't actually find that now, but I suspect it was the 1.30769231 which still appears in the stylesheet. That could be widened (although it's such a low priority when there are far more important things for SE to be working on); I would suggest 1.45 is sufficient for Arial. Other fonts like Georgia on English and Palatino on Christianity will probably need different values.

Answer 3

I hope this gets reverted, but in the meantime, we can browse with the old line height of 1.3 with this mini userscript I wrote. Screenshot:

You'll need a userscript manager like Tampermonkey.

Answer 4

Edit 2020-09-09: status-completed

It is quite common to use things like line drawing characters in illustrations. With the new line height on code blocks, this looks even worse than before.

Real-life examples

From here

┌───┬───┬───┐
│1 1│1 2│1 3│
├───┼───┼───┤
│2 1│2 2│2 3│
├───┼───┼───┤
│3 1│3 2│3 3│
└───┴───┴───┘

From here:

┌→────────────────────────────────────────┐
│ ┌→┐ ┌→┐ ┌→┐ ┌→┐ ┌→┐ ┌→┐ ┌→┐ ┌→┐ ┌→┐ ┌→┐ │
│ │0│ │1│ │2│ │3│ │4│ │5│ │6│ │7│ │8│ │9│ │
│ └─┘ └─┘ └─┘ └─┘ └─┘ └─┘ └─┘ └─┘ └─┘ └─┘ │
└∊────────────────────────────────────────┘

From here:

 ┌─┴─┐          
×/ ┌─┼───┐      
   ⊢ ÷ ┌─┼──┐  
      +/ - +⍨

From here:

    ┌──────┴──────┐
 ┌──┼────┐     ┌──┼──┐
┌┴┐┌┴┐┌──┴──┐ ┌┴┐┌┴┐┌┴┐
│⊢││~││∘.× ⍨│ │≢││↓││⍳│
└─┘└─┘└─────┘ └─┘└─┘└─┘

Answer 5

There was probably no problem with the previous UI. Forgive me if there was. But if there was, keep it as an option that one can choose. Even better, keep two tabs, one for the previous, and one experimental. People might want to give feedbacks on experimental UIs. By the experimental tab, I mean a Theme tab. Users may choose one already made or customise one on their own.

By default, I would prefer the previous UI. It's looking just odd today!

Edit: The text here as it appears now in mobile devices resembles the one in desktop devices. I mean the colour was sort of yellowish earlier in mobile devices. I hated this change most.

Answer 6

To quote @hkotsubo:

Lots of people are saying it's harder to read. You should at least take this into consideration before saying you're done talking about it.

I totally agree. It's not only on my laptop, it's worse on mobile too. Although I don't use my mobile very often, I use it enough to make it a problem. From this comment:

That's not even just for people with cognitive disabilities, who struggle more than usual. It is true of everyone. Stop attacking the research angle while presenting nothing of your own. We're done talking about this.

It's not true for everyone, not for me anyway.

The feedback you're getting about this seems pretty negative. Please, revert to 1.3, and don't fix it if it isn't broken. If these two posts are anything to tell by, the old way was better.

I won't deny there are exceptions, but the vast majority of us are saying it is not a good change. If reverting it is not possible, or just isn't going to happen, then adding options in user preferences still seems like a good idea, hard work or not.

---

UPDATE:

Sixteen days have now passed since Aaron Shekey posted this answer with the update saying the proposed line-height of 1.6 had been adjusted to 1.5, and we haven't received a reply to our many questions since. Is Stack Exchange going to even consider reverting the changes, or adding options in user preferences? Or is the change just going to endure, like the one about the blockquotes? Resourceful @Prid made another extension to revert the changes on that, too.

Extensions, userscripts, and various other "Band-aids" are all very well, but making tons of people use multiple third-party resources to revert the various poor design choices made by Stack Exchange is...not great.

I would also like to know why the larger line-height was deemed favorable, and why no user testing was performed (and if there was, we haven't heard about it)? A line-height of 1.5 might be good for some, but it is not for all. To quote @ResistanceIsFutile, "catering for accessibility means catering for everyone, not just some."

I don't think giving us control over something as simple as line-spacing, or quote-background color, is a big deal to ask for.

Answer 7

Yes, I agree. Please revert the line height back to 1.3! The adjustment to 1.5 is not enough.

The lines are still harder to read IMHO.

Answer 8

Prid said

The new line-height makes it hard to mentally separate paragraphs.

I'd like to add that for me, the new spacing makes it very hard to tie even the same sentence together as I try to go from one line to the next.

It's so disconcerting and something I've never experienced before, but it makes me give up halfway down a paragraph because I've lost the thread of what was being said. I go back a couple of times to try to re-read, but it seems to make it considerably more effort.
As someone who's never had any reading difficulty since infant school 55 years ago, I find this particularly odd.
If this is some kind of medical condition It's not one I've ever noticed before.

This is a link to a BBC News site page which has similar wide spacing, but using a larger, slightly more solid font. I don't have the same difficulty with this. I have no real idea what technically differentiates one from the other - nor any clue how to look up what line spacing or font it uses.
[You have to bear in mind that, though Stack Overflow might be populated by people well-versed in or at least familiar with this type of work, the rest of us across Stack Exchange are just 'users'.]

There seems to be some knockback from mods/developers here who are insisting 'research shows bigger lines are better'.
Empirically, this doesn't appear to apply to everyone.
It seems someone read a research paper and the rest of us must suffer the consequences.

One additional factor that just ocurred to me is that Windows & Mac users are seeing rather different things. Ask Different used to use a Mac-specific font which was lovely to read - unfortunately that was removed a couple of years ago, leaving us with the poor alternative that SE now uses globally.

Screenshots of my earlier paragraph, first on Mac Safari

then on Windows Microsoft Edge

^{Click through to get these at 'life size' for better comparison.}

So, by my own personal opinion, it doesn't look quite so bad on Windows as it does on Mac. There is a slightly better balance between font size & spacing.
This makes me think it was only ever checked on one platform.

Answer 9

I want to draw readers' attention the fact that the W3C does not actually recommend setting the line height to 1.5 or higher.

The relevant recommendations seem to be WCAG criteria 1.4.12 (Text Spacing) and 1.4.8 (Visual Presentation).

Criterion 1.4.12 regarding text spacing reads (emphasis mine):

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

• Line height (line spacing) to at least 1.5 times the font size;
• (etc.)

So this isn't a requirement, or a recommendation, for the line height setting - it's a requirement that if the lines are set to be more spaced-out, the site/webpage not become unusable or dysfunctional, and no content becomes invisible/inaccessible.

The W3C document entitled "Understanding Success Criterion 1.4.12: Text Spacing" reiterates this (emphasis mine):

The intent of this Success Criterion (SC) is to ensure that people can override author specified text spacing to improve their reading experience.

The recommendation is to support overriding of settings to cater to the needs of some readers - not to change the default settings.

WCAG criterion 1.4.8 regarding Visual presentation reads:

For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)

... snip ...

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

So, not the default, but achieveability through some mechanism.

@MaxD linked to a "techniques" document regarding criterion 1.4.8 which mentions the importance of providing line spacing between 1.5 and 2, but:

• That document is not the official WCAG.
• "Providing" doesn't mean "having that be the default". The actual WCAG clarifies that the intent is providing the mechanism for making that setting. For example, a site-level per-user setting to that effect.
• Criterion 1.4.8 regards AAA-level conformance. That level is not intended (according to the WCAG document itself) for general use, but for more accessibility-specialized sites.

_{Due disclosure: I have posted this as a reply on this related discussion as well.}

Answer 10

I’ve split the difference between the original 1.3 line-height and the proposed 1.6 line-height. We’re now at 1.5, with additional refinements to spacing between elements. I’ve also reduced line height within code blocks back to near the original value.

Update

It took me longer than I wanted, but I’ve got some updates for you on our s-prose component. You can see the pull request with my thinking over at our design system’s repo. It does the following:

1. Spreads s-prose headers out from paragraphs for better grouping.
2. Tightens up s-prose spacing between paragraphs a bit, and made sure spacing under headings are more consistent.
3. Replaces all s-prose margins internal to the component with a CSS variable var(--s-prose-spacing) so our users can more easily tinker with it in their browsers and user scripts.
4. Kills trailing margins in s-prose

You can see some examples of content at our Stacks documentation.