logo
La mayor parte de la información que consumimos ocurre a través de la lectura, por lo que tiene mucho sentido prestar atención a las palabras al diseñar. Hay muchos aspectos de la tipografía, pero una de las cosas que ayudó a mejorar la calidad de mi diseño fue el espaciado entre letras.
El espaciado entre letras consiste en agregar y eliminar espacios entre letras. Algunas personas lo confunden con kerning, pero estos dos son diferentes; el espaciado entre letras afecta a toda la línea de texto, mientras que el interletraje ajusta el espacio entre dos letras individuales a la vez. Es mejor dejar el kerning a los diseñadores de tipos, además de lo cual, a diferencia del espaciado entre letras, actualmente no hay forma de controlar el kerning en CSS.
Creo que la práctica y mucha observación también cambiarán la forma en que trata el espaciado entre letras en su trabajo.
El propósito del espaciado entre letras
El propósito principal del espaciado entre letras es mejorar la legibilidad y la legibilidad del texto. Las palabras actúan de manera diferente según su tamaño, color y el fondo en el que se encuentran. Al ajustar el espacio entre letras al entorno con el que está trabajando, ayudará a los lectores a consumir su información de manera más rápida y eficiente. La parte divertida es que ni siquiera lo notarán, ese es el objetivo del trabajo.
Tenga en cuenta que los tipógrafos piensan espaciado entre letras y kerning al diseñar un tipo de letra. Significa que no tiene que aplicarlo a todo su texto, pero para comprenderlo cuando sea necesario, debe conocer algunos principios básicos y utilizar buenos tipos de letra.
Cómo el espaciado entre letras afecta la legibilidad y la legibilidad
La legibilidad y la legibilidad de su texto dependen de factores como la altura de la línea, la longitud del párrafo, el tamaño de la fuente, la elección del tipo de letra, el espaciado entre letras y mucho más. En cuanto al espaciado entre letras, si te estás iniciando en la tipografía, lo mejor que puedes hacer es no abusar de ella. Lo que quiero decir con eso es simplemente no hacer la distancia entre letras demasiado grande o demasiado pequeña; incluso si cree que se ve bien, a la gente le costará leerlo y eso arruinará su experiencia.
Mayúsculas con espaciado entre letras
Las letras mayúsculas están diseñadas con la intención de que aparezcan al principio de una oración o nombre propio, en combinación con letras minúsculas. Cuando las letras mayúsculas están una al lado de la otra, el espacio entre ellas es demasiado estrecho. Entonces, para lograr una mejor legibilidad, es necesario aumentar el espacio. Esto se aplica tanto a los tamaños de fuente grandes como a los pequeños.
Titulares con espacio entre letras
Si está utilizando fuentes bien diseñadas, puede estar seguro de que están bien calibradas y no tendrá que realizar ningún ajuste importante en ellas. Sin embargo, el problema con los titulares es que a escalas más grandes, el espacio entre letras parece desequilibrado. Puede solucionarse aumentando o disminuyendo el valor de espaciado entre letras.
No existen reglas estrictas para el espaciado entre letras, hay muchos tipos de letra y todos requieren un enfoque individual, pero si observa cómo las grandes empresas como Google y Apple tratan sus tipos de letra, puede encontrar mucha información valiosa allí. .
Echemos un vistazo a las tipografías “Roboto” y “San Francisco” (la primera se usa en Material Design y la segunda en el ecosistema de Apple). Los títulos de 20 a 48 píxeles tienen un valor de espaciado entre letras positivo o ninguno. Si el tamaño de la fuente es mayor, el espaciado entre letras se vuelve negativo. Estos números exactos no funcionarán tan bien para otros tipos de letra, pero después de probar diferentes enfoques, puedo afirmar que es un patrón común.
Probé varias pautas para el espaciado entre letras y la que fue publicada por Agencia Bazen funciona para muchos tipos de letra populares. Será un buen punto de partida para ti, pero siempre puedes aplicar ajustes adicionales:
- H1 – 96 píxeles – -1,5%
- H2 – 60 píxeles – -0,5%
- H3 – 48px – 0%
- H4 – 34 píxeles – 0,25%
- H5 – 24 píxeles – 0%
- H6 – 20 píxeles – 0,15%
- Subtítulo – 16px – 0.15%
Si diseñas muchas aplicaciones o planeas hacerlo, una cosa que me ayuda es usar la configuración predeterminada Diseño de materiales y manzana directrices para sus tipos de letra. Están bien equilibrados y ahorran mucho tiempo.
Texto del cuerpo con espacio entre letras
Si alguna vez leíste algo sobre el espaciado entre letras, probablemente hayas visto esta sabiduría popular del tipógrafo Frederic Goudy: “Cualquiera que usara el espacio entre letras en minúsculas robaría ovejas”. (Hay un argumento que solo se refería a las fuentes de letra negra.) Algunos diseñadores lo tomaron como una regla estricta y ahora nunca ajustan el espacio entre letras del texto en minúsculas.
En base a mi práctica y al observar el trabajo de los diseñadores, no puedo estar de acuerdo con Goudy, porque a veces pequeños cambios pueden marcar una gran diferencia en el rendimiento de su texto. Tomemos, por ejemplo, fuentes condensadas. En un tamaño pequeño, las letras están demasiado cerca unas de otras, lo que conduce a una mala legibilidad. Al aumentar el espacio entre letras en un 1,5%, verá que el texto ahora es más fácil de leer.
Si miramos mi ejemplo anterior, en las pautas para los tipos de letra «Roboto» y «San Francisco», el espaciado entre letras se aplica al texto del cuerpo; a pesar de que San Francisco tiene un «SF Pro Display» dedicado para los titulares y «SF Pro Text» para el texto del cuerpo, todavía se usa el espaciado entre letras para refinarlos.
Hay muchos tipos de letra diferentes y una sola regla no se aplica a todos. Experimente con el espaciado entre letras y haga lo que le parezca correcto. Hay algunas pautas simples que lo guiarán en la dirección correcta, especialmente cuando trabaje con el texto del cuerpo:
Tenga en cuenta la altura de la línea
Si tiene una altura de línea superior al 120%, lo más probable es que el espaciado negativo entre letras dé lugar a un aspecto desequilibrado del párrafo. Para refinarlo, necesitaría mantenerlo al 0% o solo aumentarlo ligeramente.
Texto claro sobre fondo oscuro
Sobre un fondo oscuro, el texto blanco se ve sobreexpuesto y, por lo tanto, las letras aparecen demasiado apretadas. Para hacerlo más legible, le sugiero que aumente un poco el espacio entre letras.
Valores generales para el texto del cuerpo
Puede utilizar las siguientes pautas para el texto del cuerpo, que he probado con varios tipos de letra:
- Cuerpo 1 – 16px – 0.5%
- Cuerpo 2 – 14px – 0.25%
Subtítulos con espaciado de letras
A diferencia de los títulos y el cuerpo del texto, los tamaños de fuente más pequeños no tienen muchas variaciones en el espacio entre letras. Es una práctica común cuando un tamaño de fuente es inferior a 13px para aumentar el espacio entre letras para que sea legible. Pero siempre hay excepciones (las pautas de “SF Pro Text” sugieren usar un espaciado positivo entre letras solo cuando el tamaño de fuente es de 11 px o menos). Asegúrate de experimentar con la configuración.
Puede utilizar los siguientes valores como punto de partida y luego editarlos según le parezca adecuado al tipo de letra que elija:
- Subtítulo – 12px – 0.5%
- Overline – 10px – 1.5%
Consejo final
Una de las cosas que me ayudó a mejorar mis habilidades en tipografía fue mirar a otros diseñadores y especialmente a las fundiciones tipográficas. Al decodificar su trabajo, es posible que notes algunos matices de cómo tratan la tipografía y te ayudará en proyectos futuros.
