Tipografia

Se você não especificar um estilo 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 ajustarão as linhas de texto na borda da tela. Assim, na Web, o texto é responsivo por padrão, ou seja, ele flui para se ajustar à janela de visualização do usuário.

No entanto, só porque o texto cabe na tela não significa que a leitura é confortável. Uma boa tipografia tem a ver com apresentar seu texto de maneira apropriada. Há mais na tipografia do que escolher fontes adequadas. 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 cada vez maiores, é mais difícil fazer essa conexão. Uma tela do tamanho de um laptop provavelmente será bem próxima do espectador, mas um monitor de desktop 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 de texto 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%;
  }
}

Dimensionamento de texto

Alternar entre tamanhos de texto fixos em pontos de interrupção específicos é bastante trabalhoso. 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 ao largura da janela de visualização significa que o texto aumentará e diminuirá proporcionalmente à largura do navegador. Isso dificulta prever qual será o tamanho do texto em qualquer largura específica, mas você sabe que o tamanho do texto será apropriado para a largura do navegador do usuário.

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

html {
  font-size: 2.5vw;
}

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

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

Deixe o navegador fazer as contas. Isso dificulta prever exatamente qual será o tamanho do texto em qualquer largura específica, mas você sabe que o tamanho do texto estará no intervalo correto. O navegador do usuário realiza os cálculos exatos do tamanho do texto.

Mas agora é possível que o texto fique muito pequeno em telas estreitas e muito grande em telas amplas.

Fixando texto

Você provavelmente não quer que o texto seja encolhido e crescido até os extremos. É possível controlar onde o escalonamento começa e termina usando a função CSS clamp(). Isso "limita" o escalonamento 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 de acordo com a tela do usuário, mas nunca fica abaixo de 1rem ou acima de 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 fala sobre o comprimento da linha (ou medida):

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

Não é possível definir um comprimento de linha diretamente no CSS. Não há propriedades line-length. No entanto, você pode limitar a largura do contêiner para impedir que o texto fique muito largo. 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. 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 as novas linhas sejam quebradas no 66o caractere com esse tamanho de fonte.

Altura da linha

Não existe uma propriedade line-length no CSS, mas existe 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 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 suas 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

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 um bom 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, aumentando o tempo de carregamento da página. Lembre-se, o design não é apenas sobre a 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 fonte

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 à head do documento que faça referência ao arquivo de fontes da Web. Um atributo rel com um valor de preload instrui o navegador a 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 CSS font-display para informar ao navegador como gerenciar a transição de uma fonte do sistema para uma 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, quando ela carregar, mudar para a fonte da Web. Ambas as estratégias têm suas 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 talvez percebam uma mudança desagradável de conteúdo na página.

Um bom meio-termo é esperar um pouco antes de exibir qualquer texto. Se a fonte da Web for carregada antes desse tempo acabar, o texto será exibido usando essa fonte sem mudanças no conteúdo. Se a fonte da Web ainda não tiver sido carregada depois que o tempo se esgotar, o texto será exibido usando a fonte do sistema para que pelo menos 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 finalmente 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 usar muitos pesos ou estilos diferentes da mesma família tipográfica, você poderá acabar usando muitos arquivos de fontes separados, ou seja, 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, negrito extra e assim por diante, um arquivo de fonte variável é responsivo. Ele contém todas as informações necessárias para exibição em um espectro de pesos ou estilos.

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

Uma boa tipografia na Web não se trata apenas das escolhas de tipografia que você faz como designer. A tipografia responsiva também tem a ver com respeitar o dispositivo do usuário e a conexão de rede. O resultado final é um design que parece bem, não importa como está sendo visto.

Agora que você está craque no uso de texto responsivo, é hora de conhecer as imagens responsivas.

Teste seu conhecimento

Teste seus conhecimentos sobre tipografia