41 lines
4.4 KiB
Markdown
41 lines
4.4 KiB
Markdown
|
---
|
||
|
|
title: Legibility and Readability
|
||
|
|
localeTitle: Legibilidad y legibilidad
|
||
|
|
---
|
||
|
|
## Legibilidad y legibilidad
|
||
|
|
|
||
|
|
### Legibilidad
|
||
|
|
|
||
|
|
**Legibilidad** significa poder diferenciar diferentes caracteres en un texto. El texto legible implica que puede ser fácilmente interpretado. Observe las características únicas de un tipo de letra al considerar la legibilidad. Algunas de las consideraciones son las siguientes:
|
||
|
|
|
||
|
|
* Debe usar cada tipo de letra según el _contexto y el uso previsto_ . Mira en su historia y es el mejor uso de los escenarios de casos. Por ejemplo: Garamond se utiliza mejor para grandes cuerpos de texto impreso mientras que Georgia para la pantalla.
|
||
|
|
* Tenga en cuenta si el tipo de letra es para _mostrar texto o texto de cuerpo_ .
|
||
|
|
* La altura x de un tipo de letra es el tamaño de la 'x' minúscula en un tipo de letra. Una tipografía con _altura media a alta_ da como resultado un texto legible incluso en tamaños pequeños.
|
||
|
|
* Convencionalmente, los **tipos de** letra **serif** son más legibles para el texto del cuerpo que sus homólogos sans-serif.
|
||
|
|
|
||
|
|
### Legibilidad
|
||
|
|
|
||
|
|
**La legibilidad** significa organizar un grupo de palabras o bloques de texto para que el texto sea más accesible. La idea es reducir la cantidad de esfuerzo requerido para leer un cuerpo de texto.
|
||
|
|
|
||
|
|
Stephen Coles comenta que la legibilidad, no solo plantea la pregunta "¿Puedes leerlo?" pero si **"quieres leerlo?"** .
|
||
|
|
|
||
|
|
Jason Santa Maria señala en su libro _On Web Typography_ que la lectura no es una actividad lineal. Leemos en un movimiento de ida y vuelta llamado **saccades** , que es nuestros ojos saltando de un punto a otro. Además, el texto con palabras familiares nos facilita la lectura. Algunos puntos básicos para recordar al considerar la legibilidad son los siguientes:
|
||
|
|
|
||
|
|
* **Contraste se** refiere al cambio en el grosor del trazo en diferentes partes de la letra. Cuanto mayor sea el contraste, mayor será el cambio en el trazo. Utilice tipos de letra de contraste medio a bajo para cuerpos de texto largos.
|
||
|
|
|
||
|
|
* **Altura de línea se** refiere a la distancia entre dos líneas de texto. No desea que el bloque de texto sea demasiado ajustado ni demasiado flojo. Puede controlar la altura de línea en CSS por la propiedad 'line-height'. Para la mayoría de los textos, puede configurarlo entre 1.2 a 1.5 (sin unidades).
|
||
|
|
|
||
|
|
* **La longitud de línea** (medida) se refiere al número promedio de caracteres en una línea de texto. Una longitud de línea grande dificulta la legibilidad al dificultar que nuestros ojos escaneen el texto. Por lo general, alrededor de 45-75 caracteres por línea es óptimo para un cuerpo de texto. Si planea aumentar la longitud de la línea más allá de eso, entonces también tenga cuidado de aumentar la altura de la línea para que haya suficiente espacio entre dos líneas de texto. En CSS, puede establecer el ancho del contenedor, y al usar la unidad em, puede acercarse a un número determinado de caracteres, dependiendo de la relación ancho-alto-alto de la fuente. Ejemplo: ancho: 35em;
|
||
|
|
|
||
|
|
* **El seguimiento se** refiere a ajustar el espacio entre los caracteres de un texto. Agregar seguimiento significa agregar espacios en blanco entre los caracteres y viceversa. Con tamaños de letra pequeños, es decir, menos de 10pts, agregar seguimiento ayuda a mejorar la legibilidad. De manera similar, para títulos grandes, use el seguimiento negativo para acercar las letras. Puede controlar el seguimiento en CSS a través de la propiedad 'interlineado'. Por ejemplo: espaciado de letras: 0.05em;
|
||
|
|
|
||
|
|
* **Tamaño de fuente se** refiere al tamaño de la fuente utilizada en un texto. Para pantallas móviles, use tamaños de al menos 12px. Puede controlar el tamaño de fuente en CSS a través de la propiedad 'tamaño de fuente'. Ejemplo: font-size: 48px;
|
||
|
|
|
||
|
|
|
||
|
|
Como puede ver, debe tener en cuenta muchos factores para garantizar una legibilidad y legibilidad óptimas. Recuerde, no hay reglas duras y rápidas para ninguno de los factores descritos anteriormente. Son meras pautas que podrían ayudarlo a entrenar mejor su ojo tipográfico.
|
||
|
|
|
||
|
|
### Enlaces adicionales:
|
||
|
|
|
||
|
|
* [Tipografía práctica](https://practicaltypography.com) para los fundamentos de la tipografía.
|
||
|
|
* [Diseño web Tutsplus](https://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211) - Un artículo sobre legibilidad y legibilidad
|
||
|
|
* [On Web Typography](https://abookapart.com/products/on-web-typography) - Un libro sobre tipografía en la Web.
|