Tipografia

Se você não especificar estilos para o texto, os navegadores vão aplicar os próprios estilos padrão. Elas são chamadas de folhas de estilo do user agent e podem variar de navegador para navegador. Os usuários também podem definir as próprias preferências de exibição de texto.

Se você não especificar um comprimento de linha, os navegadores vão quebrar as linhas de texto na borda da tela. Por padrão, o texto na Web é responsivo, ou seja, ele flui para se ajustar à viewport do usuário.

Mas só porque o texto cabe na tela não significa que é confortável de ler. Uma boa tipografia tem a ver com apresentar seu texto de maneira apropriada. A tipografia é mais do que escolher fontes adequadas para usar. Você precisa considerar as preferências do usuário, o tamanho do texto, o comprimento da linha e a distância entre as linhas de texto.

Tamanho do texto

É difícil saber qual deve ser o tamanho do texto na Web.

Se alguém estiver usando uma tela pequena, pode ser seguro que a tela fique bem perto dos olhos, a uma mão de distância.

Mas, à medida que as telas ficam maiores, fica mais difícil fazer essa conexão. Uma tela do tamanho de um laptop provavelmente estará bem próxima do espectador, mas um monitor de área de trabalho widescreen tem aproximadamente o mesmo tamanho de uma tela de televisão. As pessoas ficam a um braço de distância da tela do computador, mas ficam muito mais longe da televisão.

Ainda assim, embora não seja possível saber com certeza a distância que uma pessoa está de uma tela, você pode tentar usar tamanhos de texto que provavelmente serão apropriados. Use tamanhos de texto menores para telas menores e tamanhos maiores para telas maiores.

É possível usar consultas de mídia para mudar a propriedade font-size conforme o tamanho da tela aumenta.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

Como redimensionar o texto

A alternância entre tamanhos de texto fixos em pontos de interrupção específicos é bastante irregular. Uma abordagem mais responsiva é permitir que a largura do dispositivo do usuário influencie o tamanho do texto.

A unidade vw no CSS significa "largura da janela de visualização". Conectar tamanhos de fonte à largura da janela de visualização significa que o texto vai aumentar e diminuir proporcionalmente à largura do navegador. Isso dificulta a previsão do tamanho do texto em qualquer largura específica, mas você sabe que o tamanho do texto será adequado à largura do navegador do usuário.

É importante não usar o vw sozinho em uma declaração de tamanho de fonte.

O que não fazer
html {
  font-size: 2.5vw;
}

Se você fizer isso, o usuário não poderá redimensionar o texto. O texto poderá ser redimensionado se você misturar uma unidade relativa, como em, rem ou ch. A função CSS calc() é perfeita para isso.

O que fazer
html {
  font-size: calc(0.75rem + 1.5vw);
}

Deixe o navegador fazer as contas. Isso dificulta a previsão do tamanho exato do texto em qualquer largura específica, mas você sabe que o tamanho do texto estará no intervalo correto. O navegador do usuário cuida dos cálculos exatos do tamanho do texto.

No entanto, agora há a possibilidade de o texto ficar muito pequeno em telas estreitas e muito grande em telas largas.

Texto de fixação

Provavelmente você não quer que o texto diminua e aumente para extremos. É possível controlar onde o escalonamento começa e termina usando a função CSS clamp(). Isso "limita" a escalação a um intervalo específico.

A função clamp() é como a função calc(), mas aceita três valores. O valor do meio é o mesmo que você transmite para calc(). O valor de abertura especifica o tamanho mínimo, neste caso, 1rem, para não ficar abaixo do tamanho de fonte preferido do usuário. O valor de fechamento especifica o tamanho máximo.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Agora o tamanho do texto diminui e aumenta proporcionalmente à tela do usuário, mas nunca fica abaixo de 1rem ou acima de 2rem.

Comprimento da linha

A Web não é impressão, mas podemos aprender lições do mundo da impressão e aplicá-las na Web.

No livro clássico Os elementos do estilo tipográfico, Robert Bringhurst disse o seguinte sobre o comprimento (ou medida) da linha:

Qualquer valor entre 45 e 75 caracteres é considerado um comprimento de linha satisfatório para uma página de coluna única com uma fonte de texto serifada em um tamanho de texto. A linha de 66 caracteres (contando letras e espaços) é considerada ideal. Para trabalhos com várias colunas, a média ideal é de 40 a 50 caracteres.

Não é possível definir um comprimento de linha diretamente no CSS. Não há propriedade line-length. No entanto, é possível impedir que o texto fique muito largo, limitando a largura do contêiner. A propriedade max-inline-size é perfeita para isso.

Não defina as linhas com uma unidade fixa, como px. Os usuários podem aumentar e diminuir o tamanho da fonte, e os comprimentos de linha precisam ser ajustados. Use uma unidade relativa, como rem ou ch.

O que não fazer
article {
  max-inline-size: 700px;
}
O que fazer
article {
  max-inline-size: 66ch;
}

O uso de unidades ch para largura fará com que as novas linhas sejam quebradas no 66o caractere com esse tamanho de fonte.

Altura da linha

Embora não haja uma propriedade line-length no CSS, há uma propriedade line-height.

Linhas de texto mais curtas podem ter valores de line-height maiores. No entanto, se você usar valores line-height grandes para linhas longas de texto, será difícil para o leitor passar do fim de uma linha para o início da próxima.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

Use valores sem unidade para suas declarações line-height. Isso garante que a altura da linha seja relativa ao font-size.

O que não fazer
line-height: 24px;
O que fazer
line-height: 1.5;

Combinações e escala

