Texto e tipografia

The CSS Podcast - 036: Text & Typography

O texto é um dos elementos básicos da Web.

Ao criar um site, não é necessário estilizar o texto. O HTML tem um estilo padrão bastante razoável.

No entanto, o texto provavelmente vai compor a maior parte do seu site. Por isso, vale a pena adicionar um pouco de estilo para dar um toque especial. Ao mudar algumas propriedades básicas, você pode melhorar significativamente a experiência de leitura dos usuários.

Neste módulo, vamos começar com a regra @font-face, que permite importar fontes personalizadas para suas páginas da Web. Isso garante que você tenha a tipografia exata de que precisa, independente das fontes instaladas pelo usuário.

Depois disso, vamos abordar propriedades essenciais de fontes CSS, incluindo font-family, font-style, font-weight e font-size. Esses conceitos básicos preparam o terreno para manipular o texto em termos de estilo e legibilidade.

Também vamos abordar propriedades específicas de parágrafos, como text-indent e word-spacing, antes de concluir com temas avançados, como fontes variáveis e pseudoelementos, que refinam ainda mais seu controle tipográfico.

Exemplos práticos e dicas serão fornecidos ao longo do curso para consolidar seu entendimento e aplicação dessas técnicas de CSS.

A regra @font-face

A regra @ @font-face do CSS é fundamental no web design, permitindo especificar e usar fontes personalizadas para mostrar texto. A beleza do @font-face está na versatilidade: ele permite buscar fontes de um servidor remoto ou de uma fonte instalada no dispositivo do usuário.

Sintaxe

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Descritores

ascent-override
Personaliza a métrica de ascensão, afetando o espaço acima da linha de base.
descent-override
Ajusta a métrica de descida, afetando o espaço abaixo da linha de base.
font-display
Controla o comportamento de exibição da fonte dependendo do status do download.
font-family
Nomeia a fonte para uso em propriedades relacionadas a fontes.
font-stretch
Define o escalonamento horizontal aceitável, especificado como um único valor ou intervalo.
font-style
Define o estilo da fonte, com suporte a intervalos de ângulos para estilos oblíquos.
font-weight
Determina a espessura da fonte ou o intervalo de espessuras disponíveis.
font-feature-settings
Permite o acesso aos recursos de fontes OpenType.
font-variation-settings
Fornece controle detalhado sobre as configurações de fontes variáveis.
line-gap-override
Substitui o espaçamento entre linhas padrão da fonte.
size-adjust
Aplica um fator de escalonamento ao contorno e às métricas da fonte.
src
Define a origem da fonte, seja local ou remota. Isso é necessário para a regra @font-face. Combinar url() e local() no src é uma estratégia comum que usa uma fonte local, se disponível, e volta para um arquivo de fonte remota como substituto. Os navegadores priorizam os recursos com base na ordem de declaração. Portanto, local() geralmente precede url().
unicode-range
Limita os caracteres para os quais essa fonte deve ser usada.

Descrição

O @font-face libera os designers das restrições de fontes "seguras para a Web" ao permitir que eles usem tipografia personalizada. A capacidade da função local() de pesquisar uma fonte no dispositivo do usuário oferece uma experiência perfeita que não depende necessariamente de uma conexão de Internet.

Tipos MIME de fontes

Formato Tipo MIME
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

A diferença entre @font-face e font-family

No CSS, @font-face e font-family são confundidos com frequência, mas têm propósitos distintos.

Como já discutimos, @font-face é uma regra usada para definir fontes personalizadas que você quer usar no seu aplicativo da Web. Ele informa ao navegador onde baixar a fonte, como mostrá-la durante o carregamento (com a propriedade font-display) e especifica qual subconjunto de caracteres baixar (com o unicode-range).

Por outro lado, font-family é uma propriedade CSS usada em uma regra CSS para atribuir uma fonte específica ou uma lista de fontes a um elemento. As fontes listadas em font-family podem ser fontes da Web, do sistema ou personalizadas definidas com @font-face.

Em resumo, @font-face declara uma fonte e dá um nome a ela, e font-family aplica essa fonte declarada aos elementos HTML.

