Aprende Técnicas de Formato de Texto para la Legibilidad

line-height

La propiedad line-height define la altura de una línea y se utiliza frecuentemente para ajustar el espacio entre líneas de texto. Por defecto, line-height depende de la fuente del texto y es determinada por el navegador.

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

multiplier es un valor sin unidades (por ejemplo, 1.5). En este caso, la altura de la línea será el valor que es 1.5 veces mayor que el valor de font-size;
value in px es un valor específico (por ejemplo, 24px) al que será igual la altura de la línea;
value in em es un valor (por ejemplo, 1.4em) que funciona de manera similar al multiplier. El navegador verificará el valor de font-size, lo multiplicará por 1.4 y este resultado será la altura de la línea;
percent es un valor (por ejemplo, 120%) que funciona como un multiplier. El valor de font-size se multiplicará por 1.2, determinando el valor de la altura de la línea.

index.html

styles.css

Salida

letter-spacing

La propiedad letter-spacing establece el espacio horizontal entre los caracteres del texto.

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

normal es el espaciado predeterminado entre caracteres;
value in px es un valor específico que añade espacio adicional entre caracteres;
value in em funciona de manera similar a px, pero el espaciado es relativo al font-size.

index.html

styles.css

Salida

word-spacing

La propiedad word-spacing define la distancia entre las palabras en el texto. Aumenta el espacio entre palabras. Si hay signos de puntuación en el texto y están escritos junto a las palabras, seguirán apareciendo juntos, ya que no hay espacio entre ellos.

word-spacing: value | inherit | normal

value es un valor específico que establece el espacio entre palabras;
inherit hereda el espaciado entre palabras del elemento padre;
normal es el espaciado predeterminado entre palabras.

index.html

styles.css

Salida

text-shadow

La propiedad text-shadow agrega una sombra al texto.

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

X set ajusta la posición horizontal de la sombra. Los valores positivos mueven la sombra hacia la derecha y los valores negativos la mueven hacia la izquierda;
Y set ajusta la posición vertical de la sombra. Los valores positivos mueven la sombra hacia abajo y los valores negativos la mueven hacia arriba;
blur radius define cuán difusa aparece la sombra. Los valores más altos hacen que la sombra sea más suave y difusa. El valor predeterminado es 0 si no se especifica;
color especifica el color de la sombra en cualquier formato de color válido. Si no se especifica, por defecto toma el color del texto.

index.html

styles.css

Salida

Nota

En el formato de texto, no existen reglas estrictas que dicten qué valores deben usarse en situaciones específicas. La elección de las propiedades y valores de formato de texto depende de los requisitos únicos de cada proyecto y de la visión de diseño.

1. ¿Qué propiedad de CSS se utiliza para crear un efecto visual que añade una sombra al texto?

2. ¿Qué propiedad de CSS ajusta la distancia entre palabras en un texto?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 2

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.56

Desliza para mostrar el menú

line-height

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

multiplier es un valor sin unidades (por ejemplo, 1.5). En este caso, la altura de la línea será el valor que es 1.5 veces mayor que el valor de font-size;
value in px es un valor específico (por ejemplo, 24px) al que será igual la altura de la línea;
value in em es un valor (por ejemplo, 1.4em) que funciona de manera similar al multiplier. El navegador verificará el valor de font-size, lo multiplicará por 1.4 y este resultado será la altura de la línea;
percent es un valor (por ejemplo, 120%) que funciona como un multiplier. El valor de font-size se multiplicará por 1.2, determinando el valor de la altura de la línea.

index.html

styles.css

Salida

letter-spacing

La propiedad letter-spacing establece el espacio horizontal entre los caracteres del texto.

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

normal es el espaciado predeterminado entre caracteres;
value in px es un valor específico que añade espacio adicional entre caracteres;
value in em funciona de manera similar a px, pero el espaciado es relativo al font-size.

index.html

styles.css

Salida

word-spacing

word-spacing: value | inherit | normal

value es un valor específico que establece el espacio entre palabras;
inherit hereda el espaciado entre palabras del elemento padre;
normal es el espaciado predeterminado entre palabras.

index.html

styles.css

Salida

text-shadow

La propiedad text-shadow agrega una sombra al texto.

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

X set ajusta la posición horizontal de la sombra. Los valores positivos mueven la sombra hacia la derecha y los valores negativos la mueven hacia la izquierda;
Y set ajusta la posición vertical de la sombra. Los valores positivos mueven la sombra hacia abajo y los valores negativos la mueven hacia arriba;
blur radius define cuán difusa aparece la sombra. Los valores más altos hacen que la sombra sea más suave y difusa. El valor predeterminado es 0 si no se especifica;
color especifica el color de la sombra en cualquier formato de color válido. Si no se especifica, por defecto toma el color del texto.

index.html

styles.css

Salida

Nota

En el formato de texto, no existen reglas estrictas que dicten qué valores deben usarse en situaciones específicas. La elección de las propiedades y valores de formato de texto depende de los requisitos únicos de cada proyecto y de la visión de diseño.

1. ¿Qué propiedad de CSS se utiliza para crear un efecto visual que añade una sombra al texto?

2. ¿Qué propiedad de CSS ajusta la distancia entre palabras en un texto?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 2