Lembre-se de priorizar a hierarquia ao criar interfaces de usuário para melhor clareza e fluxo da página. Uma ótima maneira de fazer isso é com uma escala de tipografia integrada ao seu sistema de design.

Fontes da Web

Uma família tipográfica é como uma voz para suas palavras. Por mais tempo na web, havia pouquíssimas opções de fonte. As fontes do sistema eram as únicas opções. No entanto, agora você pode escolher uma fonte da Web que combine com seu conteúdo.

Use @font-face para informar aos navegadores onde encontrar seus arquivos de fontes da Web. Use woff2 como formato de fonte da Web. Ele tem suporte e oferece os melhores ganhos de desempenho.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

No entanto, cada arquivo de fonte da Web adicionado pode prejudicar a experiência do usuário, porque aumenta o tempo de carregamento da página. Lembre-se de que o design não se trata apenas da aparência dos pixels finais. A rapidez com que esses pixels são pintados é uma parte essencial da experiência do usuário. Uma experiência que parece rápida é uma boa experiência do usuário.

Carregamento de fontes

É possível solicitar que os navegadores iniciem o download de um arquivo de fonte assim que possível. Adicione um elemento link ao head do documento que faz referência ao arquivo de fonte da Web. Um atributo rel com um valor de preload informa ao navegador que ele deve priorizar esse arquivo. Um atributo as com um valor de font informa ao navegador o tipo de arquivo. O atributo type permite que você seja ainda mais específico.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

É necessário incluir o atributo crossorigin mesmo que você mesmo esteja hospedando os arquivos de fontes.

Use a propriedade font-display do CSS para informar ao navegador como gerenciar a mudança de uma fonte do sistema para uma fonte da Web. Você pode optar por não mostrar nenhum texto até que a fonte da Web seja carregada. Você pode mostrar a fonte do sistema imediatamente e mudar para a fonte da Web quando ela for carregada. Ambas as estratégias têm desvantagens. Se você esperar até que o download da fonte da Web seja concluído antes de mostrar qualquer texto, os usuários poderão ficar encarando uma página em branco por muito tempo. Se você mostrar o texto em uma fonte do sistema primeiro e depois mudar para a fonte da Web, os usuários podem notar uma mudança brusca no conteúdo da página.

Um bom compromisso é esperar um pouco antes de mostrar qualquer texto. Se a fonte da Web for carregada antes desse tempo, o texto será exibido usando a fonte da Web sem mudanças de conteúdo. Se a fonte da Web ainda não tiver sido carregada após o tempo acabar, o texto será exibido usando a fonte do sistema para que o usuário possa ler o conteúdo.

Use um valor font-display de swap se você ainda quiser que a fonte da Web substitua a fonte do sistema sempre que a fonte da Web for carregada.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

Use um valor font-display de fallback se quiser manter a fonte do sistema depois que o texto for renderizado.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

Fontes variáveis

Se você estiver usando muitos pesos ou estilos diferentes do mesmo tipo de letra, poderá acabar usando muitos arquivos de fonte separados, um para cada peso ou estilo.

As fontes variáveis resolvem esse problema usando um arquivo. Em vez de ter arquivos separados para regular, negrito, extra negrito e assim por diante, um arquivo de fonte variável é responsivo. Ele contém todas as informações necessárias para serem exibidas em um espectro de pesos ou estilos.

A letra &quot;A&quot; mostrada em pesos diferentes.

Isso significa que um único arquivo de fonte variável é maior do que um único arquivo de fonte regular, mas um único arquivo de fonte variável provavelmente será menor do que vários arquivos de fonte regulares. Se você estiver usando muitos pesos diferentes, uma fonte variável pode melhorar muito a performance.

Uma boa tipografia na Web não se resume às escolhas de tipo que você faz como designer. A tipografia responsiva também respeita o dispositivo e a conexão de rede do usuário. O resultado final é um design que parece certo, não importa como ele é visualizado.

Agora que você já sabe tudo sobre texto responsivo, é hora de se aprofundar nas imagens responsivas.

Teste seu conhecimento

Teste seus conhecimentos sobre tipografia

É necessário adicionar estilos para que o texto seja quebrado dentro da viewport.

Verdadeiro
Não é necessário adicionar estilos.
Falso
O texto será ajustado por padrão sem estilos adicionais.

O clamp() é útil para tipografia fluida porque

Ele permite a incorporação fácil de funções calc()
Embora isso seja verdade, não é uma boa razão para usar clamp() para tipografia.
O suporte do navegador é ótimo.
Embora isso seja verdade, não é um bom motivo para usar clamp() para tipografia.
Ele permite bloquear o tamanho da fonte entre mínimos e máximos sensíveis, além de fornecer um valor médio escalonável.
Exatamente, evite textos muito pequenos ou muito grandes, além de fornecer um tamanho de fonte com dimensionamento suave.
Isso facilita as contas.
Tente novamente.

Que tipo de valor de line-height foi recomendado neste guia?

24px
A postagem diz explicitamente para não usar valores de pixel para line-height.
2rem
Embora os rems sejam valores relativos, eles ainda podem criar alturas de linha muito pequenas ou muito grandes.
1.5
Valores relativos sem unidade são recomendados.
2vw
As unidades de viewport como line-height seriam problemáticas.

O que font-display faz?

Informa ao navegador como gerenciar a troca de uma fonte do sistema para uma fonte da Web.
Ajuda na transição para uma fonte personalizada.
Permite definir a fonte como block ou inline-block.
As fontes não têm tipos de exibição.
Altera se a fonte está oculta ou não.
Não é possível ocultar fontes.
Fornece controle sobre a experiência do usuário ao carregar fontes remotas.
Ajuda os autores a personalizar a experiência de carregamento de fontes personalizadas.