Share
Al utilizar la tipografía en la web, hay muchas cosas que se deben tener en cuenta para crear una página que ofrezca un acceso claro al contenido y lo presente de forma legible. Normalmente esto se puede dividir en dos cubos: Legibilidad y Legibilidad. La legibilidad se refiere a la forma en que las palabras y los bloques de tipo se organizan en una página. La legibilidad se refiere a cómo se diseña una tipografía y qué tan bien se puede distinguir un carácter individual de otro. Por el bien de este artículo, hablaré un poco sobre ambos, sugiriendo algunas técnicas específicas para mejorar su tipografía..
Hablemos de legibilidad primero. Es importante entender qué hace que una tipografía sea más legible que otra. Al elegir un tipo de letra, todo depende de cómo planea usarlo. Hágase algunas preguntas básicas: ¿De qué tamaño se usará el texto? ¿Aparecerá como copia del cuerpo o un titular? ¿Es necesario que sea un caballo de batalla o se usará más como un dulce para los ojos? ¿Será emparejado con otra fuente? ¿La apariencia del tipo de letra complementa el tema??
También es importante tener en cuenta que diferentes tipos de letra fueron diseñados para diferentes usos. Por ejemplo, el Garamond original fue diseñado para ser altamente legible cuando se imprime en un gran cuerpo de texto. Algunos también dicen que fue la fuente más ecológica de su tiempo, conservando el uso de tinta. Bell Centennial es un tipo de letra encargado por AT&T en la década de 1970, diseñado para ser utilizado en directorios telefónicos. Estos directorios se hicieron con papel barato y, por este motivo, Bell Centennial se diseñó de manera que se adaptara a la dispersión de tinta durante el proceso de impresión. En el lado digital, hay fuentes que han sido diseñadas específicamente para la pantalla, como Georgia y Verdana. Azura es una fuente relativamente reciente diseñada específicamente para leer texto en pantalla.
En resumen, es útil conocer el contexto previsto del tipo de letra que está considerando utilizar. Algunas fuentes son bastante flexibles, incluyen varios pesos y pueden usarse de varias maneras. Otros son más limitados, diseñados para ser utilizados muy específicamente.
Esto nos lleva a la primera de algunas cosas para recordar acerca de la legibilidad de un tipo de letra:
Algunos tipos de letra fueron diseñados para ser usados en grandes cantidades, como en los titulares. Por lo general, estos tipos de letra son menos legibles en tamaños más pequeños y no deben utilizarse para copias de cuerpo. Estos se llaman Mostrar caras. El tipo de letra que se muestra a continuación, Knockout, es una de mis caras de pantalla favoritas.
Otros tipos de letra están diseñados específicamente para ser utilizados en grandes áreas de copia de cuerpo más pequeño. Estas se llaman caras de texto o cuerpo..
Hay muchas variaciones en el medio. Por lo general, lo que hago es encontrar una cara que me parece adecuada para la tarea, teniendo en cuenta que planeo emparejarla con otra fuente y probarla. Ya he filtrado todas las fuentes que no creo que sean apropiadas para la tarea, pero si recién está comenzando, es posible que necesite un poco de prueba y error..
Entonces, ¿cuál es más legible: tipografías serif o sans-serif? La historia nos dice que los rostros de serif siempre han sido considerados como más legibles, ya que casi siempre se usaban en forma impresa para grandes pasajes de texto. Las caras de serifas permiten que el ojo fluya más fácilmente sobre el texto, mejorando la velocidad de lectura y disminuyendo la fatiga ocular.
Dicho esto, hay muchas caras sans-serif legibles. En línea, parece que las caras sans-serif se utilizan más que nunca para el texto del cuerpo. Creo que hay varias razones para esto. Las formas de letras más simples parecen funcionar mejor con las tendencias de diseño actuales y pueden sentirse más modernas. Además, normalmente no leemos grandes pasajes de texto en un sitio web, por lo que las fuentes sans-serif funcionan bien en trozos más cortos de copia.
Se debe tener en cuenta que existe un debate sobre este tema: un punto de vista es que las caras de serif no se reducen bien en la pantalla, disminuyendo la legibilidad. Otros creen que no hay diferencia. La posición que siempre tomo es, ¿se siente bien? ¿Leería una sección de tipo configurada como la diseñé??
Otra característica a tener en cuenta es la altura x. Esto normalmente se aplica al uso de tipo en tamaños de texto de cuerpo. La altura x es, bueno, la medida de la altura de la "x" minúscula en una fuente dada. No tiene en cuenta la altura de los ascendentes o descendientes. Tal vez te sorprenda saber cuánta diferencia hay en la altura x de una cara a otra. Cuando se usan pequeños, los tipos de letra con mayores alturas en X suelen ser más legibles.
La legibilidad se trata de organizar palabras y grupos de palabras de manera que los lectores puedan acceder al contenido fácilmente y de una manera que tenga sentido. Es realmente una forma de arte que se perfecciona con el tiempo a medida que se encuentran combinaciones exitosas.
En mi experiencia, este tiende a ser uno de los conceptos más difíciles de entender para desarrolladores y diseñadores principiantes. Incluso los diseñadores experimentados a veces tienen dificultades con la mejor manera de organizar la tipografía en un diseño. Ahora que esas dos designaciones están empezando a fusionarse cuando se trata de diseño web, es importante comenzar a comprender el concepto de legibilidad. Aquí hay algunas cosas a tener en cuenta:
Uno de los "errores" tipográficos más comunes que veo en la web hoy en día es el espaciado incorrecto de los tipos. A lo que me refiero aquí es a las instancias en las que a un texto de bloque no se le da suficiente margen, subtítulos y texto de cuerpo correlacionado que no se agrupan visualmente, y así sucesivamente. El espacio adecuado (combinado con la jerarquía) permite al lector escanear el texto y acceder a él en los puntos deseados.
No es una regla difícil y rápida, pero me parece que la relación entre el espaciado entre párrafos (espaciado adicional colocado antes o después de un párrafo), el espacio alrededor de un bloque de tipo y el espaciado entre letras puede relacionarse proporcionalmente con la línea Altura de un párrafo. La altura de línea se define como la distancia vertical entre líneas de texto. Por ejemplo, si la altura de línea de un párrafo se establece en 2em y un párrafo con el mismo tamaño de texto se establece en 1.5em, el primer párrafo requerirá más espacio entre párrafos y probablemente más margen alrededor de él..
Gran parte de esto se hace a simple vista en lugar de una fórmula exacta, pero utilizo una buena regla general cuando se trata de la relación entre el espacio entre párrafos y la altura de la línea. Normalmente hago el espaciado de mi párrafo (que en la web se traduce en un margen o relleno colocado en la parte superior o inferior de un párrafo) alrededor de la mitad de la altura de la línea. Esto tiende a ayudar a que los pasajes del texto se "mantengan unidos" en lugar de usar un retorno completo y duro entre cada párrafo, creando grandes cantidades de espacio entre párrafos.
Obviamente, se debe tener cuidado para asegurarse de que el texto no se presente demasiado pequeño. También es importante recordar que la edad de su audiencia puede variar, de ahí la calidad de su vista. En general, es bueno permanecer alrededor de 13px o .813em en el más pequeño. Actualmente, con la implementación más amplia de sitios web receptivos, hay una tendencia hacia una copia más grande del cuerpo. En RWD, también es importante tener en cuenta que los diferentes tamaños de texto para diferentes dispositivos pueden tener sentido. Por ejemplo, puede tener sentido aumentar el tamaño de la copia del cuerpo en el ancho de un teléfono móvil en lugar del ancho del escritorio.
Otra práctica común que dificulta la legibilidad del tipo es permitir que las líneas horizontales del tipo en una página se vuelvan demasiado anchas. Esta distancia se conoce como medida (también a veces longitud de línea). Si una línea de tipo es demasiado larga, es una lectura tediosa y un estiramiento para que el ojo del lector vuelva al borde izquierdo del bloque de texto para la siguiente línea. También es intimidante ver un bloque de texto organizado de esta manera y algunos lectores pueden ni siquiera intentar leerlo.
Entonces, ¿cuál es el ancho máximo que debe tener un bloque de texto? Bueno, todo depende del tamaño del texto. Cuanto más grande sea el texto, más larga puede ser la línea (esa proporción completa nuevamente). En mi opinión, generalmente alrededor de 70 caracteres es todo el tiempo que quieras. En promedio, para texto de tamaño de copia de cuerpo, trato de mantenerme dentro de 45em.
El espaciado entre letras (también conocido como seguimiento) es el aumento o disminución constante de la distancia entre las formas de letra en una palabra o bloque de texto. No debe confundirse con el kerning, que se refiere al ajuste de la distancia entre caracteres individuales. El espaciado entre letras se puede utilizar para ajustar la densidad de un bloque de texto o un título o subtítulo individual.
Obviamente, el espacio entre las letras afecta la legibilidad del texto. Demasiado o muy poco y la legibilidad se verá comprometida. Sin embargo, hay ocasiones en que, en mi opinión, se necesita espacio entre letras. Como puede ver en el gráfico a continuación, me gusta agregar espacios generosos de letras a los subtítulos o frases de texto en mayúsculas. Me parece que es más fácil leer el texto en mayúsculas cuando los caracteres tienen un espacio adicional a su alrededor. Además, dependiendo del tipo de letra utilizado, me gusta aumentar el espacio entre letras ligeramente en la copia del cuerpo.
Puede parecer obvio que un buen contraste de tipo es esencial para la legibilidad. El hecho del asunto es que los diseñadores (yo incluido) siempre están empujando los límites del contraste. Puede ser que queramos que una determinada sección del texto sea menos prominente, o que cree "capas" de jerarquía en nuestro diseño. Sea cual sea el caso, tenga en cuenta que el contraste en la pantalla, especialmente cuando se trata de formas pequeñas y finas como el texto del cuerpo, varía mucho de una pantalla a otra. Es mejor errar en el lado de un poco "demasiado" contraste.
Como ya hemos discutido en esta serie, la jerarquía juega un papel importante en la legibilidad del contenido. Una jerarquía exitosa organiza el contenido en partes digeribles y permite al lector escanear y acceder al texto fácilmente.
Comience a pensar en emplear estos conceptos de legibilidad y legibilidad en sus proyectos. Cuanto más lo hagas, mejor obtendrás..
Accentsconagua