soy Kseso y esto EsCSS

No llamarás "responsive type" al uso de "viewport units" si sabes de lo que hablas

No por cambiar los rems o ems por vw o vh en el tamaño del texto puedes cantar tan alegremente ♪♫ "I´m a responsive type"♫ ♪

No llamarás "responsive type" al uso de "viewport units" si sabes de lo que hablas

·Por Kseso ✎ 4
No llamarás "responsive type" al uso de viewport units si sabes de lo que hablas

De un tiempo a esta parte y cada vez con más frecuencia se está utilizando la expresión responsive type asociada al uso de las unidades relativas al "viewport" para declarar el tamaño de las tipografías o fuentes en la declaración font-size

No son pocos los artículos en los que cuelan la expresión responsive type de forma tan alegre y acrítica. Igual que en demos y ejemplos.

Gran descubrimiento para los "setólogos" del Css. Ya tienen un nuevo especimen para su comercialización. ¡Hurra!

Tras esta introducción ¿necesitas que diga explícitamente qué opino de semejante expresión y de aquellos que como loritos la repiten al tuntún?

Creo que no será necesario. Lo que sí estoy es obligado a exponer las razones de mi discrepancia con la frase e idea del responsive type aplicada cuando sólo se usan dichas unidades.

Será bueno por lo tanto recordar qué son las ya veteranas viewport units y cómo trabajan.

1vw (1 viewport width) es igual al 1% de la anchura de la ventana del navegador o tamaño de la pantalla* en la que se muestra el elemento.

1vh (1 viewport height) lo mismo pero de la altura.

1vmax toma la medida mayor de la ventana (su altura o anchura) como base de cálculo y 1vmin la menor.

* En puridad el viewport es el espacio de representación que crea el documento en el que se encuentra el elemento. Y hago esta puntualización porque no sólo la ventana o pantalla crea al viewport. Hay elementos dentro del documento inicial que crean el suyo propio y por lo tanto el referente para las "VU" no es la pantalla del dispositivo o la ventana del navegador sino las medidas de dicho elemento.

Así, por ejemplo, si tenemos un elemento div dentro de un iframe incluido en un documento Html y al "div" lo dimensionamos con "VU" el cálculo para dibujar al "div" no serán las medidas de la pantalla en la que se muestra el Html si no las del iframe en el que está incluido.

Aclarado lo anterior retomemos el tema principal.

El concepto RWD o de forma acortada y coloquial responsive es algo más que en función del tamaño de la ventana. Esto último es lo que se expresaba con los ya son viejos conceptos adaptable, líquida, porcentual... (no confundir con adaptive).

Yo al menos entiendo la expresión responsive type como aquél texto que no sólo modifica su tamaño (font-size) para ajustarse al tamaño del dispositivo o ventana en el que se muestra. Además de eso, su tamaño, debe mantener "el peso visual" y su relación de aspecto respecto al resto de elementos del documento. Y todo ello sin dejar de ser usable y accesible = legible.

Fíjate qué ocurre al declarar a cualquier elemento textual font-size: 2vw. Por ejemplo a los párrafos:

100vw Tamaño textoLegibilidad
400px ancho8px (400*2/100)Nula. Tamaño considerado insuficiente
800px ancho16px (800*2/100)Legible
1200px ancho24px (1200*2/100)Bueno...
2048px ancho41px (2048*2/100)Gigante
5120px ancho102px (5120*2/100)Un monstruo!!!

Verás que la legibilidad ocurre en un pequeño rango de tamaños. No importa cuantos "vw" declares. El tamaño del texto rápidamente se hará o demasiado pequeño o demasiado grande. La famosa zona Ricitos de Oro es demasiado estrecha.

No importan las particularidades de la familia tipografía usada como su relación de aspecto o su "grosor". Los valores para las propiedades como font-size-adjust font-stretch font-weight... no harán sino desplazar algo los límites de su legibilidad (ambos a la vez).

Tampoco arreglas mucho si usas la función Css calc(vw + vh) para introducir en su argumento varias medidas.

Hace un tiempo publiqué el artículo Textos que llenan el viewport con independencia de su ratio donde puedes ver este comportamiento.

Necesitarás apoyar la declaración font-size hecha en unidades del viewport en varias media queries para limitar el tamaño de los textos, tanto por arriba como por abajo.

Medias queries necesarias mientras Css no disponga de un mecanismo directo para ello, como podrían ser las nuevas propiedades min/max-font-size

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso