it-swarm-es.com

¿Cómo elige una fuente para un espacio extremadamente limitado, es decir, que se ajuste al texto más LEÍBLE en el espacio más pequeño?

A menudo tengo un espacio muy limitado al crear informes y paneles para los usuarios. Usualmente uso Arial o Arial Narrow, pero la interfaz de usuario no es mi área de especialización, por lo que quiero saber, ¿cómo se determina una fuente óptima para ajustar el texto más legible en el espacio más pequeño?

Aquí hay un ejemplo: tenga en cuenta que este es solo un ejemplo, ya que hay muchas veces que el espacio es limitado, como cuando necesita exprimir un millón de columnas en un informe, etc.

Chart with limited space

114
richard

Realmente depende de muchos factores, como cuál es el frecuencia de ciertos caracteres que espera y qué fuentes están disponibles para usted.

Hice un rudimentario al crear un programa que recorría todas las fuentes disponibles que había instalado en mi caja de Windows en ese momento e imprimía una línea que contenía cada carácter ascii imprimible en la pantalla en cada una de estas fuentes. Repetí la prueba también con diferentes tamaños de fuente.

Los resultados, según los recuerdo, fueron que Segoe UI y Tahoma fueron los mejores con respecto a la utilización del espacio y la legibilidad para fines de IU en tamaños de 10pt y 9pt. En el corto plazo, nos instalamos en Tahoma ya que la interfaz de usuario de Segoe no está disponible de forma gratuita para sistemas operativos por debajo de Windows Vista. Si no necesita admitir Windows XP o anterior un sistema operativo Windows u otro sistema operativo que no sea Windows, entonces definitivamente usaría la interfaz de usuario de Segoe, de lo contrario, usaría Tahoma si está disponible y si todo de lo contrario, pruebe Verdana. Consulte esta lista para obtener una lista de las fuentes de Windows disponibles, así como información sobre el mejor uso de cada una.

Tenga en cuenta también que, a partir de Windows Vista, creo, Microsoft ahora recomienda usar una fuente de 9 puntos en lugar de una fuente de 10 puntos para los elementos de la interfaz de usuario, ya que la fuente de la interfaz de usuario de Sego se muestra mucho más clara que otras fuentes a bajas resoluciones, especialmente en pantallas planas.

Dependiendo de la plataforma para la que esté desarrollando, es posible que también desee modificar la métrica de la fuente si es posible. En .NET con WPF, recuerdo que hay muchas maneras de modificar cómo se representa el texto para permitir condensar el espacio entre los caracteres y hacer que los caracteres individuales sean más estrechos. Usando este tipo de técnica, puede seguir con la fuente que desee y simplemente ajustar su representación para obtener los resultados que necesita.

Con respecto a su gráfico de ejemplo específico que proporcionó: para este gráfico en particular, recomendaría pivotarlo para que el texto que sea más probable que se lea sea horizontal para una lectura más natural. También colocaría el número de modo que esté dentro de cada barra del gráfico de barras cuando se ajuste con un color que se destaque contra el color de fondo que haya, aumentando así el espacio para otras cosas como las etiquetas. Diseñar el gráfico de barras como filas facilitaría la lectura y la impresión en varias páginas si fuera necesario. Si no es posible un diseño de fila, entonces crear una clave separada para cada elemento en el gráfico probablemente sería razonable y de esa manera cada barra podría colocarse más cerca para ahorrar espacio. La clave permitiría etiquetar cada barra como A, B, C ... o 01, 02, 03 ... por ejemplo, y la clave (dispuesta en filas en otro lugar) proporcionaría información más detallada sobre cada una.

Recuerde, un cuadro o diagrama es principalmente útil para obtener información visual rápida. Si se convierte en una carga demasiado pesada para el usuario/lector, probablemente sea mejor simplificarlo, consolidar algunos de los detalles del gráfico o simplemente proporcionar más datos sin procesar en una forma más tabular.

Aquí hay una lista simple que muestra las fuentes Arial, Segoe UI y Tahoma en varios tamaños. Observe que el espacio relativo ocupado por cada fuente es diferente en diferentes tamaños de punto. enter image description here

Actualización: He agregado otra comparación a continuación que muestra una lista más completa de caracteres comunes, incluyendo mayúsculas y minúsculas en cada una de las fuentes mencionadas anteriormente con la adición de Verdana y MS Sans Serif (fuente de IU predeterminada en Windows anterior a Windows 2000). Desafortunadamente y en respuesta a la recomendación de bobsoap para usar Verdana, está bastante claro que Verdana es la peor en comparación con las otras fuentes en 9pt, aunque tenga en cuenta que esto puede no ser cierto para otros tamaños de punto. Además, el tamaño no siempre es necesariamente el detalle más importante, a veces es más importante que una fuente sea legible en tamaños pequeños que si es más compacta en relación con otra fuente.

enter image description here

94
jpierson

Lo estás haciendo mal.

En general, hay una "otra forma". Las respuestas a esta pregunta son geniales, pero, sinceramente, debe considerar todas las opciones diferentes. Apretar la mayor cantidad de texto en el menor espacio posible siempre significa que ha fallado una elección de diseño anterior.

  • Quizás debiste haberlas volteado para que fueran barras horizontales, dándote MUCHO más espacio para trabajar.
  • Quizás no debería haber ido con un gráfico de barras, o no debería haber ido con gráficos en primer lugar.
  • Quizás el problema sea la información real, ¡y es posible que haya tenido que dividirla aún más!
  • Una barra lateral o leyenda/índice podría ayudar
  • Los elementos emergentes pueden funcionar para la versión en línea

Hay tantas opciones, asegúrese de usar la correcta. Comprimir tanta información en un área pequeña como sea posible es siempre el camino equivocado. La información necesita espacio para respirar, ser legible, ser escaneable y reconocible.

Sí, esto generalmente significa usar mucho más espacio. Pero eso no es malo. A la persona que consume los datos le tomará menos esfuerzo escanear rápidamente un par de páginas llenas de información bien estructurada, que averiguar qué significa esa barra en ese informe de una página. Piense en el viejo miembro de la junta, que se guardó los anteojos mientras le pasaba el periódico a la persona a su lado: "No puedo leer esto, ¿qué dice?"

Disculpas por la dureza y el ligero título irónico, pero veo esa respuesta superior y siento que la parte "necesita un enfoque diferente" necesitaba más elaboración.

. edit:

Dado que esta es una respuesta muy controvertida y bastante conflictiva con la pregunta original, creo que debería elaborar el razonamiento detrás de publicarla.

En primer lugar: esta no es una pregunta de UX, es una pregunta de diseño gráfico o tipografía.

Hay suposiciones en esta pregunta, la más importante es que la "solución correcta" para este problema de UX es un texto pequeño. Pero no lo es. El texto pequeño se vuelve ilegible, un problema agravado por las tabletas y otros dispositivos móviles. ¿Qué pasa si su usuario tiene mala vista? ¿Qué sucede si se muestra en un monitor antiguo de baja resolución? ¿Qué pasa si hay resplandor del sol o una luz? Tantas razones por las que el texto pequeño puede ser ilegible.

Como tal, esta respuesta está aquí para ayudar a la siguiente persona que tiene este problema a tener en cuenta de no cometer el mismo error.

... habiendo dicho eso, aprecio totalmente que la persona que hace la pregunta simplemente no tenga recursos para nada más que un cambio de fuente :) ¡Todos hemos estado allí, y todos estaremos allí nuevamente!

TLDR: Traté esta pregunta de la forma en que Henry Ford trató la llamada de caballos más rápidos. (Descargo de responsabilidad: no soy Henry Ford)

44
Dirk v B

Coda

A veces, una fuente más pequeña es una buena manera de salir de un aprieto. En este caso particular, al menos para la parte del problema que se muestra, hay una mejor solución que es más clara y ocupa la mitad del espacio, de esta manera:

Lastname, Firstname

Estoy usando una fuente lo suficientemente grande, 18pt Tahoma (imagen abierta en una nueva pestaña para ver a tamaño completo), que el espacio de letras negativo está bien.

24
James Crook

Suponiendo que se refiere al uso en pantalla en una pantalla convencional (~ 96 DPI) en lugar de algo así como una pantalla Retina, y tiene un sistema con suavizado de subpíxeles, lo que está buscando es una fuente con píxeles increíbles insinuando . La sugerencia es el arte de tomar las curvas vectoriales diseñadas para el uso de impresión y personalizar su forma para diferentes tamaños de puntos, generalmente para alinear las partes principales del tipo de letra con la cuadrícula de píxeles. Se trata de hacer compromisos entre cómo debería verse la fuente (su carácter si lo desea) con la cuadrícula de píxeles rígida e implacable. Esos compromisos se vuelven progresivamente más severos cuanto más pequeño se vuelve, ya que la cuadrícula de píxeles proporciona sucesivamente menos píxeles para completar.

Muchas fuentes se han diseñado explícitamente para su uso en pantallas de computadora (generalmente denominadas fuentes de pantalla ). El conjunto de tipografías de Matthew Carter; Verdana , Tahoma , Georgia et al son excelentes ejemplos; fueron diseñados desde el principio con la cuadrícula de píxeles en mente. Eso los hace intrínsecamente buenos para usar en tamaños más pequeños (pero generalmente los hace parecer un poco incómodos en la impresión).

En general, en tamaños de puntos pequeños (recordando los tamaños de puntos se refieren a altura), recomendaría Verdana porque tiene a muy alto altura x que proporciona ancho abierto contadores. Eso lo hará más ancho que algunas otras fuentes, que no es lo que está buscando (según sus ejemplos).

Fuentes como Segoe UI , Tahoma y MS Sans Serif están diseñados como fuentes de pantalla versátiles (siendo los tipos de letra predeterminados para Windows Vista/7, Windows XP y versiones anteriores de Windows respectivamente) , por lo que son buenas opciones generales (con Segoe UI siendo la única diseñada con sugerencias de subpíxeles en mente y siendo la opción más moderna).

Hay dos factores que también deben considerarse al seleccionar una fuente; Si está ejecutando el tipo verticalmente, el antialiasing subpíxel es naturalmente diferente y, en general, la sugerencia de píxeles comienza a verse un poco peor (ya que es probable que los diseñadores de tipos no hayan probado sus caras verticalmente). Si está ejecutando las fuentes en diagonal o no en la cuadrícula de píxeles, las sugerencias de píxeles se eliminan por la ventana.

Para una explicación muy detallada de sugerencias de píxeles, rasterización y todo eso, no hay mejor referencia que este increíble sitio .

Si hay algún interés, agregaré uno o dos párrafos sobre las opciones de impresión para tipos muy pequeños, pero no hay mucho que pueda agregar más allá de este artículo increíblemente bueno .

15
Kit Grose

Es importante especificar qué dimensión está tratando de optimizar. ¿Está buscando reducir el tamaño horizontalmente (líneas más cortas) o también verticalmente? Si está buscando optimizar el ancho horizontal, debería estar buscando una tipografía condensada. Arial Narrow y Helvetica Condensed son dos opciones obvias, pero no las encuentro muy legibles y parecen baratas.

Para sans-serifs similares a Arial/Helvetica, pero más estrechas, eche un vistazo a:

Myriad Pro, Open Sans, Segoe UI, Tahoma, Frutiger, Bell Gothic, Lato, Antique Olive y la nueva fuente de Adobe Source Sans Pro.

En una comparación que hice con los números, encontré que Myriad Pro, Source Sans Pro, Segoe UI y Tahoma son los mejores para la legibilidad con un ancho mínimo de 9px-11px. Tenga en cuenta que estas fuentes manejan los tamaños de manera muy diferente, por lo que a menudo es necesario incorporar un desplazamiento de tamaño para hacer una comparación justa.

Lato también puede funcionar bien. Asana usa Proxima Nova, que es muy abierto y legible en tamaños pequeños, pero no se ve muy bien en un tamaño más grande a medida que lo usan.

Aquí está la comparación que hice con todo a 10px. Sin embargo, es mejor jugar así, ya que cambiar el tamaño de fuente a menudo tiene un efecto no lineal en estos tamaños pequeños.

font comparison at 10px

Otros han mencionado a Verdana. Verdana es muy legible en tamaños pequeños, pero no optimiza el ancho en absoluto. Dicho esto, un tipo de letra ancho que es legible en tamaños pequeños optimiza la altura en lugar del ancho, y tal vez esto es lo que está buscando, pero en la web donde el desplazamiento vertical es más natural que el desplazamiento horizontal, este no suele ser el caso .

Mi preferencia personal es para Arial en pantalla y si busco un aspecto menos neutral o si necesito optimizar el ancho, podría mirar Source Sans Pro o Segoe UI.

9
terrace

Siempre me ha encantado Segoe UI, pero recientemente tuve que admitir que Arial es realmente más legible (jadeo) en muchos casos. Si no me cree, compare 12px Arial con 12px Segoe UI en una cuadrícula llena de datos numéricos. Arial parece brillar. Incluso el texto de muestra que se muestra en la respuesta original muestra claramente que Arial es más fácil de leer. Es feo pero más legible. Mucho de esto es solo la sutil diferencia de tamaño.

