¿Por qué la fuente debería ser fluida de todos modos? | Elise Hein | Marzo 2021 – Usabilidad web y seo

¿Por qué la fuente debería ser fluida de todos modos? | Elise Hein | Marzo 2021

Vistas: 78
0 0
Tiempo de lectura:6 Minutos, 11 Segundos

Llamamos al tipo “suave” cuando el texto de la página web se escala para ajustarse a la pantalla sin ningún punto de interrupción. Si usted, como yo, acaba de ponerse al día con todo lo relacionado con la tipografía web en 2021, la parte más emocionante de este concepto parecería ser una gran mejora en la capacidad de mantenimiento.

Los artículos sobre tipografía fluida a menudo introducen este tema, explicando cómo puede reducir la complejidad del estilo¹. Un ejemplo:

Quería reducir la cantidad de consultas de medios, pero mantenerla receptiva. Quería reducir la huella de CSS del sitio. Pero, sobre todo, quería que mi CSS fuera más fácil de mantener. La adición de flexibilidad para los tamaños de fuente, los tamaños de los elementos y el espaciado ayudó a lograr este objetivo. (Kevin Pennekamp, 2020)

Una buena experiencia de desarrollador es valiosa en sí misma. Pero, en comparación con un diseño bien ejecutado basado en puntos de interrupción, ¿cuál es exactamente el impacto en la UX de un tipo completamente fluido?

Nohora“Muchos” es la respuesta corta. Un sistema de tipo fluido implementado cuidadosamente no afectará a los usuarios de ninguna manera significativa, ni positiva ni negativamente. Quizás es por eso que las discusiones sobre la tipografía fluida a menudo simplemente ignoran la legibilidad. Es claro y sencillo, básicamente se trata de la optimización técnica que da.

Dicho esto, incluso si es sutil, no puedo evitar preguntarme cómo la flexibilidad del diseño afecta a las personas y cuánto coincide con nuestras expectativas de uso de la web. Así que aquí están mis pensamientos y conclusiones, algunos específicos derivados del diseño visual y la teoría de la tipografía, así como algunas de mis propias suposiciones (¿salvajes?).

Comencemos por definir el tamaño, y por qué no es lo importante aquí, aparte.

Primero, lo obvio: la tipografía receptiva no se trata tanto del resultado como de hacer lo mismo de una manera ligeramente diferente. Imagine un sitio web basado en puntos de interrupción que muestra texto de 14 píxeles en dispositivos móviles y texto de 22 píxeles en computadoras. Después de deshacerse de sus consultas de medios y escalar suavemente el texto de 14px a 22px, muchas personas seguirán viendo un texto de aproximadamente 14px en dispositivos móviles y 22px en computadoras de escritorio.

Estos son tamaños de pantalla intermedios donde la suavidad importa más. Pero aquí creo que todos pueden estar de acuerdo en que el texto configurado en 17,6 píxeles en una pantalla de 540 píxeles y reducido a 15,2 píxeles en una pantalla de 414 píxeles no es fundamentalmente mejor que mostrar texto de 16 píxeles en ambas. Debemos recordar que el ancho de la pantalla es solo un proxy conveniente para un contexto de visualización mucho más rico e impredecible, que, en este nivel de pequeños ajustes, probablemente anulará todos los esfuerzos para lograr el tamaño ideal.

¿Podemos contar con el contexto? ¿Podemos suponer que todos sostienen su teléfono o tableta a la misma distancia, o que todos los navegadores de escritorio están inclinados sobre la mesa? […] Hasta que las computadoras determinen la distancia de lectura del usuario y escalen la página proporcionalmente (suena como una pesadilla, ¿no?), Tendremos que hacer estas generalizaciones razonables. (Trent Walton, 2012)

Al observar dónde puede fallar el tamaño de fuente flexible, el peligro es que está demasiado anclado a la ventana gráfica, lo que hace que el texto se vuelva demasiado pequeño o demasiado grande con demasiada rapidez. Sin embargo, en 2021, esto dejará de ser un problema. Con las nuevas funciones de CSS, las implementaciones inteligentes evitan el sobreescala simplemente agregando cálculos con pequeños múltiplos de ventana gráfica y limitándolos a un mínimo y un máximo razonables, ¡todo sin dejar de ser accesible!