Confira um exemplo de como usar os dois:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

Neste exemplo, @font-face define "CustomFont" e informa ao navegador onde encontrá-la. A propriedade font-family aplica isso ao elemento body, com Arial como substituto se "CustomFont" não estiver disponível.

Mudar a família tipográfica

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use font-family para mudar a família tipográfica do texto.

A propriedade font-family aceita uma lista de strings separadas por vírgulas, que se referem a famílias de fontes específicas ou genéricas. Famílias de fontes específicas são strings entre aspas, como "Helvetica", "EB Garamond" ou "Times New Roman". Famílias de fontes genéricas são palavras-chave como serif, sans-serif e monospace. Confira a lista completa de opções no MDN. O navegador vai mostrar o primeiro tipo de letra disponível na lista fornecida.

Ao usar font-family, especifique pelo menos uma família de fontes genérica caso o navegador do usuário não tenha as fontes preferidas. Em geral, a família de fontes genérica substituta deve ser semelhante às suas fontes preferidas: se você estiver usando font-family: "Helvetica" (uma família de fontes sem serifa), a substituta deve ser sans-serif para corresponder.

Usar fontes em itálico e oblíquas

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use font-style para definir se o texto deve estar em itálico ou não. font-style aceita uma das seguintes palavras-chave: normal, italic e oblique.

Deixar o texto em negrito

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use font-weight para definir a "ênfase" do texto. Essa propriedade aceita valores de palavra-chave (normal, bold), valores de palavra-chave relativos (lighter, bolder) e valores numéricos (100 a 900).

As palavras-chave normal e bold são equivalentes aos valores numéricos 400 e 700, respectivamente.

As palavras-chave lighter e bolder são calculadas em relação ao elemento pai. Consulte Significado dos pesos relativos da MDN para ver um gráfico útil que mostra como esse valor é determinado.

Mudar o tamanho do texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use font-size para controlar o tamanho dos elementos de texto. Essa propriedade aceita valores de comprimento, porcentagens e alguns valores de palavra-chave.

Além dos valores de comprimento e porcentagem, font-size aceita alguns valores de palavra-chave absolutos (xx-small, x-small, small, medium, large, x-large, xx-large) e alguns valores de palavra-chave relativos (smaller, larger). Os valores relativos são relativos ao font-size do elemento pai.

Mudar o espaço entre as linhas

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use line-height para especificar a altura de cada linha em um elemento. Essa propriedade aceita um número, um comprimento, uma porcentagem ou a palavra-chave normal. Em geral, é recomendável usar um número em vez de um comprimento ou porcentagem para evitar problemas com herança.

Mudar o espaço entre os caracteres

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use letter-spacing para controlar a quantidade de espaço horizontal entre os caracteres do texto. Essa propriedade aceita valores de comprimento, como em, px e rem.

O valor especificado aumenta a quantidade de espaço natural entre os caracteres. Na demonstração a seguir, tente selecionar uma letra individual para ver o tamanho da caixa de texto e como ela muda com letter-spacing.

Mudar o espaço entre as palavras

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use word-spacing para aumentar ou diminuir o espaço entre as palavras no texto. Essa propriedade aceita valores de comprimento, como em, px e rem. O comprimento especificado é para espaço extra, além do espaçamento normal. Isso significa que word-spacing: 0 é equivalente a word-spacing: normal.

Abreviação de font

É possível usar a propriedade abreviada font para definir várias propriedades relacionadas à fonte de uma só vez. A lista de propriedades possíveis é font-family, font-size, font-stretch, font-style, font-variant, font-weight e line-height.

Confira o artigo font da MDN (link em inglês) para saber como ordenar essas propriedades.

## Mudar a configuração de letras maiúsculas e minúsculas do texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) para modificar o uso de maiúsculas e minúsculas do texto sem precisar mudar o HTML subjacente. Essa propriedade aceita os seguintes valores de palavra-chave: "uppercase", "lowercase" e "capitalize".

