Kerning, seguimiento y encabezado: una guía sencilla para un tipo de letra eficaz


Al diseñar para la web, debes tener en cuenta una cosa en todo momento: la legibilidad. No importa qué tan bueno sea el diseño, qué tan hermoso sea su diseño o qué tan genial sea su uso del color. Si las personas no pueden leer las palabras en la pantalla (y esto es asumiendo que hay palabras en la pantalla, por supuesto), el sitio web no puede cumplir su función. Tres de los elementos más importantes de la legibilidad del texto son el interletraje, el seguimiento y el interlineado, aunque muchas personas los confunden o simplemente no comprenden cómo utilizarlos de forma eficaz. Tenemos la intención de arreglar eso hoy.

Kerning, seguimiento y liderazgo

Si reduce estos tres a los fundamentos absolutos, está observando el espacio entre los caracteres en los ejes X e Y. Profundizando, verá que hay más que eso, pero en esencia, está observando la relación entre los caracteres de texto. Es importante comprender la relación entre estos tres atributos porque el buen diseño y la legibilidad dependen de que los utilice lo mejor que pueda.

Y eso viene con el tiempo y la práctica. Pero una vez que empiece a prestarles atención, notará cómo el interletraje, el seguimiento y el interlineado se utilizan de forma eficaz y deficiente en todo lo que lee y ve a diario. Vamos a profundizar en.

Ajuste de kerning, interlineado y seguimiento (¡y más!)

En realidad, antes de profundizar, veamos cómo cambia y ajusta esta configuración. Si bien la mayoría de los programas de procesamiento de texto tienen opciones para ajustarlos, la mayoría de las personas nunca necesitarán hacerlo cuando escriban textos o textos típicos. Es cuando estas diseño texto que se convierte en un problema, por lo que programas como Photoshop, Illustrator, etc., tendrán las opciones que más necesita.

En los productos de Adobe, solo tiene que abrir el Panel de caracteres de la capa de texto y tiene todo lo que necesita. El V / A es interletraje, el VA en un cuadro está rastreando y las A verticales subrayadas son Líderes. También puede ajustar tachado, peso, tamaño, superíndice y mucho más en este panel. Vale la pena acostumbrarse a mantener esto abierto.

Kerning vs seguimiento vs líder

Simplemente coloque el cursor donde necesite ajustar el espaciado y listo.

¿Qué es el kerning?

Comencemos con interletrado. El kerning es el más simple de los tres, de verdad. Es el espacio entre dos personajes uno al lado del otro. En una palabra, puede tener kerning variable porque el espacio entre las dos primeras letras puede ser diferente que entre las dos últimas (y así sucesivamente).

En fuentes monoespaciadas, cada carácter ocupa exactamente la misma cantidad de espacio horizontal sin superposición. La A tiene el mismo ancho que la B y la J que la K. Ajustar el interletraje entre estas letras tiende a ser más fácil que las fuentes de espaciado variable, donde las letras pueden superponerse y también imprimirse en diferentes anchos.

Kerning vs seguimiento vs líder

En el ejemplo anterior, tenemos tres líneas que se copiaron y pegaron usando la fuente monoespaciada Courier Nuevo. El kerning de la fila superior se establece en 0, que es el valor predeterminado y utiliza cualquier espacio que elija el diseñador de fuentes. La segunda fila se establece igualmente entre letras (y espacios) en 200. Como puede ver, los espacios son uniformes entre los caracteres a lo largo de la línea. Finalmente, la tercera línea fue intercalada al azar con espaciado positivo y negativo dentro de cada palabra individual. Como puede ver, cada carácter puede tener un kerning diferente en cada lado.

¿Qué es el seguimiento?

Rastreo es similar al kerning, pero no es kerning. Donde kerning es el espacio entre dos caracteres individuales, rastreo es el espacio uniforme entre cada palabra o línea individual. En lugar de preocuparse por cómo se juntan las cosas letra por letra como con el interletraje, se asegura de que toda la línea esté espaciada uniformemente. Mirando hacia atrás en la imagen de ejemplo anterior, la segunda línea podría haberse hecho de una manera mucho más fácil.

Kerning vs seguimiento vs líder