Un tipo que escala suavemente de 16 a 24 píxeles. Confiable, delgado y asequible. Fuente: Tipografía fluida simplificada.

Por lo tanto, la tipografía receptiva, si se aplica con cuidado, no afecta la legibilidad. Pero tampoco tiene mucha ventaja sobre algunos puntos de interrupción y tamaños de fuente bien elegidos.

Intenté y no pude encontrar muchas áreas específicas donde la tipografía relacionada con la ventana gráfica hace supera el tamaño basado en puntos de interrupción en términos de legibilidad. Aquí hay dos: configurar el texto de la pantalla y mantener constante la longitud de la línea.

  • Mostrar texto. Los elementos de texto grandes, como los títulos o las declaraciones visuales en negrita, se ven más dramáticos cuando se relacionan con el tamaño de la ventana gráfica. Richard Rutter habla de esto maravillosamente cuando dice que “el texto mostrado, determinado por su propósito y tamaño relativo, es el texto que desea visible primero y leer segundo”.

[…] En otras palabras, una imagen de texto. Cuando se trata de imágenes, probablemente esté escalando todas las imágenes de configuración de escena (portadas, imágenes maestras, etc.) en relación con la ventana gráfica. Utilice el mismo enfoque con el texto de visualización: corrija el tamaño y la forma del texto en la pantalla o en la ventana del navegador.

  • Longitud de línea constante. Es ampliamente conocido que existe una longitud de línea óptima (medida en palabras o caracteres) para una lectura cómoda. La longitud de la línea puede ser impredecible con diferentes anchos de pantalla para texto de tamaño estático.

El tamaño relativo a la ventana gráfica resuelve fácilmente ambos problemas 2. Sin embargo, vale la pena señalar que, si bien esta es probablemente la solución obvia para personalizar el texto mostrado (si no se siente cómodo con JavaScript), está lejos de ser la única alternativa para lograr una longitud de línea constante. Además de las viejas consultas de medios para controlar el tamaño de un contenedor de texto³, también puede utilizar ch unidad para indicar max-length para un bloque de texto. En última instancia, tenga en cuenta que en las pantallas hay una gama relativamente amplia de longitudes de línea donde la comodidad de lectura no se ve comprometida o necesariamente ligada al tamaño del texto.

Al diseñar un sitio web receptivo, comience con un tamaño de fuente cómodo y una medida ideal para definir puntos de interrupción. Pero cuando llegue el momento (como siempre), suelte la medida perfecta. (Revista Smashing, 2014)

Permitir que las personas mantengan el control sobre el tamaño de fuente que se muestra en su navegador es uno de los principales requisitos de accesibilidad. Matei Latin ha comparado cuidadosamente los pros y los contras de los diferentes enfoques del tipo flexible en The State of Fluid Web Typography, y muchos de ellos tienen problemas de accesibilidad. Como se mencionó anteriormente, este es un puede hacer que la tipografía flexible sea accesible combinando unidades de ventana con rem o em (preferiblemente rem): esto asegura la escala funcional del texto y la adherencia al tamaño de fuente predeterminado del navegador.

Sin embargo, la forma de pensar del latín me resuena:

No deberíamos centrarnos en asegurarnos de que nuestros tamaños de fuente se adapten bien a cualquier ancho de pantalla. Necesitamos hacer que nuestros textos sean fáciles y agradables de leer para cada uno de nuestros usuarios. Esto significa que dejan parte del control sobre la tipografía web. Por el momento, la tipografía web receptiva se interpone demasiado en esto.

Esto es cierto incluso para el tipo de líquido para el que se proporcionan características especiales. Esto es especialmente cierto cuando los usuarios de computadoras portátiles / de escritorio cambian el tamaño de su navegador; más sobre eso más adelante.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Campos opcionales que debe eliminar en su formulario
Next post Temas populares de Twitter: cómo utilizarlos de forma eficaz

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta