Como hacer tu tipografía más legible para una web responsive

26 May Como hacer tu tipografía más legible para una web responsive

Al elegir el diseño responsive para tu sitio web, estás tomando también la decisión de cambiar el tamaño del contenido al tamaño óptimo para el consumo en ese ancho de ventana del dispositivo en particular.

Entonces eres responsable de asegurar que el contenido está estructurado para que el lector pueda leer fácilmente en el contenido, incluyendo:

• Una estructura jerárquica adecuada que funcione a través de unas únicas ventanas estrechas y ventanas grandes con múltiples columnas. por ejemplo: dos bloques de contenido que se sientan uno al lado del otro en una gran ventana, deberán ser colocados en una sola columna en las ventanas más pequeñas, no en el contenido que sigue fluyendo.
• Una óptima font-size, es decir, aprovechar los valores por defecto del navegador para obtener mejores resultados consistentes.
• Una correcta línea de altura para mantener buen ritmo vertical y mejorar la legibilidad.

Cada una de estas necesidades que exijan respuesta para cada punto de interrupción, y a través de cada uno de DPI para asegurar la tipografía correcta, se ajusta para facilitar mejor la experiencia de lectura. Esta es la razón por lo que aplicaciones como las de Apps Proyectos Digitales han hecho tan bien su legibilidad, se llevan el contenido y lo muestran en un formato fácil de leer (también para el consumo fuera de línea, pero eso es algo completamente diferente).

Mantener las cosas de forma proporcional

La tipografía debe seguir siendo proporcional a través de su diseño. Esto se ha utilizado para referirse a la muy práctica Modular Scale o escala modular (http://www.modularscale.com/),  para proporcionar la escala tipográfica y aplicar luego a las hojas de estilo. Ahora, con la toma cada vez mayor de pre-procesadores CSS, como: SASS y LESS (entre muchos otros),  estamos viendo herramientas de la talla de nuestros tamaños de base. Los pre-procesadores son una herramienta muy útil cuando se escribe el código CSS, y aunque también están disponibles para lenguajes como JavaScript (CoffeeScript) y HTML (HAML, Jade), sólo están interesados en los pre-procesadores CSS.

También habrá situaciones en las que las llamadas de diseño para un elemento puedan ser más grandes o más pequeñas que la escala que has definido, y en esas situaciones sólo tienes que reemplazar el encabezado o en el párrafo (o lo que sea que estés actualizando) al nuevo tamaño requerido. Recuerda asegurarte de que  lo has hecho con el EMS en lugar de con píxeles.