Podcast do CSS - 036: texto e tipografia
O texto é um dos elementos básicos da web.
Ao criar um site, não é necessário estilizar seu texto porque o HTML tem um estilo padrão bastante razoável.
No entanto, é provável que o texto seja a maior parte do site. Por isso, vale a pena adicionar um estilo para decorá-lo. Altere algumas propriedades básicas para melhorar significativamente a experiência de leitura dos seus usuários!
Neste módulo, primeiro, vamos analisar algumas propriedades fundamentais da fonte CSS, como font-family
, font-style
, font-weight
e font-size
. Em seguida, vamos nos aprofundar nas propriedades que afetam parágrafos de texto, como text-indent
e word-spacing
. O módulo termina com temas mais avançados, como fontes variáveis e pseudoelementos.
Mudar a família tipográfica
Use font-family
para mudar o tipo de letra do seu texto.
A propriedade font-family
aceita uma lista de strings separadas por vírgulas, referindo-se 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
(consulte a lista completa de opções no MDN). O navegador vai mostrar a primeira família tipográfica disponível da lista.
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 genérica de fontes substituta precisa ser semelhante às suas fontes preferidas: se você estiver usando font-family: "Helvetica"
(uma família de fontes sem serifa), o substituto vai precisar ser sans-serif
para corresponder.
Usar fontes em itálico e oblíqua
Use font-style
para definir se o texto será itálico ou não. font-style
aceita uma das seguintes palavras-chave: normal
, italic
e oblique
.
Deixar o texto em negrito
Use font-weight
para definir o "negrito" do texto. Essa propriedade aceita valores de palavras-chave (normal
, bold
), valores relativos de palavra-chave (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 dos pesos relativos da 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 tamanho, porcentagens e alguns valores de palavras-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
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 seu 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 abaixo, tente selecionar uma letra individual para ver o tamanho da letterbox e como ele muda com letter-spacing
.
Alterar o espaço entre as palavras
Use word-spacing
para aumentar ou diminuir o tamanho do espaço entre cada palavra no texto. Essa propriedade aceita valores de comprimento, como em
, px
e rem
. 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
Você pode usar a propriedade abreviada font
para definir várias propriedades relacionadas a fontes 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 para ver detalhes sobre como ordenar essas propriedades.
Alterar o uso de letras maiúsculas e minúsculas do texto
Use text-transform
para modificar o uso de letras maiúsculas do seu texto sem precisar mudar o HTML subjacente. A propriedade aceita os seguintes valores de palavras-chave: uppercase
, lowercase
e capitalize
.
Adicionar sublinhados, sublinhados e linhas ao texto
Use text-decoration
para adicionar linhas ao texto. Os sublinhados são os mais usados, mas é possível adicionar linhas acima do texto ou diretamente nele!
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 diversas 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 todos os valores 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 oculto ou excessivo
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 espaço em branco
A propriedade white-space
é usada para especificar como o espaço em branco em um elemento precisa ser processado. Para saber mais, confira o artigo white-space
no MDN.
white-space: pre
pode ser útil para renderizar arte ASCII ou blocos de código cuidadosamente recuados.
Controle como as palavras são quebradas
Use word-break
para mudar a forma como as palavras serão "corrompidas" quando ultrapassarem a linha. Por padrão, o navegador não dividirá palavras. O uso do valor de palavra-chave break-all
para word-break
instruirá 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 célula da tabela. Essa propriedade aceita os valores de palavras-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 o local 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 right
em script árabe, escrito da direita para a esquerda (RTL). Eles são alinhamentos lógicos. Saiba mais no nosso 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 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, seja 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 direction: rtl
precisa ser usado. 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 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 precisa 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 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
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 arquivos diferentes para versões diferentes da família tipográfica, por exemplo, negrito, itálico ou condensado. As fontes variáveis são fontes que podem conter muitas variantes diferentes de uma família tipográfica em um arquivo.
Confira nosso artigo sobre fontes variáveis para ver 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 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 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 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, ela 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 muito mais.Qual propriedade de 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 de fontes, a renderização e outras práticas recomendadas para o uso de fontes na Web.
- Estilo fundamental de texto e fonte MDN.