Soy un gran fanático del diseño y la tipografía en papel impreso (revistas, periódicos, libros, etc.). Una de las cosas que más ha atraído mi atención es el ritmo vertical que manejan y sobre todo, la idea de llevarlo al diseño web.

Para esto es necesario aplicar un sistema de cuadrícula o rejilla vertical que sirva de línea base. La idea es que cada línea de cada párrafo y cada contenedor caiga en esta línea base y la página mantenga una "armonía visual".

Obviamente es mucho más fácil en el papel impreso que en la web. Aquí nos toca lidiar con CSS, contenedores flotantes, sidebars, imágenes y videos con tamaños fijos, etc.

Haciendo mi investigación sobre éste tema, di con un par de artículos (en inglés) que me sirvieron para hacer unas pruebas. He aquí los resultados.

El line-height es la clave. Servirá para agregar espacio entre cada línea, lo cual será útil al momento de hacer caer el texto en la línea base. Pero primero necesitarás definir el alto del espacio que separa cada línea.

---

Línea base de 18px usando ‘ems’

Empiezo creando la rejilla, una imagen de fondo de 18px de alto con una línea vertical gris de 1px. Esta imagen servirá de guía mientras realizo las pruebas.

Para éste ejemplo utilicé 'ems'. Los ems son unidades relativas y se llaman así porque se cree que 1em equivale aproximadamente al tamaño de una M mayúscula. Pero en realidad esto no es así.

Un em es una distancia igual al tamaño de la letra. Por lo tanto, si tienes un tamaño de letra de 6pt, un em será igual a 6pt. Si tu tamaño de letra es 60pt, un em será igual a 60pt.

El tamaño de la letra será de 12px y el line-height 1.5em, que equivalen a 18px. Como el alto de nuestra línea base para este ejemplo es de 18px, éste será nuestro número mágico. Habrá que tenerlo en cuenta de aquí en adelante.

Cada párrafo tendrá una separación de 1 línea (18px), al igual que los títulos, subtítulos, y cualquier otro tipo de contenido que necesite ser separado.

body{
  font-family: georgia, "times new roman", serif;
  font-size: 75%;
}
html>body {
  font-size: 12px;
}
body:hover {
  background:url(underline.gif) repeat;
}
p {
  font-size: 1em;
  line-height: 1.5em;
  margin: 0 0 1.5em 0;
}

Y hablando de títulos y subtítulos, es aquí donde comienza a complicarse. La mayoría de éstos llevarán tamaños de letra más grande, pero deberán mantener los 18px de alto. Para esto será necesario modificar el line-height.

Por ejemplo, para los títulos h1, quise darle un tamaño de letra de 22px. Entonces, hago el cálculo: 22/12 = 1.8333 y éste será el tamaño de letra en ems.
Para el line-height: 18/22 = .8181 que también servirá para el margin. Así:

h1 {
  font-size:1.8333em;
  line-height: .8181em;
  margin-top: .8181em;
  margin-bottom: .8181em;
}

Lo mismo será con los subtitulos. Por ejemplo, el h2:

h2 {
  font-size:1.6667em;
  line-height: .9em;
  margin-top: .9em;
  margin-bottom: .9em;
}

Con las listas quise dejar el tamaño de letra de 1em (12px) intacto. Pero no quería separar con una línea cada ítem, únicamente la lista en general. Quedó así:

ul,
ol {
  font-size:1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 1.5em;
}
li ul,
li ol,
ul ul,
ol ol {
  margin-top: 0;
  margin-bottom: 0;
}

Ver ejemplo

---

Línea base de 18px usando 'px'

Cuando se usa pixeles es menos complicado. Basta con usar tu número mágico o múltiplos de éste para el line-height y el margin.

Para éste ejemplo he usado posiciones relativas para ubicar mejor el texto en la línea base, sobre todo en los títulos y subtítulos.

En realidad no hay mucho que explicar, lo mejor es ver algo del código:

body {
  font-size: 75%;
  line-height: 18px;
}
html>body {
  font-size: 12px;
}
body:hover {
  background:url(http://dl.dropbox.com/u/17062597/underline.gif) repeat transparent;
}
p {
  font-size: 13px;
  position:relative;
  top:5px;
}

Listas:

ul,
ol {
  position: relative;
  top:5px;
  margin-bottom: 18px;
  margin-left: 18px;
}
li ul,
li ol,
ul ul,
ol ol {
  top:0;
  margin-top: 0;
  margin-bottom: 0;
}

Headings:

h1 {
  position: relative;
  line-height:36px;
  margin-top:18px;
  margin-bottom:18px;
  font-size:36px;
  top:5px;
}
h2 {
  position: relative;
  line-height:36px;
  margin-bottom:18px;
  margin-top:18px;
  font-size:28px;
  top:8px;
}

Usando pixeles es mucho más fácil al momento de agregar imágenes y otros elementos flotantes dentro del texto. Pero para esto es necesario definir el alto de estos elementos en múltiplos de tu número mágico, en éste caso, 18px.
Para otros elementos flotantes, en los que es más difícil predecir o fijar el alto basándose en su contenido, basta con asegurarse de que el padding y el margin sean siempre igual a tu número mágico.

.left { 
  float: left; 
  margin: 0 1.5em 1.5em 0; 
}
.right { 
  float: right; 
  margin: 0 0 1.5em 1.5em; 
}
.callout {
  background:#eee;
  font-size:11px;
  border: 1px solid #ddd;
  padding: .6667em .8333em;
  margin-bottom: 1.5em;
}

Ver ejemplo

---

Línea Base de 24px

Para éste último ejemplo decidí usar una línea base más alta con letra un poco más grande. He usado una combinación de pixeles con ems y el resultado, a mi gusto, ha sido el mejor.

body{
  font-family: helvetica, arial, sans-serif;
  width:960px;
  line-height: 1.5;
}
p {
  margin-bottom: 24px;
}
ul,
ol {
  margin-bottom: 24px;
}
li ul,
li ol,
ul ul,
ol ol {
  margin: 0 0 0 60px;
}
h1 {
  font-size: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
  line-height: 1em; /* 24px --> 24 ÷ 24 = 1 */
  margin-bottom: 24px;
  margin-top: 24px;
}
h2 {
  font-size: 1.375em; /* 22px --> 22 ÷ 16 = 1.375 */
  line-height: 1.0909em; /* 24px --> 24 ÷ 22 = 1.090909(09) */
  margin-bottom: 24px;
  margin-top: 24px;
}
h1:first-child,
h2:first-child {
  margin-top: 0;
}

Ver ejemplo

---

Palabras finales

Este sistema es solo una cuestión estética, no siempre será necesario utilizarlo. Sin embargo, si tu página web o Blog tiene mucho texto, es recomendable utilizarlo para mejorar la legibilidad.

El uso de pixeles o ems depende del gusto de cada persona. Algunos prefieren ems, otros pixeles. Pero cualquiera de los dos funciona bien se aplica correctamente. Pero ¿cuál es la diferencia? Los ems son medidas relativas al tamaño de la letra, por lo tanto se ve afectado dependiendo de la fuente del navegador o del sistema operativo. Mientras que los pixeles dependen del tamaño y resolución de la pantalla, por lo que no es recomendable si se quiere imprimir la página.