Tipografía fluida

Cuando el término "responsividad" entró por primera vez en el vocabulario de los mercadólogos y diseñadores web, lo utilizamos para describir el futuro del diseño de correos electrónicos y sitios web. Los diseñadores web en particular se enfrentaron a un gran desafío: crear sitios web que proporcionaran a los usuarios de móviles, tabletas y escritorios un sitio web que no solo se ajustara a sus pantallas, sino que también ofreciera una experiencia agradable.

La responsividad no es una tendencia nueva, pero sí es muy importante. La experiencia del usuario es un factor primordial en cómo Google califica tu sitio y si aparecerá o no en los resultados de búsqueda. Es tan importante para Google que proporcionan un servicio de consulta gratuito.

Incluso para aquellos que han hecho esfuerzos para hacer sus sitios web responsivos, aún hay trabajo por hacer para proporcionar una mejor experiencia al visitante. Pero lo que realmente ha cambiado es la definición de lo que realmente significa el término “todos los dispositivos”.

Hace unos años, cuando alguien decía ‘responsivo en todos los dispositivos’ probablemente se refería a 3 dispositivos:

• Escritorio
• Tableta
• Teléfono inteligente

Aunque estos son los 3 tipos de dispositivos más comúnmente descritos, debemos ser conscientes de que nuestros visitantes pueden estar viendo nuestro sitio en una amplia variedad de tamaños de pantalla, desde grandes Macs de Apple hasta laptops ligeras con pantallas más pequeñas. La tecnología sigue avanzando y debemos estar preparados para nuevos y emocionantes tipos de dispositivos como la tecnología vestible y la realidad virtual.

Centremos nuestra atención en un elemento del diseño responsivo: el texto. A medida que cambias de un dispositivo a otro, el tamaño de la fuente en el sitio web debe cambiar. Pero, ¿cómo se logra esto? Simple: al codificar el sitio web, defines diferentes tamaños de fuente en píxeles (px) para diferentes tamaños de pantalla.

Cuando abres el sitio web en tu tableta de 9 pulgadas, el tamaño de la fuente se reducirá a un tamaño más pequeño.

¿Pero qué pasa con las tabletas de 7’’ o 12’’? ¿El tamaño de la fuente se mantendrá igual? Aquí nos acercamos al concepto de tipografía fluida.

Imagina la gran variedad de dispositivos y tamaños de pantalla no solo entre las diferentes marcas, sino también entre varios modelos de la misma marca de teléfonos, tabletas o laptops, sin olvidar las grandes pantallas de TV.

Estarás de acuerdo conmigo cuando digo que definir el tamaño de la fuente para cada uno de esos dispositivos sería imposible.

De hecho, sería una locura si alguien siquiera intentara hacerlo. Por eso algunas mentes brillantes idearon la tipografía fluida, para que las fuentes puedan redimensionarse por sí solas. ¿Cómo? Definiendo un tamaño de fuente relativo basado en el tamaño real de la pantalla.

En lugar de definir el tamaño exacto de la fuente, puedes usar unidades REM, que son relativas al tamaño de la fuente del elemento raíz (suena complicado pero ten paciencia, trataremos de no hacerte dormir (¿un pequeño juego de palabras con REM? No. Bueno, sigamos).

La mayoría de los navegadores tienen un valor predeterminado de tamaño de fuente de 16px para que podamos leer el texto fácilmente. Así que usando REM, si quieres tener una fuente de 16px en tu sitio web, dices que el tamaño de tu fuente es 1rem. También puedes usar esto para cambiar el tamaño de tu fuente relativamente, por ejemplo, 0.75rem (12px) o un tamaño más grande como 1.25rem (20px), etc.

Las unidades EM funcionan de manera similar, defines tu propio tamaño base de fuente para todos los demás cálculos de tamaño de fuente. Puedes leer más sobre las unidades EM aquí.

Las unidades REM y EM se utilizan a menudo en la tipografía dinámica. Puedes crear sitios web responsivos con ellas, pero la transición de un tamaño de fuente más pequeño a uno más grande (y viceversa) no será tan suave como podría ser con unidades aún más relativas como Vh y Vw.

Vh significa altura del viewport y Vw significa ancho del viewport. Así que en lugar de mirar el tamaño de fuente raíz en el navegador como lo harías con las unidades REM y EM, el tamaño de fuente ideal se calcula en función de la altura y el ancho de la pantalla en la que estás mostrando tu sitio web. ¡Esto sí que es un truco de magia al estilo de la IA de otro nivel!  

Para usar Vh y Vw solo necesitas definir el tamaño de fuente más grande y más pequeño que desees para asegurarte de que la fuente sea fácil de leer en todos los casos y obtengas un sitio web con una tipografía verdaderamente fluida. ¡Ta-da! Visitantes felices en tu web. Además, parecerás un genio de la optimización de sitios web a prueba de futuro.

Así que si estás a punto de crear un nuevo sitio web, profundiza en el código y descubre cómo se define el tamaño de la fuente. Una tipografía adaptable asegurará que tu sitio sea responsivo.

Pero, si quieres estar preparado para el futuro, opta por las unidades de tamaño de fuente Vh y Vw. Cuando tu web use la tipografía fluida, siempre se verá ordenada y será legible.

Esta es una publicación de invitado por Jarinka Balcova, una comercializadora experimentada y entusiasta de WordPress en Ait-Themes.club. Ait Themes es una empresa desarrolladora web con más de 9 años de experiencia en el mercado y 85k clientes satisfechos en todo el mundo. Su principal nicho son los temas multilingües de WordPress. También se especializan en temas de directorios y listados de WordPress y plugins avanzados.