Tipografia

Se você não especificar estilos para o texto, os navegadores vão aplicar os estilos padrão. Eles são chamados de folhas de estilo do agente do usuário e podem variar de navegador para navegador. Os usuários também podem definir as próprias preferências para exibir o texto.

Se você não especificar um comprimento de linha, os navegadores vão quebrar as linhas de texto na borda da tela. Portanto, o texto na Web é responsivo por padrão: ele se ajusta à janela de visualização do usuário.

Mas só porque o texto cabe em uma tela não significa que ele seja confortável de ler. Uma boa tipografia é apresentar o texto de maneira adequada. A tipografia não se resume a escolher fontes adequadas. É necessário 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, é provável que ela esteja bem perto dos olhos, a uma distância de uma mão.

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

Mesmo que você não possa saber com certeza a distância de alguém de uma tela, tente usar tamanhos de texto que provavelmente serão adequados. Use tamanhos de texto menores para telas menores e tamanhos de texto maiores para telas maiores.

Você pode usar consultas de mídia para mudar a propriedade font-size à medida que 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%;
  }
}

Escalonamento de texto

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

A unidade vw em 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 para a largura do navegador do usuário.

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

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 calc() do CSS é perfeita para isso.

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

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

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

Fixação de texto

Provavelmente, você não quer que o texto diminua e aumente até extremos. Você pode controlar onde o escalonamento começa e termina usando a função clamp() do CSS. Isso "fixa" o escalonamento em um intervalo específico.

A função clamp() é como a função calc(), mas ela usa três valores. O valor do meio é o mesmo que você transmite para calc(). O valor de abertura especifica o tamanho mínimo, nesse caso, 1 rem, 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 será menor que 1rem ou maior que 2rem.

Comprimento da linha

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

No livro clássico The Elements of Typographic Style, Robert Bringhurst disse o seguinte sobre o comprimento da linha (ou medida):

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

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

Não defina os comprimentos de linha 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 de acordo. Use uma unidade relativa, como rem ou ch.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

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

Altura da linha

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

Linhas de texto mais curtas podem ter valores line-height maiores. Mas, se você usar valores line-height grandes para linhas de texto longas, será difícil para o leitor mover o olho do final 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 as declarações line-height. Isso garante que a altura da linha seja relativa ao font-size.

line-height: 24px;

line-height: 1.5;

Combinações e escala

Priorize a hierarquia ao criar interfaces do usuário para maior clareza e fluxo de páginas. Uma ótima maneira de fazer isso é com uma escala de tipografia integrada ao sistema de design.

Fontes da Web

Uma fonte é como uma voz para suas palavras. Por muito tempo, havia pouquíssimas opções de fontes na Web. As fontes do sistema eram as únicas opções. Mas agora você pode escolher uma fonte da Web que corresponda à sensação do seu conteúdo.

Use @font-face para informar aos navegadores onde encontrar os arquivos de fontes da Web. Use woff2 como formato de fonte da Web. Ele é bem compatível e tem os melhores ganhos de desempenho.

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

Mas cada arquivo de fonte da Web que você adicionar pode degradar a experiência do usuário, já que aumenta o tempo de carregamento da página. Lembre-se de que o design não é apenas a aparência dos pixels finais. A velocidade com que esses pixels são pintados é uma parte essencial da experiência do usuário. Uma experiência rápida é uma boa experiência do usuário.

Carregamento de fontes

Você pode solicitar que os navegadores comecem a fazer o download de um arquivo de fonte o mais rápido possível. Adicione um elemento link ao head do documento que faça referência ao arquivo de fonte da Web. Um atributo rel com um valor de preload informa ao navegador para priorizar esse arquivo. Um atributo as com um valor de font informa ao navegador que tipo de arquivo é esse. 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ê esteja hospedando os arquivos de fonte.

Use a propriedade font-display do CSS para informar ao navegador como gerenciar a troca 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 optar por mostrar a fonte do sistema imediatamente e, em seguida, mudar para a fonte da Web quando ela for carregada. As duas estratégias têm desvantagens. Se você esperar até que a fonte da Web seja baixada antes de mostrar qualquer texto, os usuários poderão ficar olhando para uma página em branco por um tempo frustrantemente longo. Se você mostrar o texto em uma fonte do sistema primeiro e depois mudar para a fonte da Web, os usuários poderão ter uma mudança de conteúdo na 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á mostrado 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, o texto será mostrado usando a fonte do sistema para que o usuário possa ler o conteúdo.

Use um valor font-display de swap se 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 da mesma fonte, poderá acabar usando muitos arquivos de fonte separados, um arquivo de fonte separado 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 outras variantes, um arquivo de fonte variável é responsivo. Ele contém todas as informações necessárias para ser mostrado em um espectro de pesos ou estilos.

Isso significa que um único arquivo de fonte variável é maior que um único arquivo de fonte normal, mas um único arquivo de fonte variável provavelmente será menor que vários arquivos de fonte normal. Se você estiver usando muitos pesos diferentes, uma fonte variável poderá oferecer um grande ganho de desempenho.

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 esteja sendo visualizado.

Agora que você já aprendeu sobre texto responsivo, é hora de mergulhar em imagens responsivas.

Teste seu conhecimento

Teste seus conhecimentos sobre tipografia