Desarrollo web

El rol que juega las tipografías durante el desarrollo front-end

La tipografía es uno de los aspectos clave del desarrollo front-end, sobre todo a la hora de hablar de responsividad. Una correcta elección puede entregar resultados que van más allá de únicamente buenos resultados visuales.

Al escoger una familia tipográfica intervienen diversos elementos como el color, contraste, peso y tamaño, entre otros. Va más allá de que simplemente “se vea bien”. Debe responder a criterios de diseño, editoriales, conceptuales hasta estratégicos.

Incluso, la determinación influye en el alto y largo de línea, los cuales deben adaptarse a todo tipo de pantallas e interfaces. ¿Qué elementos debemos considerar para seleccionar la tipografía correcta?. Hay algunos aspectos a considerar.

Tipografía sencilla: textos accesibles

Antes de aplicar cualquier técnica para redimensionar y adaptar tamaños de fuente, hay que asegurarse de su factibilidad. Es necesario asegurar que, tras esta intervención, los textos sean legibles y accesibles.

También es prioritario realizar testeos para llegar al contraste adecuado, sin olvidar lo clave: debemos utilizar familias tipográficas de fácil lectura.

Legibilidad

Al momento de escoger una familia tipográfica hay que seleccionar una que sea fácilmente legible. Muchas de las fuentes existentes no califican en estos parámetros al ser utilizada para desplegar contenido.

Hoy en día es posible acceder a fuentes desde plataformas como Google fonts y Typekit. Ellas otorgan una amplia cantidad de opciones y ambas incluyen una vista previa.

Una vez que ya tenemos nuestra fuente adecuada, la podemos utilizar como cualquier otra dentro de la hoja de estilos (CSS). Aunque es necesario recordar: de todas formas debemos incluir una fuente de emergencia en caso que ciertos navegadores (explorer ?) no admitan nuestra primera opción.

Es necesario tener siempre en mente que el utilizar demasiados tipos de fuentes distintos puede generar confusión dentro de la interfaz, lo que termina siendo perjudicial para el usuario.

El color y contraste

El propósito de todo contenido dentro de un sitio web es que sea leído. Por ejemplo, la utilización de colores con bajo contraste para los textos pueden resultar en bloques imposibles de leer. Esto no es un tip pero sí una necesidad al momento de generar contenido en la web.

Por ejempo, la W3C tiene clasificado como regla básica el contraste mínimo entre textos y fondos en su Web content accesibility guideline, pensando siempre en aquellos usuarios con una visión moderadamente baja.

Hoy existe una amplia gama de herramientas que miden el contraste de los colores que utilizamos al diseñar. Inclusive, entregan información que prácticamente implica tener parte de la tarea ya cumplida. Un buen ejemplo es Clrs.

Tamaños

Ya pasamos exitosamente por la definición de qué tipografía usar y dónde ubicarla en nuestro sitio web. También contamos con nuestra paleta de colores y otros factores.

Con estos antecedentes, toca responder a un elemento clave: el tamaño. Todo el trabajo previo puede ser eclipsado si este parámetro no es el correcto o no se ajusta perfectamente a nuestra necesidad.

Unidades EM

Antes de conocer el beneficio de utilizar unidades relativas para otorgar tamaños de fuente (también se puede aplicar en paddings y margins de tamaño fijo), debemos conocer el porqué utilizar pixeles para tales fines es una mala idea.

Los pixeles, aunque controlan el tamaño de fuente de manera fácil e intuitiva, presenta complicaciones con la escabilidad. Muchos navegadores permiten usar zoom para mayor accesibilidad, sin embargo los más antiguos realizan esta tarea escalando el tamaño de fuente del sitio.

Las unidades EM permiten otorgar un tamaño relativo al elemento padre más cercano. Esto quiere decir: si una lista posee un tamaño de fuente de 16px, es posible determinar el tamaño de fuente de los elementos de la lista con solo definir el tamaño de estos a 1em, o aumentar su tamaño de manera relativa. Ej: 1.25em => 20px 1.5em => 24px, etc.

Unidades REM

Al igual que las EM, las denominadas unidades REM posee un valor relativo. Sin embargo, está definido según el tamaño que posea su padre absoluto.

Es decir el tamaño se guiará y tomará como valor base el tamaño otorgado al elemento.

Por ejemplo, un elemento posee un tamaño de fuente de 16px y si deseamos que el tamaño de los párrafos existentes dentro de él posean un tamaño de 20px, debemos asignar como valor a de 1.25rem, sin modificar el tamaño base cada vez que se necesite definir tamaños de fuente.

La decisión de qué tipografía usar en nuestro proyecto digital no debe responder únicamente a variables estéticas. Son un conjunto de elementos los que determinarán, además de los resultados visuales, el impacto global de nuestro sitio web.

Implica, entre otros puntos, seleccionar los colores y tamaños adecuados para que el máximo de nuestro público pueda acceder a los contenidos publicados, sumado a la capacidad de adaptarse a cualquier plataforma.