Separación entre líneas, palabras y letras

A veces da la sensación que nos ponemos de acuerdo a la hora de preguntar algo, no creo que sea telepatía sino más bien coincidencia. Y la coincidencia de esta semana ha sido la separación entre líneas en los textos.

Me comentan que aunque con el editor dejan un espacio mínimo entre líneas al dar salida al post el espacio no se muestra igual, eso puede ser debido al editor de Blogger pero también podemos establecerlo en los estilos de la plantilla.

(Siempre que ponemos ejemplos nos referimos a la plantilla Minima)
En body establecemos el tamaño de fuente del cuerpo del blog.

body {

font-size: 14px;

...............

...............

}

Pero también podemos establecer un tamaño distinto para el contenido de los post en:

.post {

font-size: 14px;

...............

..............

}

Aquí un ejemplo de las propiedades más usadas para establecer distancia entre líneas, palabras o letras.

La propiedad line-height controla la altura de cada línea de texto

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five.

(line-height: 12px)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five.

(line-height: 32px)

La separación entre letras la conseguimos utilizando la propiedad letter-spacing

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five.

(letter-spacing: 4px)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five.

(letter-spacing: 1px)

La separación entre palabras la controlaremos con word-spacing

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five.

(word-spacing: 12px)

Cualquier propiedad añadida en nuestra hoja de estilos antes de ]]></b:skin> se mostrará en todo el blog, si por ejemplo añadimos una propiedad al contenido de los post todas las entradas se mostrarán de igual forma porque está establecido así en la hoja de estilos.

También puede llegar el caso que deseamos añadir a un texto una propiedad en concreto, esto es valido para cualquier propiedad, lo podemos hacer con html de esa forma no se mostraría en todo el blog sino en el lugar que lo añadimos.

<div style="color: #4ac0ee; font-family: Arial; font-size: 26px; font-weight: normal; text-align: center; word-spacing: 12px; text-shadow: 1px 2px 1px #000;">Este sería el texto a incluir</div>

Este sería el texto a incluir

Añadimos "color" para el color de letra, el tipo de fuente con "font-family" el tamaño de letra con "font-size", para el grosor de letra "font-weight", centramos el texto con "text-align", separamos las palabras con "word-spacing" y rizamos el rizo con sombra "text-shadow"