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

line-height

A propriedade line-height define a altura de uma linha e é frequentemente utilizada para ajustar o espaçamento entre linhas de texto. Por padrão, o line-height depende da fonte do texto e é determinado pelo navegador.

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

multiplier é um valor sem unidade (por exemplo, 1.5). Nesse caso, a altura da linha será o valor que é 1.5 vezes maior que o valor de font-size;
value in px é um valor específico (por exemplo, 24px) ao qual a altura da linha será igual;
value in em é um valor (por exemplo, 1.4em) que funciona de forma semelhante ao multiplier. O navegador verificará o valor de font-size, multiplicará esse valor por 1.4, e esse resultado será a altura da linha;
percent é um valor (por exemplo, 120%) que funciona como um multiplier. O valor de font-size será multiplicado por 1.2, determinando o valor da altura da linha.

index.html

styles.css

Saída

letter-spacing

A propriedade letter-spacing define o espaçamento horizontal entre os caracteres do texto.

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

normal é o espaçamento padrão entre os caracteres;
value in px é um valor específico que adiciona espaço extra entre os caracteres;
value in em funciona de forma semelhante ao px, mas o espaçamento é relativo ao font-size.

index.html

styles.css

Saída

word-spacing

A propriedade word-spacing define a distância entre as palavras no texto. Ela aumenta o espaço entre as palavras. Se houver sinais de pontuação no texto e eles estiverem escritos junto às palavras, continuarão juntos, pois não há espaço entre eles.

word-spacing: value | inherit | normal

value é um valor específico que define o espaço entre as palavras;
inherit herda o espaçamento entre palavras do elemento pai;
normal é o espaçamento padrão entre palavras.

index.html

styles.css

Saída

text-shadow

A propriedade text-shadow adiciona uma sombra ao texto.

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

X set ajusta a posição horizontal da sombra. Valores positivos movem a sombra para a direita e valores negativos movem para a esquerda;
Y set ajusta a posição vertical da sombra. Valores positivos movem a sombra para baixo e valores negativos movem para cima;
blur radius define o grau de desfoque da sombra. Valores mais altos tornam a sombra mais suave e difusa. O valor padrão é 0 se não especificado;
color especifica a cor da sombra em qualquer formato de cor válido. Se não especificado, o padrão é a cor 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 dos requisitos únicos 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

Awesome!

Completion rate improved to 2.56

Deslize para mostrar o menu

line-height

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

multiplier é um valor sem unidade (por exemplo, 1.5). Nesse caso, a altura da linha será o valor que é 1.5 vezes maior que o valor de font-size;
value in px é um valor específico (por exemplo, 24px) ao qual a altura da linha será igual;
value in em é um valor (por exemplo, 1.4em) que funciona de forma semelhante ao multiplier. O navegador verificará o valor de font-size, multiplicará esse valor por 1.4, e esse resultado será a altura da linha;
percent é um valor (por exemplo, 120%) que funciona como um multiplier. O valor de font-size será multiplicado por 1.2, determinando o valor da altura da linha.

index.html

styles.css

Saída

letter-spacing

A propriedade letter-spacing define o espaçamento horizontal entre os caracteres do texto.

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

normal é o espaçamento padrão entre os caracteres;
value in px é um valor específico que adiciona espaço extra entre os caracteres;
value in em funciona de forma semelhante ao px, mas o espaçamento é relativo ao font-size.

index.html

styles.css

Saída

word-spacing

word-spacing: value | inherit | normal

value é um valor específico que define o espaço entre as palavras;
inherit herda o espaçamento entre palavras do elemento pai;
normal é o espaçamento padrão entre palavras.

index.html

styles.css

Saída

text-shadow

A propriedade text-shadow adiciona uma sombra ao texto.

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

X set ajusta a posição horizontal da sombra. Valores positivos movem a sombra para a direita e valores negativos movem para a esquerda;
Y set ajusta a posição vertical da sombra. Valores positivos movem a sombra para baixo e valores negativos movem para cima;
blur radius define o grau de desfoque da sombra. Valores mais altos tornam a sombra mais suave e difusa. O valor padrão é 0 se não especificado;
color especifica a cor da sombra em qualquer formato de cor válido. Se não especificado, o padrão é a cor 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 dos requisitos únicos 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