Mejor espaciado entre párrafos

Después de haber aprendido sobre el estilo de los párrafos para la web en el post anterior, Espaciado entre párrafos, este seguimiento proporcionará un poco de historia sobre los párrafos, explicará por qué los párrafos son importantes, mostrará cómo utilizar HTML y CSS para darles estilo y ofrecerá métodos alternativos para marcar párrafos, como el uso de la pilcrow (¶).

Entonces, ¿qué será? ¿Pilcrows, sangrías o saltos de línea? Puedes tomar una decisión estética, basada en lo que te parezca más adecuado. O si el flujo de trabajo es un problema cuando se trata de HTML y CSS, y la gestión de las cosas a largo plazo, se podría seguir un enfoque de menos es más. Sea como sea, el espaciado entre párrafos no es lo único que importa.

Orígenes de los párrafos

La palabra que conocemos como párrafo procede del francés paragraphe, con raíces en el latín medieval. Y luego está la palabra griega paragraphos, que significa vagamente al lado de la escritura. En el sistema de escritura griego empleado antaño, las anotaciones cerca de un cuerpo de texto u otro significaban un cambio en el diálogo. Se sabía dónde empezaba y terminaba un pasaje buscando una marca, una línea horizontal u otro gesto gráfico. Los griegos utilizaban sus propios símbolos para mostrar gráficamente estas separaciones, y los escribas de otros lugares y culturas también empleaban diversos símbolos. Hoy utilizamos la pilcrow, a veces llamada P al revés. La pilcrow es un símbolo infrautilizado para definir párrafos, pero al igual que los saltos de párrafo y las sangrías, la pilcrow cumple su función.

Pero esta P al revés es más de lo que parece. De hecho, antes de parecerse a la pilcrow que conocemos hoy, tenía forma de C con una línea que la atravesaba. Con el tiempo, la pilcrow se utilizó cada vez menos para indicar párrafos, debido al trabajo y los recursos necesarios para crear un símbolo aparte del texto del párrafo. Cuando se omitían las viñetas para ahorrar tiempo o tinta, quedaba un espacio en blanco que daba lugar a las sangrías actuales.

Ahora se ve la piltrafa, ahora no. Las sangrías de párrafo le deben mucho a la piltrafa. La piltrafa se usa menos como convención de diseño y más como indicación de formato, sobre todo en procesadores de texto y programas de diseño, donde se muestra como un elemento invisible para tranquilizar al usuario sobre dónde empiezan y acaban los párrafos.

Por qué son importantes los párrafos

Separar claramente un párrafo de otro ayuda a los lectores a distinguir las ideas, ya que una nueva idea comienza en un nuevo párrafo. Los párrafos también crean una serie de pequeños trozos de texto, algo que resulta más atractivo que una corriente de texto gigantesca e ininterrumpida. ¿Le gustaría leer el texto denso y apretado que aparece a continuación?

Ese enorme rectángulo intimidaría a la mayoría de los lectores. Los párrafos son imprescindibles y, sea cual sea el estilo que les des, ten en cuenta estos conceptos básicos de HTML y CSS.

Separe los párrafos mediante una apertura <p> y cierre </p> elemento.

<p>First Paragraph</p>
<p>Second Paragraph</p>

Asegúrate de ajustar la altura de línea en CSS, para conseguir una sensación más abierta entre las líneas de texto de cada párrafo. Y recuerda que altura de línea para un tipo de letra puede no funcionar igual para otro.

Puede crear párrafos utilizando saltos, como se muestra arriba, para que los bloques de párrafos proporcionen una separación nítida y clara. El ejemplo siguiente ajusta el espacio entre párrafos mediante un aumento de margen especificado en el CSS.

Las sangrías, a veces llamadas tabulaciones, también sirven para marcar párrafos. Las sangrías pueden ser grandes o, en el caso de sangrías extremas, extragrandes.

Las sangrías extremas no suelen ser atractivas. Las sangrías pequeñas funcionan mejor. Las sangrías pequeñas son más atractivas para el lector porque son más silenciosas y aprovechan mejor el espacio de diseño.

Crea tus sangrías para que funcionen en una amplia gama de pantallas digitales, desde los ordenadores de desktop hasta las pantallas más pequeñas de portátiles, tabletas y teléfonos inteligentes. Y cuando se trata de utilizar espacio adicional entre párrafos y sangrías, ten en cuenta que no necesitas ambas cosas, sobre todo porque algunas guías de estilo sugieren que es como llevar cinturón y tirantes.

Sangrías más inteligentes, no más duras

El post anterior, Espaciado entre párrafos, mostraba diferentes formas de especificar sangrías en HTML y CSS. En todos los casos, obtendrás los mismos resultados cuando el texto se muestre en un navegador. Pero cada método ofrece sus ventajas y desventajas.

Para empezar, puedes utilizar una clase, que te resultará muy útil si sólo quieres un par de párrafos, sangrados aquí y allá.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
.indented {
text-indent: 3em;
}

<p>No indent would appear in this one.</p>
<p class="indented">This paragraph would be indented.</p>
<p class="indented">This paragraph would also be indented.</p>

