Como adaptar a tipografia às preferências do usuário com CSS

Um método para adaptar uma fonte às preferências dos usuários para que eles se sintam confortáveis ao ler o conteúdo.

Adam Argyle

Trazer o usuário para o processo de design tem sido uma experiência incrível para usuários, designers e desenvolvedores. Os usuários podem acessar sua experiência e começar a consumir conteúdo de forma simples, com as preferências deles integradas ao resultado do design.

Esta postagem de blog aborda o uso de consultas de mídia CSS com uma fonte variável para personalizar ainda mais a experiência de leitura. O nível e o peso da fonte podem ser personalizados com font-variation-settings, permitindo a microajuste de várias preferências e contextos, como uma preferência por modo escuro ou alto contraste. Podemos pegar essas preferências e personalizar uma fonte variável para essa experiência do usuário.

• O modo escuro tem uma gradação ligeiramente reduzida.
• O alto contraste tem uma fonte mais escura.
• O contraste baixo tem uma fonte mais fina.

https://codepen.io/argyleink/pen/mdQrqvj

Acompanhe para entender cada parte do CSS e da fonte variável que possibilita esse momento significativo.

Como configurar

Para ajudar a se concentrar nos valores de configuração de variação de fonte e CSS, mas também fornecer algo para ler e conferir, esta é a marcação que você pode usar para visualizar o trabalho:

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

Sem a adição de CSS, o tamanho da fonte já é adaptável às preferências do usuário. Aqui está um vídeo de outra demonstração mostrando como a configuração de font-size em pixels elimina as preferências do usuário e por que você precisa definir o tamanho da fonte em rems:

Por fim, para centralizar e apoiar a demonstração, um pouco de CSS:

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

  h1 {
    text-wrap: balance;
  }
}

Essa configuração de demonstração permite que você comece a testar e implementar esse recurso de UX de tipografia perfeito.

Como carregar a fonte variável Roboto Flex

A estratégia adaptativa depende de uma fonte variável com eixos significativos para personalização. Especificamente, você precisa de GRAD e wght. As preferências do usuário adaptativo alvo neste artigo são para esquema de cores e contraste, que personalizam esses eixos para corresponder à preferência desejada do usuário.

Observação: uma fonte variável não é necessária para alcançar essa experiência do usuário que corresponde às preferências. No entanto, o uso de uma fonte variável alcança o efeito sem carregar vários pesos ou versões de uma fonte. Consulte esta demonstração para conferir um exemplo dessa UX sem dependência de uma fonte variável.

Carregue a fonte variável usando a API @font-face do CSS:

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

Em seguida, aplique a fonte a algum conteúdo. O CSS a seguir aplica isso a tudo:

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

Propriedades personalizadas do CSS e consultas de mídia para a vitória

Com a fonte carregada, você pode consultar as preferências do usuário e adaptar as configurações de fontes variáveis para corresponder.

Observação: se você precisar revisar alguns desses estilos, confira o módulo Aprender CSS sobre consultas de mídia ou esta postagem sobre como criar um esquema de cores adaptável com propriedades personalizadas.

Configurações quando não há preferências (padrão)

Os estilos iniciais a seguir serão os estilos padrão, ou, de outra forma, os estilos para usuários sem preferências.

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

Configurações quando a preferência é de alto contraste

Para usuários que indicaram preferência por alto contraste nas configurações do sistema, aumente o valor de --base-weight de 400 para 700:

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

Agora há mais contraste durante a leitura.

Configurações quando a preferência é de contraste baixo

Para usuários que indicaram preferência por baixo contraste nas configurações do sistema, diminua o valor de --base-weight de 400 para 200:

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

Agora há menos contraste durante a leitura.

Configurações quando a preferência é o modo escuro

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

Agora as diferenças perceptivas de claro sobre escuro e escuro sobre claro foram consideradas.

Todos juntos

@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;
    }
  }
}

Ou, para se divertir, todos juntos com anilhamento de CSS:

@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 }
  }
}

O resultado é uma experiência de leitura que adapta a fonte para corresponder às preferências do usuário. O código-fonte completo está disponível abaixo no Codepen.