Aprenda Técnicas de Formatação de Texto para Legibilidade

line-height

line-height controla o espaçamento vertical entre as linhas de texto. Os navegadores definem um valor padrão com base na fonte, mas é possível personalizá-lo utilizando vários formatos:

line-height: multiplier | value in px | value in em | percent

multiplier valor sem unidade como 1.5 multiplica o font-size;
value in px altura específica, por exemplo, 24px;
value in em valor relativo, semelhante ao multiplicador (1.4em = font-size × 1.4);
percent funciona como o multiplicador (120% = font-size × 1.2).

index.html

styles.css

Saída

letter-spacing

letter-spacing define o espaçamento horizontal entre caracteres.

letter-spacing: normal | value in px | value in em

normal: espaçamento padrão;
value in px: espaçamento extra fixo;
value in em: espaçamento relativo ao font-size.

index.html

styles.css

Saída

word-spacing

O word-spacing ajusta a distância entre as palavras.

word-spacing: value | inherit | normal

value: espaçamento personalizado;
inherit: utiliza o espaçamento do elemento pai;
normal: espaçamento padrão.

index.html

styles.css

Saída

text-shadow

text-shadow adiciona sombras ao texto. Aceita quatro valores:

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set: deslocamento horizontal;
Y set: deslocamento vertical;
blur radius: suavidade da sombra (0 = nítida);
color: qualquer cor válida, padrão é a cor atual do texto.

index.html

styles.css

Saída

Nota

Na formatação de texto, não existem regras rígidas que determinem quais valores devem ser usados em situações específicas. A escolha das propriedades e valores de formatação de texto depende das necessidades exclusivas de cada projeto e da visão de design.

1. Qual propriedade CSS é usada para criar um efeito visual que adiciona uma sombra ao texto?

2. Qual propriedade CSS ajusta a distância entre as palavras em um texto?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 2

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Deslize para mostrar o menu

line-height

line-height controla o espaçamento vertical entre as linhas de texto. Os navegadores definem um valor padrão com base na fonte, mas é possível personalizá-lo utilizando vários formatos:

line-height: multiplier | value in px | value in em | percent

multiplier valor sem unidade como 1.5 multiplica o font-size;
value in px altura específica, por exemplo, 24px;
value in em valor relativo, semelhante ao multiplicador (1.4em = font-size × 1.4);
percent funciona como o multiplicador (120% = font-size × 1.2).

index.html

styles.css

Saída

letter-spacing

letter-spacing define o espaçamento horizontal entre caracteres.

letter-spacing: normal | value in px | value in em

normal: espaçamento padrão;
value in px: espaçamento extra fixo;
value in em: espaçamento relativo ao font-size.

index.html

styles.css

Saída

word-spacing

O word-spacing ajusta a distância entre as palavras.

word-spacing: value | inherit | normal

value: espaçamento personalizado;
inherit: utiliza o espaçamento do elemento pai;
normal: espaçamento padrão.

index.html

styles.css

Saída

text-shadow

text-shadow adiciona sombras ao texto. Aceita quatro valores:

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set: deslocamento horizontal;
Y set: deslocamento vertical;
blur radius: suavidade da sombra (0 = nítida);
color: qualquer cor válida, padrão é a cor atual do texto.

index.html

styles.css

Saída

Nota

1. Qual propriedade CSS é usada para criar um efeito visual que adiciona uma sombra ao texto?

2. Qual propriedade CSS ajusta a distância entre as palavras em um texto?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 2