Tipografia

Se você não especificar nenhum estilo para o texto, os navegadores aplicarão os próprios estilos padrão. Elas são chamadas de folhas de estilo do user agent e podem variar de acordo com o navegador. Os usuários também podem definir as próprias preferências de 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 e flui para se ajustar à janela de visualização do usuário.

Mas só porque o texto cabe na tela não significa que ele é confortável de ler. Uma boa tipografia envolve apresentar seu texto de maneira apropriada. Há mais na tipografia 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 deveria ser o tamanho do texto na Web.

Se alguém estiver usando uma tela pequena, pode ser aposta segura que a tela estará bastante perto dos olhos a uma mão de distância.

No entanto, à medida que as telas ficam cada vez maiores, é mais difícil estabelecer essa conexão. Uma tela do tamanho de um laptop provavelmente estará bem próxima do espectador, mas um monitor de desktop com tela ampla tem aproximadamente o mesmo tamanho que uma tela de televisão. As pessoas ficam a um braço de distância da tela do computador, mas muito mais longe da televisão.

Ainda assim, embora não seja possível saber com certeza a distância entre uma pessoa e uma tela, você pode tentar usar tamanhos de texto adequados. 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 à medida que o tamanho da tela fica maior.

@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 é bem agitado. 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 os tamanhos da 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 que você não use o vw sozinho em uma declaração de tamanho de fonte.

html {
  font-size: 2.5vw;
}

Se você fizer isso, o usuário não poderá 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 a previsão exata do tamanho do texto em uma largura específica, mas você sabe que o tamanho do texto vai estar no intervalo certo. O navegador do usuário se encarrega de descobrir os cálculos exatos de tamanho de texto.

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

Texto de fixação

É provável que você não queira que o texto seja reduzido e cresça ao extremo. É possível controlar onde o escalonamento começa e termina usando a função CSS clamp(). Isso "fixa" o dimensionamento a um intervalo específico.

A função clamp() é como a função calc(), mas requer 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 nem acima de 2rem.

Comprimento de linha

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

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

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

Não é possível definir o comprimento de uma linha diretamente no CSS. Não há uma propriedade line-length. No entanto, você pode evitar 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 o comprimento da linha deve se ajustar conforme necessário. 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 vai fazer com que as novas linhas sejam unidas no 66o caractere com esse tamanho de fonte.

Altura da linha

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

Linhas de texto mais curtas podem ter valores line-height maiores. No entanto, se você usar valores line-height grandes para linhas de texto longas, o olho do leitor terá dificuldade para ir do final de uma linha para o início da linha seguinte.

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

Lembre-se de priorizar a hierarquia à medida que você cria suas interfaces de usuário para melhor clareza e fluxo de página. Uma ótima maneira de fazer isso é com uma escala de tipografia integrada no seu sistema de design.

Fontes da Web

Uma família tipográfica é como uma voz para suas palavras. Por mais tempo na Web, havia poucas opções de fontes. As fontes do sistema eram as únicas opções. No entanto, agora você pode escolher uma fonte da Web que combine com o estilo do 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. Ela é bem suportada 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;
}

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, o design não se trata apenas da 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 fonte

Você pode solicitar que os navegadores iniciem 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 fonte da Web. Um atributo rel com o valor preload instrui o navegador a priorizar esse arquivo. Um atributo as com valor font informa ao navegador qual é 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ê hospede os arquivos de fonte.

Use a propriedade CSS font-display para informar ao navegador como gerenciar a alternância 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 exibir a fonte do sistema imediatamente e alternar para a fonte da Web assim que 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 podem acabar encarando uma página em branco por muito tempo. Se você mostrar o texto primeiro em uma fonte do sistema e depois mudar para a fonte da Web, os usuários poderão notar uma mudança drástica do conteúdo na página.

Um bom ajuste é aguardar um pouco antes de exibir qualquer texto. Se a fonte da Web for carregada antes desse período, o texto será exibido usando a fonte da Web sem mudanças de conteúdo. Se a fonte da Web ainda não for carregada depois desse tempo, 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 você ainda quiser que a fonte da Web substitua a fonte do sistema sempre que ela 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 família tipográfica, 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 único 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 ser mostrada em um espectro de pesos ou estilos.

Isso significa que um único arquivo de fonte variável é maior do que um arquivo de fonte comum, mas um único arquivo de fonte variável provavelmente será menor do que vários arquivos de fonte normais. Se você estiver usando muitos pesos diferentes, uma fonte variável pode proporcionar 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 envolve respeitar o dispositivo e a conexão de rede do usuário. O resultado final é um design que parece certo, não importa como ele seja visto.

Agora que você já domina o texto responsivo, é hora de aprender sobre as imagens responsivas.

Teste seu conhecimento

Teste seus conhecimentos sobre tipografia