The visual density of the newly released design is now so high that it's too hard read.

It's straining my eyes and is literally headache-inducing.

Every time my eyes finish reading a line and return to the left to start the next line below, my eyes are having to dart around:

• left and right because they can't naturally find the start of the new line
• up and down because the lines are too close together so it's hard to judge how far down to move them

We need more space between the main content and the sidebars to fix the left-right problem, and we need a larger line height for those fonts to fix the up-down problem.

I made this change in 2 minutes and I could read the page again:

:root {
	/* Original values are commented out */
	
	/* --layout-sidebar-gap: 2rem; */
	--layout-sidebar-gap: 5rem;
	
	/* --font-line-content: 1.75; */
	--font-line-content: 1.85;
	/* --font-line-normal: 1.5; */
	--font-line-normal: 1.65;
}

Before:

After:

Also worth pointing out is that increasing the spacing fixes accessibility issues like # next to the Usage notes being clickable instead of accidentally scrolling the sidebar because the scrollbar consumed the input.

I'm sure more than 2 mins of messing around will end up with a better final result but an initial tweak away from the current values should occur as a matter of urgency since it's going to affect so many readers and push them away from the site (or will cause them to use a reader view which is going to miss out on the interactive examples and browser support tables).

@spartanatreyu, yes, thank you for sharing your CSS adjustments. I hope the MDN team can consider making these changes official

Hi folks, thanks for your feedback and sharing the CSS adjustments. This is very helpful, and I'll take this to the team! 🙌