Adapting typography to consumer preferences with CSS


Bringing the consumer into the design course of has been an thrilling time for customers, designers and builders. Customers can land in your expertise and seamlessly start consuming content material, their preferences richly built-in into the design consequence.

This weblog publish explores utilizing CSS media queries with a variable font to tailor the studying expertise even additional. Font grade and weight may be custom-made with font-variation-settings, permitting microtuning given varied preferences and contexts, like a choice for darkish mode or excessive distinction. We will take these preferences and tailor a variable font for that consumer expertise.

  • Darkish mode will get a barely decreased gradation.
  • Excessive distinction will get a bolder font.
  • Low distinction will get a thinner font.

Observe alongside to grasp every portion of the CSS and variable font that allow this significant second!

Getting setup #

To assist concentrate on the CSS and font variation setting values, but additionally give us one thing to learn and see, here is the markup you should utilize to preview the work:

<h1>Variable font weight primarily based on distinction choice&LT/h1>

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
itaque nisi nam, cupiditate dolorum advert sint. Soluta nemo
labore aliquid ex, dicta corporis.

With out including any CSS, the font dimension is already adaptive to consumer preferences. Here is a video from one other demo exhibiting how setting font-size in pixels will squash any consumer preferences, and why you must set your font dimension in rems:

Lastly, to heart and help the demo, a bit CSS:

@layer {
physique {
show: grid;
place-content: heart;
padding: var(--size-5);
hole: var(--size-5);

h1 {
text-wrap: steadiness;

A screenshot preview of the demo so far, in both dark and light themes.

This demo setup enables you to start testing and implementing this neat typography UX function.

Loading the Roboto Flex variable font #

The adaptive technique is determined by a variable font with significant axes for personalization, particularly you want GRAD and wght. The goal adaptive consumer preferences on this article are for shade scheme and distinction, each of which can tailor these axes to match the consumer’s desired choice.

Load the variable font utilizing the @font-face API of CSS:

@font-face {
font-family: "Roboto Flex";
src: url('') format('truetype');

Subsequent, apply the font to some content material. The next CSS applies it to every part:

@layer {
physique {
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.

With the font loaded, you may question for consumer preferences and adapt the variable font settings to match.


Please enter your comment!
Please enter your name here