Post #1527837

2025-12-04 13:51 UTC

This post teaches you how to account for this and adjust perceived font weight for dark mode without layout shift, with variable fonts and the GRAD axis. https://nerdy.dev/adjust-perceived-typepace-weight-for-dark-mode-without-layout-shift

Replies (3)

@mwichary@mastodon.online 2025-12-04 14:16

@tobestobs I have issues with this article. It simplifies the issue to suggest text needs to be graded less in dark mode, but it’s more complicated (see example where the bold is less visible in dark mode compared to light mode). It also moves on from dark mode to layout shifts kind of midway through, but maybe most importantly, it suggests you can account for accessibility contrast preferences with GRAD alone. I don’t think this is true? GRAD doesn’t give you THAT much contrast range after all.

Open ##1822565
@DABerlow@typo.social 2025-12-04 19:07

@tobestobs

Open ##1822579
@jlarmstrongiv@typo.social 2025-12-05 07:09

@tobestobs I really like how GRAD allows for such fine-grained control over rendering and the perceived thickness! Other css properties like `font-smoothing` and `text-rendering` can affect the font rendering too. Oh, and setting `font-synthesis` to `none` is nice, too.

Open ##1822580