La tipografía en tiempos de Responsive

Muchas veces nuestros sitios no quedan 100% legibles, no por fallas de diseño o de identidad gráfica, sino porque simplemente no logramos optimizar correctamente los textos que contienen.

El diseño tipográfico tiene muchos siglos, es por eso que, de a poco, muchas de las prácticas tipográficas impresas se están adaptando para ser utilizadas en la web. Aquí vamos a repasar algunas buenas prácticas de diseño tipográfico en tiempos de Responsive.

Responsive Design: pantallas, márgenes y columnas variables

Estas tres son interdependientes. El formato de la pantalla determina los márgenes a utilizar y éstos nos permiten establecer la retícula o grilla para establecer el sistema de columnas a organizar.

Si diseñamos en responsive este dato es primordial para establecer los cambios en la interfaz entre las distintas resoluciones. Decide en cuáles resoluciones principales vas a trabajar para configurar los márgenes en cada una, y a partir de esto determinas cómo cambian los números y anchos de columna.

A la hora de maquetar, podés utilizar algún framework que lo haga automáticamente, pero igualmente, es necesario planificarlo desde antes para poder diseñar todas las instancias del sitio.



Con todos estos cambios de tamaños, nuestros textos se modifican constantemente, es así que al diseñar para responsive debemos controlar cómo fluctúan los mismos entre las resoluciones.

Cómo calcular el ancho de columna

Un ancho adecuado de columna ayuda a la buena lectura. Generalmente se calculan entre siete y 13 palabras por línea. Este cálculo te ayuda también a dar con el tamaño adecuado de la tipografía para el párrafo de texto.

Frameworks para sistemas de grillas en CSS

Hay varios, pero los más utilizados son 960 grid system, Foundation, y Bootstrap.

Alineación y justificación

Los párrafos de texto también se diseñan. Estos dibujan bloques en el diseño, por eso que debemos ubicarlos de manera correcta en el soporte, así como también, cuidar estos sean legibles.

El problema del párrafo justificado en la web

Cuando diseñamos para trabajos editoriales, en indesign o cualquier programa de diseño, tenemos la posibilidad de configurar el corte de palabra en los párrafos (hypenation).

Estos cortes de palabra ayudan a que el bloque de texto se vea más uniforme, evitando así que se formen “caminos” o “ríos”. @betaromeo nos explica aquí qué son estos ríos o también llamadas calaveras y cómo solucionarlo.

En la web no es posible todavía cortar palabras. Es por esto que en la mayoría de las ocasiones, es mejor utilizar el párrafo alineado a la izquierda.

Alineación a la izquierda, centrado y a la derecha. Cuándo utilizarlos

En el mundo occidental leemos de izquierda a derecha, por lo tanto si tenemos que justificar párrafos de textos largos debemos justificar a la izquierda para que el ojo trabaje menos, ya que al terminar de leer una línea y buscar la siguiente, esta está más visible.

• Los textos alineados a la derecha sirven más cuando tenemos algún texto corto destacado y queremos darle cierta importancia dentro de la puesta en página.
  
  
• Los textos centrados van muy bien para títulos y bajadas de títulos, de no más de tres líneas aproximadamente.
  

Utilizar estas variantes en un diseño ayuda al dinamismo de la lectura y a jugar con el ritmo y la tensión de la composición tipográfica, también permiten destacar partes importantes y los niveles jerárquicos de la información.



En CSS las propiedades para justificar o alinear un texto son las siguientes:

Código :

text-align:center;
text-align:left;
text-align:right;
text-align : justify;

Serif versus Sans Serif

Cuando vamos a elegir una familia tipográfica para nuestro diseño siempre surge la duda: ¿usamos una tipografía Serif o Sans Serif?



Si nuestro sitio va a tener mucha información para leer de corrido, como un blog o algún sitio de lectura (Medium o Wikipedia ) lo mejor y lo tradicional es utilizar, para los párrafos de textos, una tipografía con serifa. Para títulos, subtítulos y textos destacados se puede utilizar sin problemas una tipografía sin serifa, porque funcionan bien para textos cortos.



Para linkear una tipografía en el HTML

Código :

<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

Para aplicar en el CSS

Código :

font-family: 'Bitter', serif;

Derrumbando el mito del Sans Serif para web

En las primeras épocas de la web se utilizaban mucho las tipografías sin serifas, porque la calidad de las pantallas era menor y renderizaban mejor las tipografías sans serif que las serif. Esto ya se acabó. Ahora tenemos mejores resoluciones (más aún con retina display) y también muchas fuentes tipográficas serif diseñadas exclusivamente para el uso en la web. También hay muchísimas fundiciones que han adaptado sus catálogos tradicionales para ser utilizados en web.

Interlineado e interletrado

El interlineado es el espacio entre líneas en un párrafo de texto, mientras que el interletrado es el espacio entre letras o caracteres. Estas dos propiedades ayudan a que el texto y los párrafos sean legibles.

• En CSS el interlineado se configura usando line-height.
  
• El interletreado se configura usando letter-spacing.
  

Líneas ajustadas

Esto ocurre cuando no hemos dado el suficiente interlineado a un párrafo de texto. En los medios impresos, como los periódicos, esto es normal, pero generalmente utilizan tipografías especialmente diseñadas para que entren muchas palabras en una columna y con líneas muy apretadas.

Cuando diseñamos para pantallas esto cambia ya que debemos ayudar a que el texto se lea con claridad, porque la instancia de lectura es otra, sobre todo en dispositivos móviles.

El interlineado suele ser unos puntos más grande que el tamaño de letra. Esto igualmente varía de acuerdo a la altura que la tipografía tenga. Muchas tipografías pueden llevar el mismo tamaño pero varían su altura.



La línea puede estar ajustada también en lo horizontal, ya que puede tener mal configurado el espacio entre letras.

Es probable que tengas que modificar estos parámetros si estás diseñando para responsive, y así asegurarte que los textos funcionen bien para la lectura, sobre todo en resoluciones más pequeñas.

El mundo de la tipografía es increíblemente interesante. Las bases ya fueron escritas hace muchísimos años, sólo resta que las utilices bien y de manera eficiente para tus aplicaciones diseñadas en Responsive.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.