MDN has a new frontend! 🎉

[pransh15]

Hey everyone! We’ve just rolled out a completely rebuilt frontend for MDN Web Docs — redesigned and reengineered from the ground up. This is a big step forward in our platform architecture, and we’re excited to finally share it with you!

✨ What’s new:

• A cleaner, more consistent UI
• Improved typography for better readability
• A new code font for clearer, high-quality code examples
• Refreshed icons using the Lucide
• A new search modal to quickly jump to any MDN content
• A redesigned top nav to help you discover everything MDN has to offer

💬 We want your feedback!

This launch is just the beginning. We’re still actively iterating — and we’d love to hear from you:

• Spot a bug? Submit it to our GitHub repo
• Want to chat with the team? Join us in the #platform channel on Discord
• Have suggestions or UX feedback? Drop a comment below 👇
• Join our next Community call on Discord 🤙

MDN is built by developers, for developers, and your input helps us make it even better.

Here’s to the next chapter for MDN — and the next 20 years of web documentation! 🧡

Read the full blog post 👇
https://developer.mozilla.org/en-US/blog/launching-new-front-end/

[dogxii]

I was reading the documentation when I saw the update notification. To be honest, I feel that the new sidebar’s font color and scrollbar don’t look quite right. The sidebar and the main content have lost their visual distinction, which may reduce users’ attention to the main content. I preferred the previous sidebar. Also, I find it strange that there’s no longer any spacing between the main content and the sidebar. (This is just my personal opinion :W )

before:

after:

[spartanatreyu]

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).

[dogxii]

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

[pransh15]

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

[nepnym]

Not sure I'd call it a bug, but pages with wide tables are miserable to read, and the content window remains narrow even when setting zoom to a lower level so it's unreadable without deleting elements and messing around with the page css.
Page Used

Pictures:
100% Zoom:

80% Zoom:

80% Zoom with CSS Adjustments:

Even after the whole table is still too wide for the window, but whatever.
I'm not familiar enough with CSS to know how to fix it, however ^^"

Also, as an aside, alternating colors in the punctuation table aren't working optimally.