La tipografía puede parecer lo más fácil en el diseño web, pero ¿realmente lo es? No, en los tiempos del responsive design o adaptativo, pues el reto ahora es asegurarse que la fuente sea legible en cualquier pantalla.
Notas relacionadas
Cómo aprovechar el espacio negativo en un logotipo: 7 pasos
Todo lo que debes saber acerca del flat design para web
Cómo elegir las imágenes para anuncios en línea: 6 tips
Clarissa Peterson, una diseñadora UX, explicó en CreativeBloq cómo hacer para que la tipografía se vea bien en cualquier pantalla, sin importa el tamaño, y así asegurarse de su efectividad.
1. Escala
En cualquier tamaño de pantalla, los elementos web ser visualizados en una escala adecuada. Por ejemplo, en un teléfono móvil no hay mucho espacio, por lo que si todo se ve grande será extraño y obliga al usuario a desplazarse más.
Contrario de lo que sucede con un monitor grande, el diseño tiene la ventaja de hacer más, como crear elementos más grandes y aumentar el espacio negativo, por ejemplo. Todo pequeño y junto, crea confusión.
2. Tamaño, longitud y altura
El tamaño de la fuente funciona en conjunto con la altura de línea (leading) y la longitud de la línea (measure) para determinar el ajuste del texto conforme a la escala del sitio. Esto afecta afecta a la legibilidad del texto.
3. Tamaño de fuente
Lo más importante que deben considere lo diseñadores es crear un texto lo suficientemente grande para que sea fácil de leer por la mayoría de los usuarios. ¿Por qué? Después de los 40 años, la gente desarrolla la presbicia, una condición que hace que sea difícil concentrarse en las cosas que están cerca, por lo que tienen dificultades para leer textos pequeños en los sitios web.
En realidad, muchos fabricantes de navegadores se aseguran de esto. Tu trabajo como diseñador web es asegurarte de establecer la base de tamaño de la fuente y el 100 por ciento.
Para la mayoría de los dispositivos el 100 por ciento del tamaño de la fuente equivale a 16 píxeles. Usar este tamaño, te prepara para los futuros dispositivos.
4. Ems y rems
Luego de ajustar el tamaño de la fuente al 100 por ciento, todas las fuentes del sitio deben ser de un tamaño en ems o reme, la cuales son unidades de relación, en vez de unidades fijas como los pídeles. Esto hace más fácil ajustar el tamaño de la tipografía para diferentes pantallas.
Por ejemplo, puedes empezar con el texto del párrafo en 1 em, que es igual al tamaño de la fuente base. Configurar la H1 en 2em haría dos veces más grande el tamaño de la fuente base.
body {font-size: 100%; } P {font-size: 1em; } H2 {font-size: 2em; }
La tipografía grande no debe verse mal, si se siente muy grande, sólo debes ajustar la escala de todo los demás elementos para que coincida con el tamaño del texto, así como darle prioridad al espacio negativo.
5. Altura de la línea
Es la distancia entre líneas de texto, afecta a la legibilidad, pues si las líneas están muy juntas o separadas, hará que sea más difícil para los ojos para viajar desde el final de una línea para comenzar la siguiente, y esforzar la lectura .
Por ejemplo, la altura de la línea de 1 significa que la línea es tan alta como el texto, sin espacio extra entre líneas. Mientras que la altura de la línea de 2 significa que el espacio vacío entre las líneas de texto es exactamente tan alto como el texto.
En promedio, la mejor altura de la línea para la lectura es de alrededor de 1,4. Esto sólo aplica a los bloques de texto como párrafos, no a otros elementos como títulos. Además, en pantallas pequeñas, la altura de la línea debe ser poco menos, y en pantallas grandes más.
Por otra parte, los márgenes verticales, por encima y por debajo de los párrafos, deben estar en proporción a la altura de la línea. Esto se hace con la misma cantidad, pero con una unidad de em.
p {line-height: 1.4; margen: auto 1.4em; }
6. Longitud de la línea
La longitud de la línea es muy importante para la legibilidad del texto. Las líneas de texto muy largas son difíciles de leer y la mirada del usuario tiene problemas para pasar de una línea a la otra. En cambio, las líneas cortas cansan la vista, pues los ojos de mueven con más frecuencia.
El texto es más fácil de leer si las líneas tienen un promedio de 45 a 75 caracteres de longitud.
7. Ajuste de los márgenes
Para reducir la longitud de la línea se puede aumentar los márgenes izquierdo y derecho. Si se trata de un sitio con una sólo columna, es más fácil.
Otra opción es aumentar el número de columnas. Una tercera opción es aumentar el tamaño de la fuente de los párrafos, que supone un menor número de caracteres por línea.