Insertar una clase tras otra no es la mejor forma de emplear el tiempo, así que si quieres sangrías en todo el diseño, tienes que trabajar de forma más inteligente, no más dura. Puede utilizar la función :first-child pseudo-clase CSS para que el primer párrafo no tienen una sangría, con los párrafos subsiguientes sangrados.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
text-indent: 3em;
}
p:first-child {
text-indent: 0;
} 

<p>No indent occurs because it is the first-child.</p>
<p>This paragraph would be indented.</p>
<p>This paragraph would be indented.</p>

Los métodos anteriores que utilizan clases o :first-child ambos funcionan y ofrecen los resultados deseados. Pero en términos de eficiencia y limpieza, ambos son torpes si quieres que todo un diseño -o todo un sitio- utilice sangrías de párrafo. No querrás escribir una clase tras otra en tu HTML. Y todo :first-child La cosa puede resultar algo confusa. Peor aún, hay diferentes informes cuando se trata de apoyo: algunos sugieren que Microsoft ® Internet Explorer ® 7, 8, y 9 reconocerá :first-childpero otros informes sugieren que sólo A partir de Explorer 9.

Hay una solución mejor que cuenta con más apoyo. ¿Y lo mejor? Es ordenada. Si sabes que siempre querrás el primer párrafo no con sangría, pero los párrafos siguientes con sangría, utilice el selector adyacente (+), también conocido como selector de hermanos próximos o selector de hermanos adyacentes.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p+p {
text-indent: 3em;
}

En el caso del CSS anterior, p+p estilos de cada párrafo después de la primera con una sangría. Además, utiliza 103 caracteres en CSS, mientras que el :first-child utiliza 128. En este caso, menos es definitivamente más, proporcionando un CSS ordenado y también liberándonos de la confusión de tratar con :first-child.

Soporte para utilizar el selector adyacente (+) está muy extendido entre los navegadores web modernos, aunque en el momento de escribir este artículo se ha informado de que algunas versiones de Microsoft Internet Explorer plantean problemas, especialmente Explorer 6. Internet Explorer 6 es utilizado por menos del 1% de la población que navega por la web, según un informe de Microsoft que utiliza datos de 2015 de Net Applications. Así que es justo decir que el uso del selector adyacente (p+p) es una apuesta segura. Pero si te preocupa que los visitantes que lleguen a tu sitio utilicen un navegador antiguo y no compatible, formatea los párrafos como simples bloques utilizando saltos de línea y sólo saltos de línea.

Los párrafos en bloque cumplen su función sin tener que añadir CSS para aplicar sangrías. Si no se utiliza el selector adyacente (p+p) ni :first-child ni sangría de texto en tu CSS utiliza aún menos caracteres. Con 89 para definir los párrafos como bloques, frente a 128 y 103 para las sangrías, los párrafos en bloque son un CSS ordenado, si eres de los que prefieren menos.

Párrafos

Si quieres dar a tu diseño web un aire anticuado, puedes utilizar el gorrión para separar un párrafo de otro. Para ello, es necesario renderizarlo como el icono ¶ entidad en HTML. Pero no tan rápido. Antes de introducir una pilcrow como ¶ en todos y cada uno de los párrafos de su sitio web, tenga esto en cuenta: hacerlo es tedioso y lleva mucho tiempo. Si desea automatizar el proceso, utilice ::antes en CSS para insertar un pilcrow al principio de cada párrafo.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p::before {
content: "B6";
margin-right: 0.5em;
color: gray;
} 

En el CSS de arriba, "B6" es el Unicode de la pilcrow. También puede utilizar el selector adyacente al renderizar pilrows si desea que el primer párrafo sea no tienen una pilcrow, pero las posteriores para usar la pilcrow.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p+p::before {
content: "B6";
margin-right: 0.5em;
color: gray;
} 

Ya que añades un elemento de diseño para mezclar las cosas, ¿por qué no mezclar los tipos de letra? Puede poner el párrafo en un tipo de letra y la piltrafa en otro. En el ejemplo siguiente, se utiliza el tipo de letra Helvetica® para el texto y el Times® para la ceja.

Hay muchas páginas web fuentes entre las que elegir para tu pilcrow. Cada tipo de letra tendrá uno distinto, desde negrita a fino, redondo a en bloque, corto a alto, o caligráfico a mecánico, y mucho más.

De izquierda a derecha, pilcrows en los tipos de letra Adobe Garamond™, Aachen™, ITC Souvenir®, Kairos® y Posterama™ 1901.

Espaciados

Las convenciones del diseño van y vienen. Los estilos crecen y decrecen. La práctica de diseñar párrafos ha evolucionado a lo largo de los siglos y algunos de los métodos utilizados hace tiempo siguen vigentes. Otros se consideran pasados de moda. ¿Cómo decidir qué funciona mejor? Pruebe distintos estilos de párrafo con los usuarios, para ver qué prefieren y cómo interactúan con la tipografía. A medida que pruebe distintos tipos de letra y considere diversas oportunidades de diseño, pruebe también el espaciado entre párrafos, idealmente mediante pruebas con usuarios en distintos tamaños de pantalla. Pruebe también la piltrafa, porque quién sabe, quizá funcione para el lector. Es importante saber cómo interactúa el lector con el diseño -con o sin retículas- y las pruebas te ponen en contacto con la usabilidad y la funcionalidad. Estar en contacto es importante porque no quieres ser un diseñador cadete que no presta atención a la experiencia del usuario.