¿Hay un tamaño de fuente óptimo?

No existe un tamaño de fuente óptimo. Buscar uno significa que está olvidando algo importante: la legibilidad del texto no es solo un producto de tamaño.

He creado alrededor de una docena de sitios web como diseñador de UI en los últimos cinco años, y todos han tenido audiencias diferentes. Una de las cosas que encontré fue que el tamaño no es el factor más importante. Es una combinación de diferentes aspectos relacionados con la visualización de texto:

• contraste
• familia tipográfica
• altura de la línea
• posición en la página

La combinación de estos conduce a una métrica aproximada para legibilidad general y he encontrado que ese es el objetivo de diseño más importante para el texto.

Como anécdota de las pruebas (ya que usted preguntó): trabajé en un sitio de la comunidad con 700k visitas mensuales donde la audiencia principal eran usuarios no expertos en informática. Utilizamos 12px Verdana para el tipo de cuerpo y 14px-16px Arial para los títulos. Ocasionalmente caeríamos a 11px Verdana en gris para obtener un texto menos importante. Al realizar pruebas de usabilidad en el sitio, recibimos comentarios no sobre el tamaño del texto, sino sobre cómo los colores circundantes del diseño lo hicieron sentir como si estuviera mirando una lámpara. Interpretamos esto como que el sitio es demasiado brillante y ajustamos el contraste de todo el diseño para que sea menos brillante. En parte debido a estos cambios y en parte debido a cambios en la estructura de navegación, vimos un aumento significativo mes a mes en las páginas vistas por visitante.

Una cosa para recordar acerca de los tamaños de fuente pequeños es que tienen un propósito: cuando necesitas que algo sea más pequeño que otra cosa (¡duh!). Pero como diseñador de la interfaz de usuario, es importante recordar que su trabajo es crear claridad y facilidad de uso (entre otras cosas) en la interfaz, y que al desestimar algunos elementos de la IU pueden mejorar su usabilidad. Depende de usted decidir qué elementos deben reducirse y qué aspectos del texto deben modificarse (de mi lista anterior).

12px parece funcionar bien para la mayoría de las personas. Tener algo a 17px hace que sea más difícil de leer, y también lo tiene tener menos de 10px. Creo que 12-13px es una buena guía.

Pero en realidad, debe establecer el tamaño de su texto en algo así como 1em. Esto se debe a que algunos navegadores no permitirán a los usuarios cambiar el tamaño del texto si está configurado en píxeles. No importa qué tamaño de texto tenga, las personas con ojos agudos lo harán más pequeño para que puedan leer más, y las personas con mala vista agrandarán el texto.

Simplemente configure las cosas en 1em y deje que las personas y sus navegadores resuelvan el resto.

Sin embargo, es bueno probar su página con diferentes tamaños de fuente, para ver si el diseño sigue siendo manejable.

Según evidencia científica reciente:

• 18 y 22 puntos conducirán a una legibilidad objetiva significativamente mejorada (medida con un rastreador ocular)
• 10 y 12 puntos conducirán a una comprensión significativamente limitada (medida con preguntas de comprensión)
• cuanto más grande, mejor, porque la legibilidad objetiva mejora continuamente al aumentar el tamaño de la fuente.

No tomes mi palabra por eso. Lea los detalles en artículo científico .

El tamaño de fuente óptimo es individual y lo establece el sistema operativo/navegador de los usuarios. Entonces no lo cambie.

Si necesita ampliar la fuente (por ejemplo, encabezados), hágalo relativamente (por ejemplo, 200% o 2em).

Nunca reduzca el tamaño de fuente y mantenga siempre un buen contraste para mantener la legibilidad.

No.
... ¡no en px, de todos modos.

Las unidades correctas para expresar un tamaño óptimo, si hay una, serían ¡ángulo subtendido en la retina.

Si está mirando px, está viendo solo uno de los tres factores necesarios para determinar la legibilidad¹:

• px

• punto de paso

