/wd/ - Web Design

Starting a discussion thread for /wd/.

This board focuses on Web Design. Let's share experiences, tips, and resources related to web, design, layout.

What are you working on? What challenges are you facing? Share your thoughts!

when you are designing layouts w/ heavy reading requirements, default line heights often feel too cramped. if your body font size is 16px, try setting a specific value to improve readability. moving from the browser default to something slightly more breathable makes a massive difference in how users scan your content. i recommend testing values btwn 1.5 and 1.6 for optimal legibility.
the golden rule
always prioritize the vertical rhythm of your typography over just making things look pretty. if your leading is too tight, users will skip entire paragraphs w/o realizing it. you can use this css property to ensure consistency across all text blocks:

line-height: 1.625;

>the secret to great design is often found in the whitespace between lines.
some designers think more weight is the answer, but too much bolding actually ruins the visual hierarchy . stick to subtle adjustments and focus on how the eye moves across the page. avoid the temptation to just increase font size when you can simply adjust the spacing.

we are moving toward a future where every site uses standardized font weights just to save on performance. it is basically making the web look like one giant, boring mono-spaced document and i am totally fine extremely worried about the loss of __expressive type design_

generative fonts are making bespoke type design completely obsolete . we are moving toward a future where every website looks exactly the same because everyone is just using the same algorithmic weights.

notice how more landing pages are ditching the strict column structure for organic overlapping layers . it feels like designers are moving away from rigid containers toward a style where elements just float freely. this shift makes sites feel much less like templates and more like interactive art pieces ]. instead of precise alignment, we see heavy use of variable typography to create depth thru scale alone.
>it breaks the rules of traditional hierarchy
the way text interacts w/ background imagery is getting much more aggressive lately. seeing

z-index: 10;

used on almost every decorative element is becoming the new norm for creating that layered look.

lowkey when things aren't stressful it is the perfect moment to go thru those old error logs and existing performance bottlenecks. maybe stop ignoring the lcp issues
>does anyone else use slow weeks to just audit everything?

article: https://csswizardry.com/2026/08/web-perf-wednesday-004-a-quiet-week-is-time-to-investigate/

try using font-size: clamp(1rem, 5vw, 2.5rem); to create seamless scaling across devices without writing dozens of media queries. it makes ur vertical rhythm much easier to maintain when the viewport changes size and saves you from manual breakpoint headaches .

let's try building a single-page layout using only one font family and varying weights to create hierarchy. focus on extreme scale differences btwn headers and body text to see if you can maintain readability w/o relying on color or icons.
>no grid systems allowed
use css grid but ignore the columns

just stumbled on this breakdown of using webgpu for custom geometry deformation. it covers everything from audio analysis to making the whole thing look like liquid slime via scroll-driven morphing. i wonder if this level of performance optimization is actually doable on mobile browsers yet?

link: https://tympanus.net/codrops/2026/08/20/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu/

if you want your layouts to feel premium, try pairing a high-contrast serif w/ a very clean, wide-tracked sans-serif. most people forget that letter spacing is the easiest way to fix mediocre typography. specifically, try adding

letter-spacing: 0.05em;

to your uppercase subheaders to give them more breathing room. it makes the hierarchy feel much more intentional and less like a default template. just don't do this with lowercase text or it becomes unreadable ⭐