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. 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, 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
independentemente das fontes instaladas pelo usuário.
A seguir, veremos as propriedades essenciais das fontes CSS, incluindo
font-family
, font-style
, font-weight
e font-size
. Esses conjuntos de princípios básicos
o estágio para manipular o texto para estilo e legibilidade.
Também vamos abordar propriedades específicas de parágrafo, como text-indent
e
word-spacing
, antes de concluir com tópicos avançados, como fontes variáveis
e pseudoelementos, que refinam ainda mais seu controle tipográfico.
Ao longo do curso, você vai encontrar exemplos e dicas práticas para entender e aplicar essas técnicas de CSS.
A regra @font-face
A regra de CSS @font-face
é fundamental no design da Web, permitindo especificar
e usar fontes personalizadas para exibir texto. A beleza do @font-face
está na
versatilidade: ela permite fontes de um servidor remoto ou de uma fonte
instalado 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 do valor de referência.
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 a escala horizontal aceitável, especificada como um único valor ou intervalo.
font-style
- Define o estilo da fonte, aceitando intervalos de ângulos para estilos oblíquos.
font-weight
- Determina a espessura ou o intervalo de espessuras disponíveis da fonte.
font-feature-settings
- Ativa o acesso aos recursos de fonte OpenType.
font-variation-settings
- Fornece controle refinado sobre as configurações de fontes variáveis.
line-gap-override
- Substitui o espaço 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
. Combinarurl()
elocal()
nosrc
é uma estratégia comum que usa uma fonte local, se disponível, revertendo para um arquivo de fonte remota como substituta. Os navegadores priorizam recursos com base na ordem da declaração. Portanto,local()
geralmente deve precederurl()
. unicode-range
- Limita os caracteres em que a fonte precisa ser usada.
Descrição
O @font-face
liberta os designers das restrições de fontes "compatíveis com a Web",
permitindo que usem tipografia personalizada. A capacidade da função local()
de pesquisar
para uma fonte no dispositivo do usuário oferece uma experiência perfeita que não
dependem necessariamente de uma conexão com a Internet.
Tipos MIME de fontes
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 font-family
No CSS, @font-face
e font-family
são frequentemente 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 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
fonte específica ou uma lista de fontes a um elemento. As fontes listadas em
font-family
podem ser fontes seguras para a Web, fontes do sistema ou fontes personalizadas definidas com
@font-face
.
Para resumir, @font-face
declara uma fonte e dá um nome a ela, e
font-family
aplica essa fonte declarada aos elementos HTML.
Aqui está um exemplo de como usar ambos:
<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
para encontrá-lo. Em seguida, a propriedade font-family
a aplica ao elemento do corpo.
com Arial como substituto se "CustomFont" não está disponível.
Mudar a família tipográfica
Use font-family
para mudar o tipo de letra 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
(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érica substituta precisa ser semelhante às suas fontes preferidas: se você usar font-family: "Helvetica"
(uma família de fontes sem serifa), a substituta precisa ser sans-serif
para combinar.
Usar fontes itálico e oblíquas
Use font-style
para definir se o texto precisa estar em itálico ou não. font-style
aceita uma das seguintes palavras-chave: normal
, italic
e oblique
.
Negritar o texto
Use font-weight
para definir a "negrito" do texto. Essa propriedade aceita valores de palavras-chave (normal
, bold
), valores de palavras-chave relativas (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 o artigo Significado dos pesos relativos (link em inglês) da MDN para conferir 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 de palavras-chave absolutos (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) e alguns valores de palavras-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
. Em geral, é recomendável usar um número em vez de um comprimento ou uma 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 da caixa 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
. O comprimento especificado é 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, sobrescritos e linhas ao texto
Use text-decoration
para adicionar linhas ao texto. As sublinhados são mais usados, mas é possível adicionar linhas acima ou 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 uma indentação 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 oculto ou em excesso
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 reticências (...) 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 tratado. 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 com recuo cuidadoso.
Controlar a quebra de palavras
Use word-break
para mudar a forma como as palavras são "quebradas" quando elas transbordarem a linha. Por padrão, o navegador não dividirá palavras. O uso do valor da palavra-chave break-all
para word-break
instrui o navegador a dividir palavras em caracteres individuais, se necessário.
Mudar o alinhamento do texto
Use text-align
para especificar o alinhamento horizontal do texto em um bloco ou elemento 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 árabe, que é escrito da direita para a esquerda (RTL). 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 entre as palavras automaticamente para que o texto fique alinhado com as 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 ou persa, são escritos da direita para a esquerda, então é preciso usar direction: rtl
. Para o inglês e todos os outros idiomas 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 você também pode definir writing-mode
como vertical-lr
ou vertical-rl
para o texto fluir 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
é 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, "normal" as fontes 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
, 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 CSS incluídas nessa abreviação 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.
Teste seu conhecimento
Teste seus conhecimentos sobre tipografia na Web
Qual das palavras-chave a seguir pode ser usada como um substituto genérico de font-family
?
serif
monospace
italic
italic
é uma palavra-chave válida para font-style
, não para font-family
.sci-fi
fantasy
é um substituto genérico válido para font-family
.sans-serif
helvetica
"Helvetica"
não é uma palavra-chave genérica, mas se refere a uma família de fontes 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;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
Verdadeiro ou falso: use text-orientation
para alinhar o texto à esquerda, à direita ou no centro.
text-orientation
muda a rotação das letras em uma linha.text-orientation
muda a rotação das letras em uma linha. Use text-align
para alinhar o texto à esquerda, à direita ou no centro (e mais!).Qual propriedade CSS pode ser usada para alterar o espaço entre as linhas de texto?
line-spacing
leading
baseline-distance
line-height
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.