/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!

been seeing way too many sites with blurry tiny captions lately. most people forget that browsers handle font smoothing differently depending on how you layer things. if you're working with a dark background and light text, the weight always looks thinner than it should. i always add this to my global css to keep everything looking crisp and even across different engines.

-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;

it's not magic but it stops that weird fuzzy look on macos. just don't use it on huge headers because it can make them look too thin. does anyone actually use font-smoothing properties anymore or is it just a habit?

i've been seeing so much noise lately where people are layering grainy textures over solid hex colors just to make them feel less sterile, but it's starting to look like digital dust and actually makes the text harder to read for anyone with visual impairments.
>it adds organic depth and warmth

but honestly, i'm worried we're sacrificing accessibility just for a certain aesthetic vibe. does the grain ever get too distracting when you're trying to focus on the actual content?

the black ink on that cream paper stock looks so sharp. i wonder if those heavy line weights would actually hold up if we tried to scale them down for something like a small mobile app icon.

https://abduzeedo.com/address-338-architecture-studio-branding-and-visual-system/

trying to match the x-height of my italic running text to the roman uprights but it's driving me insane. i'm using a variable font where the optical size axis should handle the weight shifts, but the italic glyphs look way too spindly and thin compared to the roman capitals. it's like the designers forgot that italics need a bit more presence when they're sitting next to heavy-duty romans in a long block of text. i tried manually bumping the weight axis up by about 50 units, but then the strokes get all weird and thick where they shouldn't be. now it just looks like a printing error i also messed with the weight and width axes together to try and beef them up, but the kerning is totally trashed now. everything looks bloated and it's ruining the whole hierarchy of the page. has anyone figured out a way to lock the x-height visually without destroying the delicate stroke transitions? i've been staring at this paragraph for two hours and it's starting to look like garbage.

been messing with some newer weights lately and the default leading is such a mess. it's fine for standard static files but once you start tweaking weight via css interpolation things get weird fast. i tried a test where i locked the line height to a fixed pixel value regardless of the font-weight change. looks garbage on the heavier stems. the text just feels crushed and loses all that nice breathing room. always use relative units when you're playing with variable axes or you'll regret it during a client review. i'm trying an experiment this week to see if there's a sweet spot for a mathematical formula using cap height as the base. might try something like 1.4em + (weight * 0.001). probably overcomplicating it but standard defaults aren't cutting it for the high-contrast stuff i'm working on right now. just want to see if we can automate a decent baseline without manual overrides on every single class.

saw that video by juxtaposed earlier and it's honestly depressing that it isn't an actual official project. seeing someone put that much brainpower into fixing a player that hasn't changed in 25 years makes the current ui look even more ancient. i don't care if it's not real, the way they handled the interface changes is exactly what we need. it's such a waste to see good design work just sitting there as a concept video. i can't imagine how hard it would be to actually implement any of this without breaking all the legacy codecs though. do you think anyone at videolan even looks at these kinds of redesigns?

article: https://blog.master.dev/i-redesigned-vlc-after-25-years/

Someone's really out here using standard letter spacing for tiny all-caps labels. It looks so sloppy when the characters are drifting apart like that. it's literally just a one or two percent negative tracking adjustment and it fixes everything.

saw this concept for the montreal jazz fest earlier. using touchdesigner to generate trumpet forms based on sound waves sounds cool in theory but i'd be worried about the load. that node-based approach for banners and transit posters seems like a nightmare to keep consistent across so many different physical assets. the idea of infinite variations is fine for a digital screen but managing all those different outputs for things like enamel keychains or woven wristbands sounds like a tracking disaster. it's basically just using generative patterns to hide a lack of fixed brand guidelines. that tall condensed font they used looks okay enough for a display face, and the hand-drawn lettering helps with the jazz vibe. but i don't see how you maintain any actual brand recognition if no two touchpoints look the same. it's all fun until someone asks for an exact hex code match on a print run and you can't find it in the procedural mess. seems like more of a motion graphics flex than a real scalable system.

link: https://abduzeedo.com/visual-identity-montreal-jazz-festival-concept/

i've been using this trick to stop those grain overlays from looking like cheap garbage on top of images. just slap a semi-transparent color over your noise pattern in the css to match the site's theme.

.grain {background-color: rgba(20, 20, 25, 0.15);mix-blend-mode: multiply;}

what color are you guys using for the grain on dark mode?