Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode

Dark mode's impact on text legibility: A CSS solution using variable fonts

Dark mode, while aesthetically pleasing, often presents a challenge: text can appear heavier against dark backgrounds. This article explores solutions using CSS custom properties and variable fonts to address this issue, ensuring consistent text appearance across light and dark modes.

The problem is not an illusion; lighter characters genuinely appear bolder on darker backgrounds. This is easily observable when comparing light and dark mode text, and becomes even clearer when inverting the colors.

Solutions using Variable Fonts

Variable fonts offer a powerful solution. The ideal effect involves subtly thinning text in dark mode without altering character width. We can achieve this through several strategies:

1. Manually adjusting font-weight: This involves directly modifying font-weight values within a dark mode media query. While functional, it becomes cumbersome with many elements.

2. font-weight multiplier: A more elegant approach uses a CSS custom property (--font-weight-multiplier) to control the weight adjustment. This multiplier modifies each element's default font-weight in dark mode. For example, setting --font-weight-multiplier to 0.85 reduces the weight by 15%.

3. Universal selector and multiplier: This advanced technique leverages CSS variable scoping and the universal selector (*) to apply the multiplier calculation globally. This simplifies the CSS but requires careful consideration to avoid unintended effects on specific elements.

4. font-variation-settings and axis manipulation: Some variable fonts offer axes like "GRAD" (grade) or "DRKM" (dark mode) that directly control apparent weight without affecting character width. Roboto Flex utilizes "GRAD," while Dalton Maag's Darkmode font features the "DRKM" axis.

Strategy 1: font-weight manipulation

The simplest method is manually adjusting font-weight for each element in a dark mode media query. However, this becomes less manageable as the number of elements increases.

/* Default (light mode) CSS */
body { font-weight: 400; }
strong { font-weight: 700; }

/* Dark mode CSS */
@media (prefers-color-scheme: dark) {
  body { font-weight: 350; }
  strong { font-weight: 600; }
}

Strategy 2: font-weight multiplier with custom properties

Using a custom property (--font-weight-multiplier) provides a more maintainable solution.

/* DARK-MODE-SPECIFIC CUSTOM PROPERTIES */
@media (prefers-color-scheme: dark) {
  :root { --font-weight-multiplier: .85; }
}

/* DEFAULT CSS STYLES... */
body { font-weight: calc(400 * var(--font-weight-multiplier, 1)); }
strong { font-weight: calc(700 * var(--font-weight-multiplier, 1)); }

Strategy 3: Universal selector and multiplier

This approach applies the multiplier to all elements at once.

/* DEFAULT CUSTOM PROPERTIES */
:root { --font-weight: 400; --font-weight-multiplier: 1; }
strong { --font-weight: 700; }

/* DARK-MODE-SPECIFIC CUSTOM PROPERTIES */
@media (prefers-color-scheme: dark) {
  :root { --font-weight-multiplier: .85; }
}

/* APPLYING THE CUSTOM PROPERTIES... */
* { font-weight: calc(var(--font-weight, 400) * var(--font-weight-multiplier, 1)); }

Strategy 4: Axis manipulation with font-variation-settings

Fonts with "GRAD" or "DRKM" axes offer direct control over weight.

/* For Roboto Flex ("GRAD" axis) */
:root { --GRAD: 0; }
@media (prefers-color-scheme: dark) { :root { --GRAD: -.75; } }
body { font-variation-settings: "GRAD" var(--GRAD, 0); }

Additional Considerations

• High-resolution screens: The effect is less pronounced on retina displays. Adjust multipliers accordingly.
• Mixed fonts: Carefully consider the impact on fonts with different axes or non-variable fonts.
• Letter-spacing: Lowering font-weight can narrow characters. Adjust letter-spacing as needed.

By leveraging these techniques, developers can ensure consistent and legible text across light and dark modes, enhancing the overall user experience. A demo showcasing these strategies is available [link to demo].

The above is the detailed content of Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode. For more information, please follow other related articles on the PHP Chinese website!