A diferencia de la tipografía “responsive” que cambia solo con los breakpoints, la tipografía fluida cambia de tamaño adaptándose al ancho del dispositivo. Es una opción intuitiva para web en la que hay un gran número de tamaños de pantalla.

Viewport: es el área visible del usuario de una página web.

 

Primeros pasos

Las unidades viewport son las que hacen que la tipografía fluida sea posible, se refieren a un porcentaje de las dimensiones viewport del navegador. Por ejemplo, 1 viewport (vw) es igual al 1 % del ancho del viewport. Se diferencian de los porcentajes porque siempre están en relación con el área de visualización, mientras que los porcentajes son relativos al contenedor principal del elemento.

Esto significa que a diferencia de todos los otros tipos de unidades, las unidades viewport no están de ninguna manera relacionadas con el tamaño de la fuente base.

Hay cuatro unidades de viewport disponibles:

• vw : Ancho viewport

• vh : Altura viewport

• vmin : Valor mínimo del ancho y altura del viewport  

• vmax : Valor máximo del ancho y altura del viewport

La forma más fácil para comenzar a usar tipografías fluidas es establecer font-size en el elemento html para hacer una unidad fluida:

html { font-size : 2vw ; }

En este ejemplo, hemos puesto el elemento de raíz a 2vw. Por lo tanto, cambiamos "la raíz em". Como las unidades em y rem están directamente o indirectamente relacionados con la raíz em, ahora también serán fluidas.

h1 { font-size : 2em ; }

Un tamaño de encabezado de 2em es ahora equivalente a 4vw porque este es el doble del tamaño de la fuente actual de 2vw .

Control de mínimos y máximos

Debido a que las unidades viewport son relativas al acceso visual, en pantallas muy pequeñas, se puede terminar con tamaños de fuente muy pequeños.

Lo ideal sería poder fijar un tamaño mínimo de letra, pero aún no tenemos min-font-size como propiedad de CSS, sin embargo, podemos lograr el mismo resultado de otras maneras.

En primer lugar, podemos utilizar un calc() la expresión:

html { font-size : Calc ( 1em + 1vw ) ; }

Por ejemplo, con un viewport de 0, el font-size sería exactamente 1em . A medida que se hace más grande la pantalla, el valor de 1vw se añadiría al tamaño de letra mínimo de 1em . Aunque esta técnica no siempre es la ideal; a menudo queremos establecer un tamaño mínimo de letra en un tamaño de pantalla que no sea cero y esto lo podemos hacer usando media queries:

@media screen and (min-width: 50em) {

 html {
   font-size: 2vw;
 }
}

En este ejemplo, el tamaño de fuente se convierte en fluido una vez que el viewport alcanza un ancho de 50em. Esto funciona, pero significa un salto entre los valores fijos y fluidos. Para eliminar esto, podemos calcular el punto exacto en el que el valor de fluido coincida con el valor fijo y establecer un breakpoint en el tamaño del viewport.

Si el tamaño de la fuente por defecto es de 16 píxeles y si 2vw es 2% del ancho de la ventana, entonces el cálculo para la elaboración del breakpoint sería 16 ÷ (2 ÷ 100) . Esto nos da 800 píxeles.

Como queremos utilizar em para las media queries, vamos a convertir los píxeles a ems. Vamos a dividir 800 por 16 (o lo que sea la raíz em en píxeles): 800 ÷ 16 = 50 . Si  resulta más fácil, podemos hacer el cálculo en ems: 1 ÷ (2 ÷ 100) = 50 . como se puede ver en el ejemplo anterior, mediante el establecimiento de un tamaño de fuente de 2vw y un breakpoint de 50em , obtenemos una transición sin problemas entre los valores fijos y fluidos.

Podemos utilizar el mismo cálculo para elaborar un tamaño máximo de fuente. Si quisiéramos un tamaño máximo de fuente de 24 píxeles, podríamos calcular de este modo: 24 ÷ (2 ÷ 100) = 1200px . En ems, que sería: 1.5 ÷ (2 ÷ 100) = 75 . Entonces, por encima de 75 em, se restablecerárestablecería el tamaño de la fuente a un valor fijo.

@media screen and (min-width: 75em) {

 html {
   font-size: 1.5em;
 }
}

Longitud de línea

En el libro Los elementos de estilo tipográfico de Robert Bringhurst, se sugiere que una longitud de línea cómoda para la lectura, está entre 45 a 75 caracteres. Considerando una línea de 66 caracteres el ideal.

La misma regla se puede aplicar a la tipografía fluída. Hay que tener en cuenta que tener una longitud de línea ideal es un procedimiento práctico en pantallas muy pequeñas. Al llegar a un punto en que la reducción del tamaño de la fuente  manteniendo una longitud de lectura "ideal" perjudica la legibilidad, debemos establecer el ancho del contenedor para dispositivos móviles.

Tips para implementar tipografías fluidas

• No olvidar declarar un tamaño de fuente predeterminado antes de implementar una técnica de fluidos. Esto se utilizará por defecto en los navegadores que no soportan unidades de fluidos.
• Escoger con cuidado la escala y los tamaños de fuente mínimos y máximos.
• Usar unidades em para los tamaños de fuente. Si no se necesita tipografía fluida en un contenedor en particular, como la navegación, es mejor poner el tamaño de fuente del contenedor en un valor fijo. Los valores em en este contenedor estarán en relación con el valor fijo.
• Buscar una longitud de línea ideal para móvil y tablet primero que para desktop.