Además ... Cuando llevas a Segoe a 13px y más, los números realmente comienzan a parecer extraños. En última instancia, la mayoría de las aplicaciones son impulsadas por datos. Crea una grilla llena de datos. Cambia entre los dos y pregunta a algunas personas cuál es más fácil de leer. Hmmm ..

Si está leyendo texto directo (sin números) a 11px, entonces creo que Segoe es más fácil de leer. Pero, quien haya decidido que la interfaz de usuario de Segoe es una fuente más fácil de leer que arial ... Me gustaría ver de dónde obtuvieron estos datos. Le pregunté a varias personas y todos piensan que Arial es más legible para los datos a 12px (9pt) (incluido yo mismo).

También hay muchas intracacies con fuentes con respecto al color de fuente. Segoe se ve mejor un poco más ligero ... (# 333333 o # 212121) generalmente es bueno. Arial parece demasiado difícil de leer en estos colores y generalmente es mejor en negro sólido. La interfaz de usuario de Segoe tiene demasiado contraste y tiende a parecer ocupada con el negro sólido.

Me parece que Arial es más legible que Tahoma personalmente. Si solo estás hablando de legibilidad directa. Tahoma puede verse mejor en una interfaz de Windows, pero eso es algo estético.

El espaciado, el color de fuente y el tamaño de fuente cambian todo. No dejes que nadie te diga Segoe UI es una mejor fuente. Es mejor para ciertos casos, pero no para todos. Sin embargo, seguramente es atractivo.

6
KingOfHypocrites

Different fonts in different sizes

Arial Narrow y Tahoma parecen ser los mejores.

4
Fubz

En mi experiencia, Avenir Next Condensed es maravillosamente claro, aunque todavía ocupa muy poco espacio. En comparación con Arial Narrow, ocupa menos espacio y es más fácil de leer.

Visual comparison of Arial Narrow and Avenir Next Condensed

2
McHobbes

Me encontré con un problema en el que la optimización del espacio de fuentes era un factor importante con algún software que utilizo en Mac (Soundminer, en OS X Mavericks 10.9.5, pero imagino que esto podría ser información útil para otro software de Mac y futuras versiones de OS X también). El programa enumera los metadatos del archivo con filas de altura fija y permite al usuario elegir la altura de la fila y el tamaño de la fuente. Word Wrap es una opción, pero la altura de la fila no se ajustará para ajustar automáticamente el contenido de cada celda.

Después de revisar todos los cientos de fuentes en el sistema, el que se ajustaba a la mayor cantidad de datos de caracteres en la menor cantidad de espacio, mientras era legible era (sorprendentemente) Símbolos de Apple. Con el tamaño de fuente establecido en 12 y una altura de fila de 22, puedo acomodar cómodamente dos filas de texto y más caracteres que con cualquier otra fuente (del mismo tamaño o menor) sin dejar de ser fácil de leer desde una posición de hasta 3 'más o menos desde la pantalla.

Esperemos que esto sea útil para alguien más con el mismo problema (o similar).

2
EarHax

La mayoría de las respuestas aquí deben usarse solo como sugerencias de posibles fuentes para usar. Después de la legibilidad, es cuestión de gustos. (En el comentario que decía que Verdana era claramente la peor opción, me gustó más). A menudo pruebo 8 o 10 fuentes diferentes y luego decido cuál me parece mejor. Una elección también depende del contexto. Estoy seguro de que todos usarían diferentes fuentes para tarjetas de visita para una tienda de lencería y una fábrica de acero. Toda la BS sobre serif y sans serif es una pérdida de tiempo. Solo usa lo que se ve bien, sin importar cuál sea.

Estoy de acuerdo en que el objetivo no debe ser incluir tanta información en el texto como pueda. La mayoría de la gente no lo leerá todo o incluso mucho. Buscarán los puntos clave y, si son de interés, pueden leer las partes restantes o, mejor aún, llamar para obtener más información.

1
c.j.

Arial Narrow. Es curioso, nadie lo mencionó (a simple vista a través de la respuesta). Lo he usado con buenos resultados en todas las aplicaciones de MS. Neeraj.

1
Neeraj

Creo que Verdana es ideal para tamaños de fuente pequeños (no tanto para los más grandes). O, si puedes, puedes usar una fuente de píxeles.

0
bobsoap