Adicionar sublinhados, sobrelinhados e tachados ao texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use text-decoration para adicionar linhas ao texto. O sublinhado é o mais usado, mas é possível adicionar linhas acima ou no meio do texto.

A propriedade text-decoration é uma abreviação das propriedades mais específicas detalhadas a seguir.

A propriedade text-decoration-line aceita as palavras-chave underline, overline e line-through. Também é possível especificar várias palavras-chave para várias linhas.

A propriedade text-decoration-color define a cor de todas as decorações de text-decoration-line.

A propriedade text-decoration-style aceita as palavras-chave solid, double, dotted, dashed e wavy.

A propriedade text-decoration-thickness aceita valores de qualquer comprimento e define a largura do traço de todas as decorações de text-decoration-line.

A propriedade text-decoration é um atalho para todas as propriedades anteriores.

Adicionar um recuo ao texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use text-indent para adicionar um recuo aos blocos de texto. Essa propriedade usa um comprimento (por exemplo, 10px, 2em) ou uma porcentagem da largura do bloco de contêiner.

Lidar com conteúdo oculto ou em excesso

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

Use text-overflow para especificar como o conteúdo oculto é representado. Há duas opções: clip (padrão), que trunca o texto no ponto de estouro, e ellipsis, que mostra reticências (…) no ponto de estouro.

Controlar espaço em branco

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

A propriedade white-space é usada para especificar como o espaço em branco em um elemento deve ser tratado. Para mais detalhes, confira o artigo white-space no MDN.

O white-space: pre pode ser útil para renderizar arte ASCII ou blocos de código cuidadosamente recuados.

Controlar como as palavras são divididas

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

Use word-break para mudar a forma como as palavras devem ser "quebradas" quando excedem a linha. Por padrão, o navegador não divide palavras. Usar o valor de palavra-chave break-all para word-break instrui o navegador a dividir as palavras em caracteres individuais, se necessário.

Mudar o alinhamento do texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use text-align para especificar o alinhamento horizontal do texto em um bloco ou elemento de célula da tabela. Essa propriedade aceita os valores de palavra-chave left, right, start, end, center, justify e match-parent.

Os valores left e right alinham o texto aos lados esquerdo e direito do bloco, respectivamente.

Use start e end para representar a localização do início e do fim de uma linha de texto no modo de escrita atual. Portanto, start é mapeado para left em inglês e para right em árabe, que é escrito da direita para a esquerda (RTL). São alinhamentos lógicos. Saiba mais no módulo Propriedades lógicas.

Use center para alinhar o texto ao centro do bloco.

O valor de justify organiza o texto e muda automaticamente os espaçamentos entre palavras para que o texto fique alinhado com as bordas esquerda e direita do bloco.

Controlar como o texto é ajustado

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

Use text-wrap para mudar a forma como o texto em um elemento é ajustado.

As palavras-chave aceitas para essa propriedade incluem wrap, nowrap, balance e stable. O valor padrão é wrap, que minimiza o estouro ao quebrar o texto em várias linhas ao longo de espaços normais e quebras de palavras.

Use a palavra-chave nowrap para fazer exatamente o oposto e evitar que o texto seja dividido em várias linhas, o que pode causar estouro.

Para ter a mesma quantidade de texto em cada linha ao escrever títulos ou manchetes, por exemplo, use a palavra-chave balance. Para melhorar o desempenho, os navegadores só vão aplicar esse valor em elementos com seis linhas de texto ou menos.

A palavra-chave stable funciona de maneira semelhante a wrap, mas foi criada para ser usada com texto contenteditable. Com o text-wrap: stable definido, as linhas acima do conteúdo editado não vão mudar de lugar durante o processo.

Às vezes, strings longas sem um ponto de interrupção claro podem transbordar contêineres. Para controlar como esse tipo de texto é quebrado, use overflow-wrap.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

As palavras-chave que você pode usar para essa propriedade são normal, break-word e anywhere. A configuração padrão é normal e não quebra o texto para a próxima linha, a menos que inclua espaços ou pontos de quebra naturais.

Os valores anywhere e break-word adicionam pontos de interrupção em qualquer lugar dentro da string para evitar estouro. As palavras-chave diferem na forma como respondem a um tamanho min-content intrínseco ou explícito. A palavra-chave anywhere permite todas as oportunidades possíveis de quebra suave. O valor break-word não faz isso e deixaria o texto tão longo quanto a palavra mais longa.

Mudar a direção do texto

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Use direction para definir a direção do texto, ltr (da esquerda para a direita, o padrão) ou rtl (da direita para a esquerda). Alguns idiomas, como árabe, hebraico ou persa, são escritos da direita para a esquerda. Portanto, use direction: rtl. Para inglês e todos os outros idiomas da esquerda para a direita, use direction: ltr.

Mudar o fluxo do texto

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

Use writing-mode para mudar a forma como o texto flui e é organizado. O padrão é horizontal-tb, mas você também pode definir writing-mode como vertical-lr ou vertical-rl para o texto que você quer que flua horizontalmente.

Mudar a orientação do texto

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

Use text-orientation para especificar a orientação dos caracteres no texto. Os valores válidos para essa propriedade são mixed e upright. Essa propriedade só é relevante quando writing-mode está definido como algo diferente de horizontal-tb.

Adicionar uma sombra ao texto

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Use text-shadow para adicionar uma sombra ao texto. Essa propriedade espera três comprimentos (x-offset, y-offset e blur-radius) e uma cor.

Confira a seção text-shadow do nosso módulo sobre sombras para saber mais.

Fontes variáveis

Normalmente, as fontes "normais" exigem a importação de arquivos diferentes para versões diferentes do tipo de letra, como negrito, itálico ou condensado. As fontes variáveis podem conter muitas variantes diferentes de um tipo em um arquivo.

Roboto Flex em combinações aleatórias de largura e peso

Confira nosso artigo sobre fontes variáveis para mais detalhes.

Pseudoelementos

Pseudoelementos ::first-letter e ::first-line

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Os pseudoelementos ::first-letter e ::first-line segmentam a primeira letra e a primeira linha de um elemento de texto, respectivamente.

Pseudoelemento ::selection

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

Use o pseudoelemento ::selection para mudar a aparência do texto selecionado pelo usuário.

Ao usar esse pseudoelemento, apenas algumas propriedades CSS podem ser usadas: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

A propriedade font-variant é um atalho para várias propriedades de CSS que permitem escolher variantes de fontes, como small-caps e slashed-zero. As propriedades CSS incluídas nesse atalho são font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures e font-variant-numeric. Confira os links em cada propriedade para mais detalhes sobre o uso dela.

Teste seu conhecimento

Teste seus conhecimentos sobre tipografia na Web

Qual das seguintes palavras-chave pode ser usada como um substituto genérico font-family?

serif
Correto.
monospace
Correto.
italic
Tente novamente. italic é uma palavra-chave válida para font-style, não font-family.
sci-fi
Tente novamente. No entanto, fantasy é um substituto genérico válido para font-family.
sans-serif
Correto.
helvetica
Tente novamente. "Helvetica" não é uma palavra-chave genérica, mas se refere a uma família tipográfica específica.

Qual instrução é usada para converter a primeira letra de cada palavra em maiúscula? Por exemplo, This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
Tente novamente.
text-case: capitalize;
Tente novamente.
text-transform: capitalize;
Correto.
font-style: capitals;
Tente novamente.
font-variant: capitalize;
Tente novamente.

Verdadeiro ou falso: use text-orientation para alinhar o texto à esquerda, à direita ou no centro.

Verdadeiro
Tente novamente. text-orientation muda a rotação das letras em uma linha.
Falso
Correto. text-orientation muda a rotação das letras em uma linha. Use text-align para alinhar o texto à esquerda, à direita ou no centro (e muito mais).

Qual propriedade CSS pode ser usada para mudar o espaço entre as linhas de texto?

line-spacing
Tente novamente.
leading
Tente novamente. Entrelinhamento é o termo correto para o espaço entre as linhas na tipografia, mas não é uma propriedade CSS válida.
baseline-distance
Tente novamente.
line-height
Correto.

Recursos