Técnicas de tipografía con CSS

Existen muchos tipos de webs, creadas para infinidad de propósitos, pero en muchos de los casos, el componente más importante es el texto. Unos pequeños cambios en las declaraciones de estilos para alterar la forma como se presenta el texto pueden ser cruciales para que el aspecto de una web pase de ordinario a atractivo, sobre todo, en las webs que se basan en contenido. Pero también es sumamente importante que un texto se pueda leer bien y se ha comprobado que ciertas características de los textos, que podemos definir con CSS, ayudan bastante a aumentar su legibilidad.

CSS incluye diversos atributos de estilo que se pueden utilizar para crear textos más legibles y atractivos. En este artículo de desarrollo web .com pretendemos comentarlos. Quizás no resultará muy novedoso para quien domine las CSS y esté acostumbrado a maquetar páginas basadas en texto, pero esperamos que las personas que empiezan a trabajar con las hojas de estilo puedan encontrar utilidad en esta serie de consejos y referencias.

Cómo afectan los márgenes e interlineado a la velocidad de lectura y comprensión del texto

Se han realizado diversos estudios acerca del uso de márgenes e interlineado y cómo afectan a la velocidad de lectura y comprensión de los textos. Ambos criterios son deseables a la hora de presentar textos, pero se encuentra que a menudo chocan entre sí, es decir, a medida que aumenta la velocidad de lectura, se pierde un poco de capacidad de comprensión. Por tanto, en principio se entiende que lo más deseable sería que las personas entiendan bien lo que se está escribiendo y en un segundo plano, aunque también importante, estaría que pudieran leer los textos con rapidez.

En el estudio de usabilidad Reading Online Text: A Comparison of Four White Space Layouts se comparan 4 textos formateados de la siguiente manera:

• Con márgenes grandes y espacio entre líneas grandes
• Con márgenes grandes y menor espacio entre líneas
• Con márgenes menores y espacio entre líneas grandes
• Con márgenes menores y menor espacio entre líneas

Se comprobó entre varias personas que la comprensión del texto aumentaba cuando hay más margen y el espacio entre líneas también es mayor. Por lo que respecta a la velocidad de lectura se vió que aumentaba cuando los márgenes y el espacio de interlineado es menor.

En la encuesta se dedujo que las personas prefieren leer textos que tengan espacio en blanco en márgenes y un mayor espacio entre líneas. Un interlineado y márgenes adecuados hacen más fácil leer el texto facilitan su comprensión, sin embargo, si nos pasamos en su uso estaríamos disminuyendo la velocidad con la que las personas pueden revisar nuestro contenido.

Cómo aplicar márgenes e interlineado con CSS

Las hojas de estilo en cascada permiten definir las características del texto como los márgenes y el espacio entre líneas, a través de los conocidos atributos margin y line-height. Es importante definir ambos valores con CSS, dado que los márgenes por defecto de la mayoría de los elementos, por lo menos a la izquierda y derecha, son nulos por defecto. Además, el valor de line-height que utilizan los navegadores por defecto suele ser escaso.

Podemos definir estos atributos, o bien para el cuerpo de la página, o bien para los contenedores en los que necesitemos escribir texto que deseamos que sea legible y atractivo.

body{
   margin: 20px;
   line-height: 1.5em;
   font-size: 0.875em;
}

Así hemos definido un margen de 20 píxeles arriba, abajo, a la izquierda y a la derecha del cuerpo de la página. Además un espacio entre líneas de 1,5 veces el tamaño de la letra configurada por defecto. La fuente tendrá un tamaño un poco menor que la fuente configurada por defecto.

div.textolegible{
   margin: 10px 20px;
   font-family: verdana, arial, helvetica;
   line-height: 18px;
   font-size: 10px;
}

En este caso hemos definido un una class de CSS definida para las etiquetas DIV donde tenemos un margen arriba y abajo de 10 píxeles y a los lados de 20 píxeles. Para el tamaño del texto y el espacio entre líneas hemos optado, por variar, por expresar los tamaños en píxeles.

Otros atributos CSS para mejorar el aspecto estético de los textos

Aunque los márgenes e interlineado son muy importantes para mejorar el aspecto y aportar mayor legibilidad al texto, existen diversos atributos de estilos que merece la pena conocer y comentar que nos pueden servir especialmente para que el aspecto del texto sea un poco más atractivo.

Espacio entre letras
Con CSS podemos utilizar el atributo letter-spacing para separar o juntar las letras de cualquier texto. Alterar la distancia entre las letras puede ser un recurso estético, pero si nos pasamos puede mermarse la facilidad de lectura, sobre todo en textos largos, por eso es más aconsejable usarlo en los titulares, que suelen ser más cortos. Ojo cuando separamos los caracteres, porque las palabras quedan poco definidas, ya que las letras parece que están sueltas. Un recurso utilizado a menudo con letter-spacing es juntar las letras un poco en los titulares.

