Tipografia fluida

Cuando el término capacidad de respuesta entró por primera vez en el vocabulario de los especialistas en marketing y diseñadores web, lo usamos para describir el futuro del diseño de correo electrónico y sitios web. Los diseñadores web en particular se enfrentaron a un gran desafío: crear sitios web que brindaran a los usuarios de dispositivos móviles, tabletas y computadoras de escritorio un sitio web que no solo se ajustara a sus pantallas, sino que también brindara una experiencia agradable.

La capacidad de respuesta no es una tendencia nueva, pero es muy importante. La experiencia del usuario es un factor principal en la forma en que Google califica su sitio y si aparecerá o no en los resultados de búsqueda. Es muy importante para Google que brinden un servicio de consulta gratuito.

Incluso para aquellos que se han esforzado por hacer que sus sitios web respondan, aún queda trabajo por hacer para brindar 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 dijo 'responsivo en todos los dispositivos', probablemente se refería a 3 dispositivos:

• Escritorio
• Tableta
• Smartphone

Si bien estos son los 3 tipos de dispositivos más comúnmente descritos, debemos tener en cuenta que los visitantes de nuestro sitio web pueden estar viendo nuestro sitio en una amplia variedad de tamaños de pantalla, desde grandes Apple Mac hasta computadoras portátiles livianas con pantallas más pequeñas. La tecnología continúa avanzando y debemos estar preparados para tipos de dispositivos nuevos y emocionantes, como la tecnología portátil y la realidad virtual.

Centrémonos en un elemento del diseño receptivo: el texto. A medida que cambia de un dispositivo a otro, el tamaño de fuente en el sitio web debe cambiar. Pero, ¿cómo lo logras? Simple: al codificar el sitio web, define diferentes tamaños de fuente en píxeles (px) para diferentes tamaños de pantalla.

Cuando abra el sitio web en su tableta de 9 pulgadas, el tamaño de fuente saltará a un tamaño más pequeño.

Pero, ¿qué pasa con las tabletas de 7'' o 12''? ¿El tamaño de fuente seguirá siendo el mismo? Aquí nos acercamos al concepto de tipografía fluida .

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

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

De hecho, sería una locura si alguien intentara hacerlo. Es por eso que algunas mentes inteligentes idearon una tipografía fluida , para que las fuentes puedan cambiar de tamaño por sí solas. ¿Cómo? Al definir el tamaño de fuente relativo en función del tamaño real de la pantalla.

En lugar de definir el tamaño de fuente exacto, puede usar unidades REM, que son relativas al tamaño de fuente del elemento raíz (suena complicado, pero tenga paciencia con nosotros, trataremos de no ponerlo a dormir (¿pequeño juego de palabras REM? No. Bien) sigamos adelante).

La mayoría de los navegadores tienen un valor predeterminado de tamaño de fuente de 16 px para que podamos leer el texto fácilmente. Entonces, si usa REM, si desea tener una fuente de 16px en su sitio web, diga que su tamaño de fuente es 1rem. También puede usar esto para cambiar el tamaño de fuente relativamente, por ejemplo, 0,75 rem (12 px) o un tamaño mayor o 1,25 rem (20 px), etc.

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

Las unidades REM y EM se utilizan a menudo en la tipografía de salto. Puede crear sitios web agradables y receptivos con ellos, pero la transición de un tamaño de fuente más pequeño a uno más grande (y viceversa) no será tan fácil como podría ser con unidades aún más relativas como Vh y Vw.

Vh representa la altura de la ventana gráfica y Vw el ancho de la ventana gráfica. Entonces, en lugar de mirar el tamaño de fuente raíz en el navegador como lo haría en 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á mostrando su sitio web. ¡Ahora esto es un hocus pocus al estilo de la IA de altro nivel!

Para usar Vh y Vw, solo necesita definir el tamaño de fuente más grande y más pequeño que desea para asegurarse de que la fuente sea fácil de leer en todos los casos y obtenga un sitio web con una tipografía realmente fluida. Ta-da! Visitantes felices del sitio web. Además, te verás como un genio optimizador de sitios web preparado para el futuro.

Entonces, si está a punto de crear un nuevo sitio web, profundice en el código y descubra cómo se define el tamaño de fuente. La tipografía de salto se asegurará de que su sitio responda.

Pero, si desea prepararse para el futuro, opte por las unidades de tamaño de fuente Vh y Vw. Cuando su sitio web utiliza la tipografía fluida, siempre se verá ordenado y será legible.

Esta es una publicación invitada de JarinkaBalcova, comercializadora experimentada y entusiasta de WordPress en Ait-Themes.club . Ait Themes es una empresa de desarrollo web con más de 9 años de experiencia en el mercado y 85 000 clientes satisfechos en todo el mundo. El nicho principal son los temas multilingües de WordPress. Especializado también en directorios y listados temas de WordPress y complementos avanzados.