Tipografía fluida: comprender qué es, por qué y cómo usarla
Publicado: 2022-10-26La tipografía receptiva se ha vuelto cada vez más importante a medida que aumenta la variabilidad en los tamaños de pantalla. Pero las técnicas tradicionales de diseño receptivo tienen sus límites, lo que lleva a más personas a implementar una tipografía fluida en sus sitios web.
En esta publicación, examinamos la tipografía fluida, cómo funciona y cómo se implementa en WordPress.
¿Qué es la tipografía fluida?
La tipografía fluida es una técnica de tipografía receptiva en la que el texto se escala automáticamente con el tamaño de la pantalla. A medida que aumenta el tamaño de la pantalla, aumentan los valores tipográficos, como el tamaño de fuente, la altura de línea y el espaciado entre letras. De manera similar, los valores disminuyen cuando el tamaño de la pantalla se hace más pequeño.
Tipografía fluida frente a tipografía receptiva tradicional
Tradicionalmente, los diseñadores utilizan puntos de interrupción para determinar el tamaño de la fuente. Por ejemplo, un sitio web puede utilizar tres puntos de interrupción: móvil, tableta y escritorio. Los puntos de interrupción no están determinados por el tipo de dispositivo, sino por el ancho del navegador.
El problema con este enfoque es que los tamaños de pantalla varían mucho entre dispositivos. Por lo tanto, los tamaños de pantalla intermedios o cercanos a los puntos de interrupción a menudo pueden presentar desafíos en el diseño. Por ejemplo, una pantalla de tableta ancha que es casi del ancho de un escritorio podría terminar con una tipografía que parece demasiado pequeña.
Para abordar estos desafíos, los diseñadores podrían implementar más puntos de interrupción, pero eso solo conduce a un código más complejo que es difícil de mantener.
Cómo funciona la tipografía fluida
La tipografía fluida comienza con un valor mínimo y lo aumenta a medida que aumenta el ancho de la pantalla, hasta que alcanza un valor máximo establecido. Piense en los valores como los límites de velocidad en una autopista. Tienes que mantener una velocidad mínima de 45 mph. El límite superior es de 65 mph y usted elige su velocidad según el flujo de tráfico.
Función de abrazadera CSS
La tipografía fluida utiliza la función de abrazadera CSS para lograr el escalado automático. La función de abrazadera necesita tres valores: un mínimo, un preferido y un máximo. El valor preferido es un número calculado. La función decide cuál debe ser el valor preferido en relación con el tamaño de la pantalla, manteniéndolo entre el mínimo y el máximo.
Una declaración de abrazadera se ve así:
abrazadera ( Mínimo , Preferido , Máximo );
Veamos cómo funciona eso con el tamaño de fuente:
abrazadera (1,5 rem, 2vw + 1 rem, 2,25 rem);
Observe que estamos usando valores rem para los valores mínimo y máximo. Los valores Rem son más accesibles. Si alguien hace zoom en su navegador para aumentar el tamaño del texto, la tipografía fluida debería ajustarse en consecuencia y mejor que si hubiera especificado los valores en píxeles.
El valor preferido es un cálculo. El "vw" significa ventana gráfica, por lo que 2vw es el 2% del ancho de la ventana gráfica.
Con un tamaño de fuente raíz de 16 px y un ancho de ventana gráfica de 800 px, nuestro tamaño de texto preferido es de 32 píxeles o 2 rem.
800px x .02 = 16 píxeles (o 1 rem)
1 rem + 1 rem = 2 rem (o 32 píxeles)
No te preocupes. No tienes que hacer los cálculos. La función CSS se encarga de ello por ti.
Tampoco tiene que explotar sus habilidades de álgebra al escribir sus hojas de estilo. Considere usar una herramienta como el editor de tipografía fluida moderna para crear la declaración de abrazadera para usted.
El gráfico de la herramienta es una excelente imagen para ver cómo cambia el valor preferido entre los valores mínimo y máximo.
Consideraciones al usar tipografía fluida
La tipografía fluida no está exenta de defectos. Algunos diseñadores afirman que es más problemático de lo que vale la pena configurarlo, ya que puede lograr resultados similares con métodos más tradicionales. Tenga en cuenta estas consideraciones cuando decida si usarlo y cómo usarlo.
Cuándo usar tipografía fluida
La tipografía fluida es excelente para encabezados y texto de visualización. Los tratamientos de texto gigantes que son tanto un elemento de diseño como una copia, son el caso de uso perfecto para la tipografía fluida. Desea que el tamaño y el impacto visual del texto coincidan con el tamaño de la pantalla.
Cuándo no usar tipografía fluida
Por otro lado, la tipografía fluida no funciona tan bien si la diferencia entre los valores mínimo y máximo no es tan grande. Los elementos de texto como el texto del cuerpo, las etiquetas, los nombres de los autores y las fechas de las publicaciones probablemente sean bastante estándar en todos los tamaños de pantalla. Puede manejarlos con CSS tradicional en lugar de implementar la función de abrazadera.
Establezca siempre un valor alternativo
Recuerde, cada vez que use tipografía fluida, incluya siempre un valor alternativo en caso de que el navegador no admita la función de sujeción. Todos los navegadores modernos admiten la función de abrazadera, pero un valor de respaldo brinda seguridad adicional en caso de que todavía haya una resistencia obstinada de Internet Explorer.
Tipografía fluida en WordPress
El soporte de tipografía fluida se agregó en Gutenberg 13.8 y se incluirá en WordPress 6.1 . La función de tipografía fluida desbloquea la capacidad de los autores de temas para definir tamaños de fuente escalables en su archivo theme.json.
Dado que la función aún está en desarrollo, deberá descargar el complemento de Gutenberg para obtener acceso a la versión beta. Puede leer más sobre cómo probar e implementar las nuevas opciones de tipografía fluida en esta publicación del equipo de creación de temas de WordPress .
Implementar una tipografía fluida en WordPress es más fácil a nivel de tema. Si crea su propio tema, descargue el complemento de Gutenberg y comience a probar. Si crear su propio tema o escribir una hoja de estilo de tipografía fluida está un poco más allá de sus habilidades técnicas, no se preocupe. Así como más temas están adoptando bloques y la edición completa del sitio, puede esperar que la tipografía fluida sea parte de los nuevos lanzamientos de temas.
Cree y pruebe nuevos sitios y estilos tipográficos en WordPress
Los diseñadores y desarrolladores web necesitan un espacio para probar nuevas ideas y diseños, como una tipografía fluida. En Pressable, lo entendemos. Es por eso que ofrecemos a todos nuestros clientes sitios de ensayo ilimitados. Crea tantos como necesites para que puedas probar la creación de un nuevo tema o probar las últimas funciones beta en WordPress. Comenzar es simple. Simplemente elija su plan y luego tendrá un sitio con un par de clics.
