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

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

Comentarios: 4

  1. Un artículo que nos lleva desde la imagen bíblica (o psicológica) hasta una metáfora de la exobiología. X)
    Imaginarás, por las veces que hemos conversado sobre estos asuntos, que concuerdo sobre el fondo de estas opiniones. Que pesan no sólo por su origen sino —y sobre todo, como debe ser— por su justificación.
    Es intolerable encontrar a estos charlatanes de feria titulando como Responsive text algo que claramente no lo es.*

    Lamentablemente, la repetición de slogans baratos nos ha acostumbrado a leer y escuchar demasiadas de estas burradas; pero tenemos que rebelarnos, porque quienes las pregonan no siempre lo hacen por ignorancia (¡como si hoy eso fuese una disculpa!) sino para obtener un beneficio a cuenta del rebaño, o de la parvada de pericos que publicitan su negocio.
    Porque estos inventos sirven, tal como explicás, para "demostrar" la idoneidad y los conocimientos actualizados de quienes nada más se preocupan por figurar o destacar, sin mérito, sin preparación o conocimiento previo.

    Hasta hace muy pocos años, las redefiniciones y neologísmos fuera del contexto académico eran llevadas con resignación y entusiasmo por parte de filólogos y etimólogos. Ya no debería ser así (aunque lo del 'entusiasmo' no estaba nada mal). Internet y la globalización nos tendrían que salvar de estas discusiones. Y hasta de que alguna academia de letras termine incorporando un término absurdo con la excusa de la popularidad.

    Me parece que quienes más deberían preocuparse en casos como el que mencionás son los desarrolladores y SEOs. Porque es cierto que estafadores e improvisados hay en todos los gremios, pero los verdaderos profesionales tienen la obligación de mantener "limpia" su ocupación, exponiendo a los que "dicen ser", pero no son.
    Que sí son los primeros en adueñarse de cuanto término venal aparece publicado.

    __________

    *Es cierto, el título en español es un poco más ajustado (valga la redundancia), y muestra que la versión en inglés está más cerca de una broma, una ironía. Y por eso se va a quedar así. Como mucho, ahora que funciona en todos los navegadores, habrá que sacar los signos de exclamación y pregunta para Chrome.

    ResponderEliminar
  2. Bueno, algunos tocamos de oído y eso nos hace llamar a las cosas por distinto nombre del que quizás deberíamos, pero pienso que en su contexto se nos entiende. Gracias a tí ya sé diferenciar lo que es un selector, una regla, una caja y cosas así (las sencillicas), pero todavía me queda.

    Con estos términos que vienen del inglés y que no siempre tienen una traducción simple al español, es fácil que nuestro idioma los enriquezca con palabros diversos... los que cada uno cree oportuno. Supongo que como con el DRAE, a cada uno le llega el momento en que el uso habitual lo convierte en "oficial".

    Ya sé que esto no tiene que ver exactamente con el contenido del post (o entrada) y que aquí realmente se intentó explicar que las tipografías adaptables (este es el término que yo uso normalmente) no se solucionan con el simple uso de las VU, pero quería dejar constancia de que seguimos existiendo los que no dominamos el lenguaje totalmente... el castellano, el inglés, el CSS y otros muchos ;)

    ResponderEliminar
    Respuestas
    1. Como bien apuntas al final, Oloman, no se trata del uso de extrangerismos si no del mal uso de un concepto (responsive) aplicado a una práctica. Expresión y práctica que principalmente he visto en artículos escritos en inglés y que, como con casi todo, también hay quien le ha dado y está dando difusión en español.

      Gracias por la visita ;-)

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap