Texto e tipografia

Podcast CSS - 036: texto e tipografia

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

Ao criar um site, você não precisa necessariamente estilizar o texto. Na verdade, o HTML tem um estilo padrão bastante razoável.

No entanto, o texto provavelmente constituirá a maior parte do seu site, por isso vale a pena adicionar um estilo para melhorar a aparência dele. Ao mudar algumas propriedades básicas, você pode melhorar significativamente a experiência de leitura dos usuários.

Neste módulo, começaremos 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, independentemente das fontes instaladas pelo usuário.

Depois disso, vamos abordar as propriedades essenciais da fonte CSS, incluindo font-family, font-style, font-weight e font-size. Esses princípios básicos preparam o cenário para a manipulação de texto, para fins de estilo e legibilidade.

Também vamos falar sobre 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.

Serão fornecidos exemplos e dicas práticos para solidificar sua compreensão e aplicação dessas técnicas de CSS.

A regra @font-face

A at-rule CSS do @font-face é fundamental no Web design, permitindo especificar e usar fontes personalizadas para mostrar texto. A beleza do @font-face está na versatilidade: ele permite que você forneça 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 subida, afetando o espaço acima do valor de referência.

descent-override

Ajusta a métrica de declive, 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 valor ou intervalo único.

font-style

Define o estilo da fonte, aceitando intervalos de ângulos para estilos oblíquos.

font-weight

Determina o peso da fonte ou o intervalo de pesos disponíveis.

font-feature-settings

Ativa o acesso aos recursos de fonte OpenType.

font-variation-settings

Fornece controle detalhado sobre configurações de fonte variáveis.

line-gap-override

Substitui a lacuna de linha 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() na src é uma estratégia comum que usa uma fonte local, se disponível, revertendo para um arquivo de fonte remota como substituto. Os navegadores priorizam recursos com base na ordem de declaração. Portanto, local() geralmente precede url().

unicode-range

Limita os caracteres em que a fonte precisa 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 fonte

Formato	Tipo MIME
TrueType	font/ttf
OpenType	font/otf
Formato de fonte aberto na Web	font/woff
Formato de fonte aberto na Web 2	font/woff2

A diferença entre @font-face e família de fontes

No CSS, @font-face e font-family costumam ser confundidos, mas têm finalidades distintas.

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

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

Para resumir, @font-face declara e nomeia uma fonte, e font-family aplica essa fonte declarada aos elementos HTML.

Aqui está um exemplo de como usar ambas:

<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. Em seguida, a propriedade font-family a aplica ao elemento do corpo, com Arial como substituto se "CustomFont" não estiver disponível.

Mudar a família tipográfica

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

A propriedade font-family aceita uma lista de strings separada por vírgulas, que se refere 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 (encontre a lista completa de opções no MDN). O navegador exibirá a primeira família tipográfica disponível da 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 suas fontes preferidas. Geralmente, a família de fontes genéricas substituta precisa ser semelhante às suas fontes preferidas: se você estiver usando font-family: "Helvetica" (uma família de fontes Sans Serif), seu substituto precisa ser sans-serif para corresponder.

Usar fontes em itálico e oblíquas

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

Usar negrito no texto

Use font-weight para definir o "negrito" do texto. Essa propriedade aceita valores de palavra-chave (normal, bold), valores de palavra-chave relativos (lighter, bolder) e valores numéricos (de 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 o Significado das ponderações relativas do MDN para ver um gráfico útil que mostra como esse valor é determinado.

Mudar o tamanho do texto

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 absolutos de palavra-chave (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

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

Mudar o espaço entre os caracteres

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 o espaço natural entre os caracteres. Na demonstração a seguir, tente selecionar uma letra para ver o tamanho do efeito letterbox e como ela muda com letter-spacing.

Mudar o espaço entre as palavras

Use word-spacing para aumentar ou diminuir o espaço entre cada palavra do texto. Essa propriedade aceita valores de comprimento, como em, px e rem. Observe que o comprimento especificado serve para o 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 do MDN para mais detalhes sobre como ordenar essas propriedades.

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

Use text-transform para modificar a capitalização do texto sem precisar alterar o HTML subjacente. Essa propriedade aceita os seguintes valores de palavra-chave: uppercase, lowercase e capitalize.

Adicionar sublinhados, sobrelinhas e linhas cruzadas ao texto

Use text-decoration para adicionar linhas ao texto. Os sublinhados são os mais usados, mas é possível adicionar linhas acima ou diretamente no texto.

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

A propriedade text-decoration-line aceita as palavras-chave underline, overline e line-through. Você também pode 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 qualquer valor de comprimento e define a largura do traço de todas as decorações de text-decoration-line.

A propriedade text-decoration é uma abreviação de todas as propriedades acima.

Adicionar um recuo ao texto

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 que o contém.

Lidar com conteúdo em excesso ou oculto

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 exibe uma elipse (...) no ponto de estouro.

Controlar o espaço em branco

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

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

Controlar como as palavras são quebradas

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

Alterar o alinhamento do texto

Use text-align para especificar o alinhamento horizontal do texto em um elemento de bloco ou de célula de 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 à esquerda e à direita do bloco, respectivamente.

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

Use center para alinhar o texto ao centro do bloco.

O valor de justify organiza o texto e muda o espaçamento das palavras automaticamente para que ele fique alinhado às bordas esquerda e direita do bloco.

Mudar a direção do texto

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 e persa, são escritos da direita para a esquerda, então é preciso usar direction: rtl. Para inglês e todos os outros idiomas escritos da esquerda para a direita, use direction: ltr.

Mudar o fluxo do texto

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

Mudar a orientação do texto

Use text-orientation para especificar a orientação dos caracteres no texto. Os valores válidos para esta 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

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, fontes "normais" exigem a importação de diferentes arquivos para diferentes versões da família tipográfica, como negrito, itálico ou condensado. Fontes variáveis podem conter muitas variantes diferentes de uma família tipográfica em um arquivo.

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

Pseudoelementos

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

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

Pseudoelemento ::selection

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 e stroke-width.

font-variant

A propriedade font-variant é uma abreviação de várias propriedades CSS que permitem escolher variantes de fonte, como small-caps e slashed-zero. As propriedades de CSS que essa abreviação inclui são font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures e font-variant-numeric. Confira os links de cada propriedade para mais detalhes sobre o uso delas.

Teste seu conhecimento

Teste seus conhecimentos sobre tipografia na Web

Recursos

• As práticas recomendadas para fontes abordam a importação e renderização de fontes, além de outras práticas recomendadas para o uso de fontes na Web.
• Estilo básico de texto e fonte do MDN.