• distancia de lectura

El paso de punto, o la definición adecuada de "resolución" (píxeles/distancia), es cómo se convierte de px a una distancia real.

Distancia de lectura que necesita, por supuesto, porque los personajes de la misma dimensión no son igualmente legibles en todas partes.

... y, por supuesto, la legibilidad aumenta con:

• px más alto
• tono de punto más alto (o resolución más baja)
• menor distancia de lectura

¹_{También está el color del texto, el color de fondo, la fuente, etc. (el texto en negrita que es negro sobre blanco necesita un tamaño más pequeño que el texto en cursiva que es amarillo sobre naranja), pero px, tono de punto y distancia de lectura cubren lo que necesita una decisión basada únicamente en dimensión.}

No debe intentar establecer un tamaño de fuente. Puede usar + N para indicar "hacer esto más grande que la línea base" (o -N para hacer más pequeño). Cualquier tamaño que especifique será incorrecto en algunas circunstancias; La única opción viable que no requiere que los usuarios tomen medidas correctivas en su sitio es dejar que el navegador decida.

Debería nunca usar píxeles para los tamaños de fuente. Intentar leer fuentes de 14px en una pantalla de 12 "que admita resolución Full HD le dará texto en caracteres de 1-2 mm de alto (y un dolor de cabeza en mucho menos de una hora).

12px está bien, pero lo que también es importante es que los usuarios tengan la capacidad de aumentar el tamaño de fuente ellos mismos y que su sitio no se rompa cuando esto suceda.

Hay algunas publicaciones extrañas y conceptos erróneos en este hilo. Parece que muchas personas quieren ignorar la ciencia y los aspectos bien investigados de cómo leemos y entendemos el texto. De hecho, estoy en el proceso de investigar nuevas normas sobre este mismo tema, así que aquí hay un poco del estado actual de la técnica:

La ciencia del arte

La investigación existente ha definido que la velocidad de lectura óptima para personas con visión normal, con una fuente en contraste máximo, es una altura x entre 0.2 ° y 2 ° de ángulo visual. La altura X es el tamaño vertical real de la x minúscula de una fuente. Obviamente, el tamaño de fuente real variará en función de la distancia de visualización, pero afortunadamente el píxel de referencia CSS - px - se basa en el ángulo visual. Un ángulo visual de 0.2 ° se conoce como el tamaño crítico de impresión, ya que ese es el punto donde se alcanza la velocidad máxima de lectura. (Por encima de 2 °, vuelve a bajar).

Un px es 0.0213 grados o 1.278 minutos de arco. Esto se basa en un dispositivo con una densidad de píxeles de 96 ppp a una distancia de 28 pulgadas. Los fabricantes de dispositivos pueden utilizar el px de referencia para establecer un tamaño basado en la distancia visual prevista/esperada. Esto se discute en los estándares CSS del W3C. Los fabricantes de dispositivos utilizan el px de referencia para establecer el tamaño real de rasterización en función de la distancia de visualización prevista. 16px no necesariamente serán 16 píxeles del dispositivo. En un iPhone con una relación de píxeles 2: 1, sería de 32 píxeles de dispositivo, por ejemplo.

Por lo tanto, el tamaño de impresión crítico para la web es una altura x de 9.4px. Dependiendo del diseño de fuente específico, esto se relaciona con una fuente entre 17px y 20px. Esto dio como resultado estándares de accesibilidad que indican que 18 px es el tamaño de fuente mínimo deseado.

Pero espera hay mas

También hay un nivel crítico ¡contraste. Los tamaños de fuente mencionados anteriormente se refieren a un contraste máximo. Pero ¿qué pasa con los contrastes más bajos? Muchos diseñadores están impactando seriamente la legibilidad de sus sitios al usar colores de bajo contraste. Parte de esto se debe a la falla de WCAG 2.0 en la especificación de contrastes correctos en relación con la frecuencia espacial. 4.5: 1 es más de lo necesario para un título grande y gordo, pero 4.5: 1 es insuficiente para texto pequeño y delgado.