Lo que hice para el kerning fue colocar el cursor entre cada carácter individual y ajustarlo a 200. Básicamente, rastreé toda la línea. Que es lo que debes hacer. Simplemente resalte lo que necesita rastrear y ajústelo en el Panel de caracteres.

Kerning vs seguimiento vs líder

Sin embargo, tenga en cuenta que algunas fuentes y scripts pueden volverse ilegibles a medida que se ajusta el seguimiento.

Kerning vs seguimiento vs líder

Las fuentes de escritura a mano y los tipos de letra cursiva se configuran con kerning específico, y si ajusta el seguimiento, obtendrá espacios en una línea que de otro modo no estaría rota. O si va en la otra dirección para comprimir las líneas, simplemente puede hacer que el script sea ilegible.

¿Qué es Leading?

Con Leading, ya no tiene que lidiar con el espaciado entre caracteres. Líder es el espacio entre líneas.

Kerning vs seguimiento vs líder

Hacer un uso eficaz del interlineado le permite utilizar eficazmente los espacios en blanco en sus diseños. Las líneas estrechas, incluso con el kerning / seguimiento correcto y bien hecho, pueden hacer que la experiencia de los lectores sea miserable.

En algunos lugares, es posible que vea el encabezado llamado altura de la línea, pero son más o menos lo mismo. Una buena regla general es asegurarse de dejar al menos un pequeño espacio por encima y por debajo de sus personajes. Como puede ver en el ejemplo superior, una fuente de 40 píxeles tiene una altura de línea de 48 píxeles. Eso significa que no importa qué, habrá espacio entre las letras. Si lo establece en el tamaño de fuente o más bajo, obtendrá una superposición de caracteres.

Además, esta es la altura de la línea en la que se sientan los personajes. Esta no es la altura del personaje. Así como el interletraje y el seguimiento no hacen que los caracteres sean más gordos o delgados, el seguimiento no los hace más cortos ni más altos. Es simplemente el espacio que los rodea.

Sin embargo, como puede ver, las opciones debajo de kerning / tracking en el Panel de caracteres de Photoshop ajustan el ancho / alto de los caracteres independientemente del kerning, tracking y líder.

Atajos de teclado de Photoshop / Illustrator

La única desventaja del Panel de personajes es que se vuelve bastante molesto cuando necesitas un ajuste fino. Afortunadamente, hay atajos de teclado que facilitan el uso del kerning, el seguimiento y la dirección.

Estos accesos directos son para la suite Adobe Creative Cloud, por lo que pueden ser diferentes en Gimp o Paint.NET u otro programa.

  • Interletrado – Con el cursor entre dos caracteres, mantenga presionada la tecla ALT (u Opción en Mac) y use las flechas izquierda / derecha para ajustar el kerning
  • Rastreo – Con la palabra / línea resaltada, mantenga presionada la tecla ALT (u Opción en Mac) y use las flechas derecha / izquierda para ajustar el seguimiento del texto resaltado
  • Líder – Resalte las líneas que desea ajustar, mantenga presionada la tecla ALT (u Opción en Mac) y use las flechas arriba / abajo para ajustar el espacio entre líneas

Si bien puede colocar el cursor o resaltar el texto y escribir valores en el Panel de caracteres, los atajos de teclado hacen que todo el proceso sea mucho menos tedioso y requiera más tiempo. Además, obtiene un control más granular, por lo que también puede hacer mejores diseños de esa manera.

(Aparte, si no utiliza los métodos abreviados de teclado de Photoshop / Illustrator / Premier, etc.con regularidad, le recomendamos que aprenda, ya que hace que su flujo de trabajo sea mucho más fluido, agradable y productivo también).

Terminando

El kerning, el seguimiento y el liderazgo son fundamentos del texto legible en el diseño web (y el diseño en general). Aprender la diferencia y cómo usar cada uno de ellos de manera efectiva lo convertirá en un diseñador mucho mejor. Puede parecer un poco extraño que algo tan simple como el espaciado entre letras y líneas pueda tener un impacto tan grande, pero una vez que lo maneja aunque sea por un tiempo, nunca verá sitios web, anuncios, logotipos o vallas publicitarias. de la misma manera otra vez.

¿Cuáles son sus consejos y trucos para obtener el seguimiento, el interletraje o el liderazgo perfectos en un diseño?

Imagen destacada del artículo por BarsRsind / shutterstock.com