h1{
   letter-spacing: -1px;
}

Espacio entre palabras
El atributo CSS word-spacing permite separar o juntar las palabras contiguas en un texto. No altera la distancia entre caracteres, sino entre las palabras, por lo que no tiene el problema que comentábamos en letter-spacing. Si separamos las palabras crearemos un espacio en blanco entre ellas mayor, lo que puede dar un afecto más ligero al texto y se leerá fácilmente, porque las palabras se leerán como una unidad. Si juntamos las palabras corremos el riesgo que no se puedan identificar bien como una unidad y el efecto tampoco ayudará a la lectura.

body{
   word-spacing: 0.25em;
}

Transformar el texto entre mayúsculas y minúsculas
El atributo CSS text-transform sirve para cambiar las letras entre mayúsculas y minúsculas. Son permitidos los valores: none (que deja el texto como estaba), capitalize (que pone la primera letra de cada palabra en mayúscula), uppercase, (que pone todo en mayúsculas) y lowercase (que pone todo en minúsculas). De nuevo, resultará más útil para textos cortos que se coloquen en titulares o en encabezamientos de cajas.

h1{
   text-transform: uppercase;
}

Sangrado de la primera línea
Con el atributo text-indent podemos hacer un sangrado de la primera línea de cada párrafo. No es muy útil para el cuerpo entero, porque te sangraría todos los elementos de la página, pero para textos largos podría servir en algunos casos, porque da un aspecto al texto más de carta.

div.carta{
   text-indent: 20px;
}

Decorar la primera letra o la primera línea de un párrafo
Otro recurso bastante original y que, bien utilizado, puede quedar atractivo es utilizar los pseudo-elementos de CSS :first-letter y :first-line, con los que podemos asignar estilos diferentes a la primera letra de un párrafo o a la primera línea completa. Algo que, de nuevo, se utiliza bastante en los medios escritos, pero no tanto en la web.

p.parrafodecorado:first-letter {
   font-size: 300%;
   font-weight: bold;
}

Justificar el texto
Entre los estilos de párrafo, los alineamientos del texto son bastante interesantes. En concreto el atributo text-aling permite varios valores que seguramente conozcamos, como left, rigth y center. Pero hay otro valor, justify, que sirve para alinear la terminación de las líneas a ambos lados del texto, tanto a la izquierda como la derecha. Aunque da un aspecto bastante diferente a la web, se utiliza bastante menos dado que las personas no están acostumbradas a leer texto justificado en la web y realmente no ayuda a aumentar la comprensión del mismo. Pero existe un problema estético, en mi opinión, puesto que el justificado queda realmente bien cuando se utilizan columnas más o menos estrechas, pero en estos casos da problemas porque a menudo las palabras quedan muy separadas, cuando se cuentan pocas por línea. Este problema no lo tenemos cuando los textos se colocan en columnas anchas y hay muchas palabras por línea, pero en ese caso visualmente no queda tan atractivo.

Utilizar distintas familias tipográficas
Otro recurso interesante, aunque en este caso más de diseño en general que de hojas de estilo en particular, es jugar con distintos tipos de letra en la página. Por ejemplo, queda bien colocar los titulares con una tipografía y los cuerpos con otra. En este caso incluso nos podemos aventurar a trabajar con fuentes bastante diferentes, lo que dará una marca especial a nuestro sitio. En cualquier caso, no es recomendable utilizar más de 2 familias tipográficas distintas.

Recurso interesante para ver distintas fuentes y estilos en funcionamiento

Acabamos este artículo de DesarrolloWeb.com comentando un recurso online donde se puede jugar con distintas tipografías y estilos de caracteres y de párrafo, y ver cómo trabajan juntas.

http://www.typetester.org/

Podemos alterar la fuente, el tamaño del texto, interlineado, espacio entre caracteres, colores, etc. para comparar distintos resultados visualmente. Luego puedes recibir el código CSS que te serviría para asignar ese estilo de fuente a los elementos de tu página web.

Conclusión

Un componente fundamental de las páginas web es el texto y en gran parte de ellas, es el contenido principal. No debemos desaprovechar la oportunidad de utilizarlos como recurso de diseño, para hacerlos atractivos y también fáciles de leer y para ello las hojas de estilo en cascada tienen muchos atributos que nos pueden ayudar. Con CSS podemos utilizar diversos recursos que pueden aportar un estilo propio a tu web en un elemento tan importante como el texto.