Para personas con visión normal, el contraste crítico podría ser tan bajo como 10% para titulares grandes y gordos en el pico de la función de sensibilidad al contraste. Pero en las frecuencias espaciales muy altas de fuentes pequeñas y delgadas, el contraste debe ser más de 20 veces mayor. Vea el siguiente diagrama, donde todo el texto está en el mismo color CSS (y esto ni siquiera trata sobre la forma en que el antialiasing altera el contraste del texto más allá de todo reconocimiento).

Por lo tanto, el tamaño de fuente junto con el contraste y una serie de otras características de diseño en conjunto proporcionan un texto "más legible". En cualquier caso, un tamaño de fuente de 12px que recomiendan muchos carteles en este hilo es sorprendentemente demasiado pequeño, y nadie sabe con certeza cuál fue la cifra que obtuvieron. Podrías usar algo como 12px para quizás un aviso de copyright o algo que no quieres que nadie lea, pero 12px no es de ninguna manera un tamaño apropiado para el texto del contenido.

Los glifos lo tienen

La recomendación oficial es el tamaño mínimo de 18px, sin embargo, algunas fuentes como Verdana (una fuente diseñada para uso web) pueden funcionar bien hasta 16px. Pero Times New Roman nunca debe establecerse en menos de 18px, ya que tiene una altura x muy pequeña y, en general, poca legibilidad (gracias Microsoft, ugh). Para otra fuente que Microsoft destrozó, tratemos de no usar nunca "Courier New", donde Microsoft tomó lo que era una fuente monoespaciada generalmente legible y luego la hizo demasiado delgada y liviana. ¿Qué estaban pensando?

Para algunas consideraciones generales sobre la elección de la fuente para accesibilidad y legibilidad, tengo este PDF en mi cuenta de Research Gate que puede descargar de forma gratuita: https: //www.researchgate. net/publishing/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

Un comentario de cierre más importante

Más importante que lo que establece como tamaño de fuente, es que permite a los usuarios AMPLIAR el texto al tamaño que deseen sin romper el contenido. El estándar actual especifica un zoom del 200% sin romperse, pero eso es insuficiente. 500% es mucho más razonable desde la perspectiva del usuario.

CONSIDERAR:

20/20 es visión promedio. Los tamaños de fuente que menciono anteriormente (18px) se basan en este usuario promedio de 20/20. 20/40 necesita DOS VECES de ese tamaño para la misma percepción. Los usuarios de 20/200 necesitan DIEZ VECES de ese tamaño (es decir, pueden querer ampliar el 1000%). Menciono el 500% como mínimo, ya que eso considera las implicaciones del hecho de que la página tiene fuentes más grandes y el tamaño físico del dispositivo.

Una tecnología que falta en la investigación en este momento es aumentar las fuentes más pequeñas pero aumentar menos las fuentes más grandes, de modo que los grandes titulares no se vuelvan demasiado grandes para facilitar la lectura.

Mientras tanto, solo considere que una gran parte de las personas que leen su sitio no tienen un monitor tan bueno como el suyo, y no tienen una vista tan buena como la suya. Si desea tener una idea de cómo su sitio podría ser visto por algunos menos afortunados, obtenga un monitor barato, drogadicto, pequeño y de baja resolución (puede tener uno almacenado), y configúrelo a 3 a 4 pies de distancia (es decir, más de un metro de distancia). ¿Puedes leer tu sitio? Ahora amplíe el texto: ¿se rompe su sitio debido a los límites del pequeño monitor?

Este es el tipo de problema que muchos usuarios tienen con muchos sitios. El hecho de que tenga una visión de 20/15 y una hermosa pantalla de retina de 32 "no significa que sus usuarios tengan casi ese nivel de acomodación visual.

-Andy

Estoy de acuerdo con Erik, 16pt parece ser el mejor estándar en cuanto a legibilidad . Lea más aquí: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/