Las propiedades de los textos

Hagamos un resumen de las propiedades más comunes que afectan a los textos.

font-family define el tipo de fuente, es decir el tipo de letra.

Hay que recordar que si bien podemos indicar cualquiera, lo que verán los visitantes dependerá de sus sistemas operativos, del navegador que utilicen y de las fuentes que tengan instaladas. Es común ver que se definen fuentes exóticas porque, claro, quien diseña la página las ve pero eso no significa que lo hará el resto de los usuarios. Esto, no es un problema si es que somos concientes de ello. Una forma de minimizar los riesgos es utilizar fuentes alternativas que se agregan, separándolas con comas y siempre poner una de las llamadas familas genéricas (serif, sans-serif, cursive, fantasy):

p { font-family:Broadway,Arial,Helvetica,sans-serif; }

curabitur consectetur dictum laoreet

font-size define el tamaño de esa fuente.

Ese tamaño es un número seguido de una unidad. Muchas veces vemos que la unidad definida es puntos (pt) y si bien funciona, esto no es recomendable ya que es una unidad que se refiere a las impresoras y los navegadores interpretarán ese valor de distinto modo. Lo lógico es utilizar pixels (px) que es una medida relacionada con la pantalla del monitor o bien utilizar las unidades relativas ems (em) y porcentajes (%).

p { font-size: 20px; }

curabitur consectetur dictum laoreet

Estas últimas son relativas porque toman como referencia "algo" que previamente se ha definido de manera absoluta; caso contrario, es el navegador el que define esa unidad base.

la fuente es de 20 pixeles así que 100% o 20px es lo mismo
si coloco 70% es el 70% de 20 pixeles así que se verá más chica
si coloco 130% es un 130% de 20 pixeles así que se verá más grande

line-height es la "altura" de las fuentes lo que no significa que se modifique la fuente en si misma sino el espacio vertical que ocupa.

Por defecto, el valor se establece con la palabra normal pero, podemos cambiarla.

p { line-height: 1.25em;}

El no tener bien definido ese valor es lo que muchas veces hace que ciertos textos parezcan cortados (y en ese caso, hay que aumentarlo) o que las líneas aparezcan muy separadas entre si (en ese caso hay que disminuirlo)

curabitur consectetur dictum laoreet

curabitur consectetur dictum laoreet

letter-spacing es la separacion entre las letras de una palabra.

Es muy útil cuando se trata de títulos o fuentes de gran tamaño ya que acepta valores negativos y eso, nos permite compactar los textos que sino,, se verían muy perdidos. Por el contrario, también sirve para crear efectos interesantes, separando las letras si usamos valores positivos altos.

p {letter-spacing: -1px;}

curabitur consectetur dictum laoreet

font-style lo usamos cuando queremos mostrar un texto en cursiva (italic)
font-weight lo usamos cuando queremos mostrar un texto en negrita (bold)
font-variant lo usamos cuando queremos mostrar un texto en versales (small-caps)

p {
  font-style: italic;
  font-weight: bold;
  font-variant: small-caps;
}

curabitur consectetur dictum laoreet praesent tempus

text-decoration es la "decoración" del texto, podemos decirle que no queremos ninguno (none), que esté subrayado (underline) que esté tachado (line-through), que tenga un subrayado superior (overline) o incluso, en algunos naveadores, podemos hacer que parpadee (blink).

p {text-decoration: underline;}

curabitur consectetur dictum laoreet praesent tempus

text-transform la usamos si quermos transformar el texto original y tiene tres valores:
lowercase lo usamos si queremos que todas las letras se muestre en minúsculas
uppercase lo usamos si queremos que todas las letras se muestre en mayúsculas
capitalize lo usamos si queremos que la primera letra de cada palabra se muestre en mayusculas y el resto en minúsculas

p {text-transform: uppercase;}

curabitur consectetur dictum laoreet praesent tempus

text-indent nos permite crear sangrías, separando un texto de su borde

p {text-indent: 50px}

Maecenas eu turpis quis elit tincidunt hendrerit eget eget massa. Maecenas eu lectus est, et euismod quam. Ut ut sem dolor. Ut vel feugiat eros. Etiam ultricies, nisl at interdum aliquam, leo lorem venenatis elit, a tristique turpis nisi ac nulla.

Mauris congue molestie sem eu pretium! Vestibulum quis dapibus velit. Nullam at ultricies dui. Sed malesuada molestie nibh ac aliquam. Nam lectus turpis, posuere et porta a, eleifend vel dui. Praesent tristique dignissim placerat.In eros mauris, iaculis eu porta in, luctus ut sapien. Integer a leo turpis.