Adapting typography to user preferences with CSS
Published: 2023-08-20 17:14:02

---
title: Adapting typography to user preferences with CSS
published: true
date: 2023-07-27 00:00:00 UTC
tags: 
canonical_url: https://web.dev/adapting-typography-to-user-preferences-with-css/
---

Bringing the user into the design process has been an exciting time for users, designers and developers. Users can land on your experience and seamlessly begin consuming content, their preferences richly integrated into the design result.

This blog post explores using CSS media queries with a variable font to tailor the reading experience even further. Font grade and weight can be customized with `font-variation-settings`, allowing microtuning given various preferences and contexts, like a preference for dark mode or high contrast. We can take these preferences and tailor a variable font for that user experience.

- Dark mode gets a slightly reduced gradation.
- High contrast gets a bolder font.
- Low contrast gets a thinner font.

<video autoplay="" controls="" loop="" muted=""> <source src="https://storage.googleapis.com/web-dev-uploads/video/vS06HQ1YTsbMKSFTIPl2iogUQP73/cgGryLwncKVnBUQ8iQOF.mp4" type="video/mp4"></source> </video>
_https://codepen.io/argyleink/pen/mdQrqvj_

Follow along to understand each portion of the CSS and variable font that enable this meaningful moment!

## Getting setup [#](https://web.dev/adapting-typography-to-user-preferences-with-css/#getting-setup)

To help focus on the CSS and font variation setting values, but also give us something to read and see, here's the markup you can use to preview the work:

```
<h1>Variable font weight based on contrast preference</h1><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo labore aliquid ex, dicta corporis.</p>
```

Without adding any CSS, the font size is already adaptive to user preferences. Here's a video from another demo showing how setting `font-size` in pixels will squash any user preferences, and why you should set your font size in rems:

<video autoplay="" controls="" loop="" muted=""> <source src="https://storage.googleapis.com/web-dev-uploads/video/vS06HQ1YTsbMKSFTIPl2iogUQP73/8mxSKsYmv6K7zoqDor0F.mp4" type="video/mp4"></source> </video>

Lastly, to center and support the demo, a little CSS:

```
@layer demo.support { body { display: grid; place-content: center; padding: var(--size-5); gap: var(--size-5); } h1 { text-wrap: balance; }}
```

 ![A screenshot preview of the demo so far, in both dark and light themes.](https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format)

This demo setup lets you begin testing and implementing this neat typography UX feature.

## Loading the Roboto Flex variable font [#](https://web.dev/adapting-typography-to-user-preferences-with-css/#loading-the-roboto-flex-variable-font)

The adaptive strategy depends on a variable font with meaningful axes for customization, specifically you need `GRAD` and `wght`. The target adaptive user preferences in this article are for color scheme and contrast, both of which will tailor these axes to match the user's desired preference.

<aside><div> A variable font is not required to achieve this user experience that matches preferences, however, using one achieves the effect without loading multiple weights or versions of a font. See <a href="https://codepen.io/web-dot-dev/pen/zYMmevQ">this demo</a> for an example of this UX without a dependency on a variable font. </div></aside>

Load the variable font using the `@font-face` API of CSS:

```
@font-face { font-family: "Roboto Flex"; src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');}
```

Next, apply the font to some content. The following CSS applies it to everything:

```
@layer demo.support { body { font-family: Roboto Flex; }}
```

 ![A screenshot preview of the demo so far, with the font now in Roboto Flex in both dark and light themes.](https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format)
## CSS custom properties and media queries for the win [#](https://web.dev/adapting-typography-to-user-preferences-with-css/#css-custom-properties-and-media-queries-for-the-win)

With the font loaded, you can query for user preferences and adapt the variable font settings to match.

<aside><div> If you need a review on some of these styles, check out the <a href="https://web.dev/learn/css/">Learn CSS</a> module on <a href="https://web.dev/learn/design/media-queries/">media queries</a> or this post on <a href="https://web.dev/building-a-color-scheme/">building an adaptive color scheme with custom properties</a>. </div></aside>
### Settings when there's no preferences (default) [#](https://web.dev/adapting-typography-to-user-preferences-with-css/#settings-when-theres-no-preferences-default)

The following initial styles will be the default styles, or another way to look at it, the styles for users without any preferences.

```
@layer demo { body { --base-weight: 400; --base-grade: 0; font-variation-settings: "wght" var(--base-weight), "GRAD" var(--base-grade) ; }}
```

### Settings when the preference is for high contrast [#](https://web.dev/adapting-typography-to-user-preferences-with-css/#settings-when-the-preference-is-for-high-contrast)

For users who have indicated a preference for high contrast in their system settings, increase the `--base-weight` value from `400` to `700`:

```
@layer demo { @media (prefers-contrast: more) { body { --base-weight: 700; } }}
```

Now there's more contrast while reading.

### Settings when the preference is for low contrast [#](https://web.dev/adapting-typography-to-user-preferences-with-css/#settings-when-the-preference-is-for-low-contrast)

For users who have indicated a preference for low contrast in their system settings, decrease the `--base-weight` value from `400` to `200`:

```
@layer demo { @media (prefers-contrast: less) { body { --base-weight: 200; } }}
```

Now there's less contrast while reading.

### Settings when the preference is for dark mode [#](https://web.dev/adapting-typography-to-user-preferences-with-css/#settings-when-the-preference-is-for-dark-mode)

```
@layer demo { @media (prefers-color-scheme: dark) { body { --base-grade: -25; } }}
```

Now the perceptual differences of light on dark vs dark on light have been accounted for.

### All together now [#](https://web.dev/adapting-typography-to-user-preferences-with-css/#all-together-now)

```
@layer demo { body { --base-weight: 400; --base-grade: 0; font-variation-settings: "wght" var(--base-weight), "GRAD" var(--base-grade) ; } @media (prefers-contrast: more) { body { --base-weight: 700; } } @media (prefers-contrast: less) { body { --base-weight: 200; } } @media (prefers-color-scheme: dark) { body { --base-grade: -25; } }}
```

Or, for fun, all together with [CSS nesting](https://developer.chrome.com/articles/css-nesting/):

```
@layer demo { body { --base-weight: 400; --base-grade: 0; font-variation-settings: "wght" var(--base-weight), "GRAD" var(--base-grade) ; @media (prefers-contrast: more) { --base-weight: 700 } @media (prefers-contrast: less) { --base-weight: 200 } @media (prefers-color-scheme: dark) { --base-grade: -25 } }}
```

The result is a reading experience that adapts the font to match the user's preferences. Full source code is available below in the Codepen.

<iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/rNQZMzo?height=500&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen rNQZMzo by web-dot-dev on Codepen">See the Pen <a href="https://codepen.io/web-dot-dev/embed/rNQZMzo">Pen rNQZMzo by web-dot-dev on Codepen</a></iframe>