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

um método para adaptar uma fonte às preferências, para que eles sintam-se ao máximo ao ler seu conteúdo.

Adam Argyle

Trazer o usuário para o processo de design tem sido um momento empolgante para eles, designers e desenvolvedores. Os usuários podem acessar sua experiência e começar ao consumir conteúdo, as preferências dele são integradas ao resultado do design.

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

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

Acompanhe para entender cada parte da fonte CSS e variável que permitem neste momento importante.

Configuração

Para ajudar a se concentrar nos valores de configuração de variação de fonte e CSS, mas também nos algo para ler e ver, aqui está 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 adicionar 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 definir font-size em pixels igualar as preferências do usuário, e por que você deve definir o tamanho da fonte em rems:

Por fim, para centralizar e oferecer suporte à 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;
  }
}

Com essa configuração de demonstração, você pode começar a testar e implementar essa UX de tipografia legal .

Como carregar a fonte da variável Roboto Flex

A estratégia adaptável depende de uma fonte variável com eixos significativos para personalização, mais especificamente GRAD e wght. O usuário adaptável de destino as preferências deste artigo são para esquema de cores e contraste, sendo que ambos personalizará esses eixos para corresponder à preferência desejada do usuário.

Carregue a fonte da 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 o aplica tudo:

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

Propriedades personalizadas de CSS e consultas de mídia para vencer

Com a fonte carregada, é possível consultar as preferências do usuário e adaptar a variável configurações de fonte correspondentes.

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

Os estilos iniciais a seguir serão os estilos padrão, ou outra maneira de 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 quando a preferência é por alto contraste

Para usuários que indicaram preferência pelo alto contraste no sistema configurações, 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 quando a preferência é o baixo contraste

Para usuários que indicaram preferência por baixo contraste no sistema de configuração, 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 for pelo modo escuro

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

As diferenças perceptivas entre luz no escuro e escuro na luz têm sido considerados.

Todos em um só lugar

@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, com o aninhamento 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 ao estilo preferências. O código-fonte completo está disponível abaixo no Codepen.