Al navegar por la web, es posible que hayas visto sitios con tipografías que se ajustan de maravilla al cambiar el tamaño de la ventana del navegador, o secciones a pantalla completa que mantienen su formato sin importar lo grande que sea el área de visualización.
Aquí tienes algunos ejemplos de CodePen:
Aquí tienes un ejemplo sencillo que creé en Webflow: http://vh-and-vw.webflow.io/
La forma "de la vieja escuela" de definir tamaños de elementos y fuentes era mediante anchos y alturas basados en píxeles. Intenta usar píxeles hoy en día y verás cómo más de uno niega con la cabeza.
Los dispositivos modernos tienen tal variedad de tamaños de pantalla que es fundamental diseñar cada estructura web pensando en la máxima flexibilidad. Del mismo modo, un simple cambio de tamaño de ventana no debería dejar al usuario desconcertado con un texto ilegible. Los usuarios esperan cada vez más que los sitios web no solo funcionen bien, sino que ofrezcan una experiencia estética impecable en cualquier dispositivo. Una tipografía que se escala con elegancia es una forma de brindar a tus usuarios una experiencia fluida cada vez que visitan tu sitio.
Para lograr una verdadera adaptabilidad, debes dejar de pensar en unidades de medida fijas o absolutas. Cambiar a unidades relativas para definir longitudes y usar ajustes de estilo vh y vw te permite controlar el ancho y el alto de los elementos sin importar el tamaño de la pantalla.
También puedes usar unidades basadas en porcentajes, pero recuerda que estas dependen del elemento padre, mientras que las unidades vh y vw se basan en el área de visualización.
Las unidades vh y vw son ideales para el diseño adaptable porque son totalmente independientes del tamaño de fuente base.
Definición de vh y vw
vw y vh son unidades de longitud que representan el 1% del tamaño del área de visualización para el ancho (vw) y la altura (vh), respectivamente.
¿Te preguntas qué navegadores admiten vh y vw? La compatibilidad es bastante buena: todas las versiones principales más recientes son compatibles. ¡Consulta can I use? para ver lo último!
vh y vw en acción
Puedes lograr tamaños de tipografía basados en vh y vw fácilmente en Webflow. Para usar estos valores, solo escribe "Nvh" o "Nvw" (donde "N" representa el porcentaje del área de visualización que deseas cubrir) en cualquier campo de ancho o altura.
Así, para cubrir el 100% del área de visualización, establecerías 100% para el ancho y 100vh para la altura. Para cubrir la mitad de la altura, establecerías una altura de 50vh. Quizás te preguntes, ¿por qué no usar 100vw para el ancho? La respuesta es que el estilo vw no tiene en cuenta el ancho de la barra de desplazamiento, lo que podría causar un desplazamiento lateral en navegadores con barras anchas, como Internet Explorer.
Tipografía adaptable con vh y vw
También puedes usar vh y vw como tamaños de fuente para que el texto se escale con el tamaño de la ventana del navegador. Es una forma fantástica de mantener el contenido con el tamaño justo, sin importar las dimensiones de la ventana o la pantalla.
¿Ya estás usando vh o vw?
Si es así, ¡nos encantaría ver lo que has hecho! Comparte tus enlaces aquí abajo, en Twitter o en Facebook.
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
