Optimizar la tipografía con CSS

Muchas personas, incluidos los diseñadores web, creen que la tipografía se compone sólo de seleccionar un tipo de letra, la elección de un tamaño de fuente y si debe ser regular o negrita. Para la mayoría de la gente termina allí. Pero hay mucho más para lograr la buena tipografía y está en los detalles que los diseñadores a menudo olvidan.

Estos datos dan el control total del diseño, que permite crear una bella y coherente tipografía en tus diseños. Mientras estos detalles se pueden aplicar en distintos tipos de medios, en este post nos vamos a centrar  en la forma de aplicarlos al diseño web con CSS. Aquí te mostramos 8 maneras simples de usar el CSS para mejorar tu tipografía y por lo tanto optimizar la usabilidad general de tu sitio web.

Medida

La medida es la longitud de una línea de texto.  Para el ojo de un lector las líneas largas o cortas pueden ser agotadoras. Una medida demasiado larga interrumpe el ritmo porque el lector tiene dificultades para localizar la siguiente línea. Para mejorar la legibilidad óptima la medida debe estar entre 40 y 80 caracteres, incluyendo los espacios. Para un diseño con una sola columna, 65 es lo ideal.

Una forma sencilla de calcular la medida es el uso del método Robert Bringhurst, que multiplica el tamaño de la letra por 30. Asique si el tamaño de letra es de 10px al multiplicar por 30 se obtiene una medida de 300px por línea. El código sería algo como esto:

p {
font-size: 10px;

max-width: 300px;

}

Interlineado

Es el espacio entre líneas  del cuerpo del texto. Es importante que las líneas estén correctamente espaciadas para que sea más fácil para el lector seguir el texto. El interlineado también altera el color tipográfico que es la densidad o el tono de una composición.

Muchos factores afectan: tipo de letra, tamaño de letra, la medida, etc. Cuanto más larga sea la medida más interlineado se necesita. Además cuanto mayor sea el tamaño de fuente  menos necesario es el interlineado.

Esto requiere afinar un poco para obtener el espacio correcto, aquí tienes un ejemplo:

body {
font-family: Helvetica, sans-serif;

font-size: 12px;

line-height: 16px;

}

Cuotas colgantes

Al no poner cuotas en los márgenes es posible que una comilla  que quede al ras con el texto se interrumpa en el margen izquierdo y altere el ritmo del lector. Las cuotas colgantes mantienen la alineación a la izquierda lo que aumenta la legibilidad y la mantiene intacta y equilibrada.

Esto se consigue muy fácilmente en CSS mediante el elemento blockquote:

blockquote {
text-indent: -0.8em;

font-size: 12px;

}

El guión negativo variará dependiendo del tamaño de letra tipo y los márgenes.

Ritmo vertical

Una cuadrícula es importante para el ritmo constante de la tipografía en una página. Esto permite al lector seguir fácilmente el flujo del texto, lo que a su vez incrementa la legibilidad. Un ritmo continuo en el espacio vertical mantiene todo el texto en una cuadrícula coherente, de modo que la proporción y el equilibrio se mantienen en toda la página, sin importar el tamaño de letra, el interlineado o la medida.

Para mantener un ritmo vertical en CSS, debes mantener la separación entre los elementos y el espacio entre líneas (interlineado) para igualar el tamaño de la cuadrícula. Por ejemplo, digamos que usted está usando una cuadrícula base de 15px, lo que significa que hay 15px entre cada línea de base. La línea de separación sería 15px y el espacio entre cada párrafo también sería 15px. Aquí está un ejemplo:

body {
font-family: Helvetica, sans-serif;

font-size: 12px;

line-height: 15px;

}

p {

margin-bottom: 15px;
}

Esto permite a cada elemento del párrafo alinearse con la cuadrícula, manteniendo el ritmo vertical del texto.

Las viudas y huérfanos

Una viuda es una línea corta o palabra al final de un párrafo. Un huérfano es una palabra o una línea corta al principio o al final de una columna que está separada del resto del párrafo. Las viudas y huérfanos crear cortes que interrumpen la atención del lector y afectan a la legibilidad. Se puede evitar ajustando el tamaño de letra, el interlineado, la medida, el espacio entre palabras, entre letras, o introduciendo saltos de línea.

Desafortunadamente, no hay manera fácil de prevenir las viudas y los huérfanos con CSS.

Énfasis

Dar énfasis a una palabra sin interrumpir al lector es importante. La cursiva es ampliamente considerada como la forma ideal de dar énfasis. Algunas otras formas comunes de énfasis son: la negrita, las mayúsculas, variar el tamaño de letra, color, subrayado o un tipo de letra diferente. No importa que elijas, trata de limitarte a usar sólo uno. Las combinaciones como mayúsculas en negrita o cursiva son perjudiciales.

He aquí algunas maneras diferentes de énfasis con el uso de CSS:

span {
font-variant: small-caps;

}

h1 {

font-style: italic;

}

h2 {

text-transform: uppercase;

}

a {

text-decoration: underline;

}

Ten en cuenta que el estilo de font-variant sólo funciona si la fuente admite la variante small-caps.

Escala

Siempre se debe tener una escala, ya sea la escala tradicional con la que todos estamos familiarizados, o una tuya propia. Crear una escala es importante porque establece una jerarquía tipográfica que mejora la legibilidad y crea la armonía y la cohesión en el texto.

Un ejemplo de una escala tipográfica se define en el CSS:

h1 {
font-size: 48px;

}

h2 {

font-size: 36px;

}

h3 {

font-size: 24px;

}

h4 {

font-size: 21px;

}

h5 {

font-size: 18px;

}

h6 {

font-size: 16px;

}

p {

font-size: 14px;

}

Limpieza de texto

Al configurar un bloque de texto no justificado con una alineación a la izquierda o a la derecha, asegúrate de mantener el lado desigual equilibrado, sin “agujeros” o formas torpes. Un lado desigual puede ser inquietante a la vista y distraer al lector. El texto no alineado debe tener una “suave” irregularidad, sin ningún tipo de líneas demasiado largas o demasiado cortas. No hay manera de controlar esto en CSS, de modo que para lograr un buen texto alineado tienes que hacer ajustes manuales en el bloque de texto.

La división de palabras también pueden ayudar con la producción de trapos limpios, pero lamentablemente CSS no puede manejar esto en este momento. Quizás en un futuro próximo veremos algo de control en CSS 3.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *