Al diseñar para la web, debe tener una cosa en mente 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 suponiendo que haya 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 entienden cómo usarlos de manera efectiva. Tenemos la intención de arreglar eso hoy.
Si reduce estos tres a los fundamentos absolutos, está viendo el espacio entre los caracteres en los ejes X e Y. Profundizando, verá que hay más que eso, pero en esencia, está viendo la relación entre los caracteres del texto. Es importante comprender la relación entre estos tres atributos porque el buen diseño y la legibilidad dependen de que los use lo mejor que pueda.
Y eso viene con el tiempo y la práctica. Pero una vez que comience a prestarles atención, notará cómo el interletraje, el seguimiento y el interlineado se utilizan tanto de manera efectiva como deficiente en todo lo que lee y ve a diario. Vamos a profundizar en.
Ajuste de interletraje, interlineado y seguimiento (¡y más!)
En realidad, antes de profundizar, repasemos cómo cambia y ajusta estas configuraciones. Si bien la mayoría de los programas de procesamiento de textos tienen opciones para ajustarlos, la mayoría de las personas nunca necesitarán hacerlo cuando escriban textos originales o típicos. Es cuando estás diseñando texto que se convierte en un problema mayor, por lo que programas como Photoshop, Illustrator, etc. tendrán las opciones que más necesitas.
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 el interletraje, el VA en un cuadro es el rastreo y las A verticales subrayadas son las iniciales. También puede ajustar el tachado, el peso, el tamaño, el superíndice y mucho más en este panel. Vale la pena acostumbrarse a mantener esto abierto.
Simplemente coloque el cursor donde necesite ajustar el espacio y listo.
¿Qué es Kerning?
Comencemos con el interletraje . 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 interletraje variable porque el espacio entre las dos primeras letras puede ser diferente que entre las dos últimas (y así sucesivamente).
En las 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, la J y 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.
En el ejemplo anterior, tenemos tres líneas que fueron copiadas y pegadas usando la fuente monoespaciada Courier New . El interletraje de la fila superior se establece en 0, que es el valor predeterminado y utiliza el espaciado que eligió el diseñador de la fuente. La segunda fila se establece equitativamente 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 se cortó aleatoriamente con espacios positivos y negativos dentro de cada palabra individual. Como puede ver, cada carácter puede tener un kerning diferente en cada lado.
¿Qué es el seguimiento?
El seguimiento es similar al interletraje, pero no es un interletraje. Donde el interletraje es el espacio entre dos caracteres individuales, el seguimiento 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.
Lo que hice para el interletraje fue colocar el cursor entre cada carácter individual y ajustarlo a 200. Básicamente, seguí toda la línea. Que es lo que debes hacer. Simplemente resalte lo que necesita rastrear y ajústelo en el Panel de caracteres.
Tenga en cuenta, sin embargo, que algunas fuentes y scripts pueden volverse ilegibles a medida que se ajusta el seguimiento.
Las fuentes manuscritas y los tipos de letra cursiva se configuran con un interletraje específico, y si ajusta el seguimiento, obtendrá espacios en una línea que de otro modo no estaría rota. O yendo en la otra dirección para comprimir las líneas, simplemente puede hacer que el script sea ilegible.
¿Qué es liderar?
Con Interlineado, ya no tendrá que lidiar con el espacio entre caracteres. El interlineado es el espacio entre líneas.
Hacer un uso efectivo de los encabezados le permite hacer un uso efectivo de los espacios en blanco en sus diseños. Las líneas estrechas, incluso con un kerning/seguimiento correcto y bien hecho, pueden hacer una experiencia miserable para los lectores.
En algunos lugares, es posible que vea un encabezado llamado line height , 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 los caracteres. 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 pase lo que pase, habrá espacio entre las letras. Si establece eso en o menos que el tamaño de fuente, 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 o más altos. Es simplemente el espacio que los rodea.
Sin embargo, como puede ver, las opciones debajo del interletraje/seguimiento en el Panel de caracteres de Photoshop ajustan el ancho/alto de los caracteres independientemente del interletraje, el seguimiento y el interlineado.
Métodos abreviados 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 hacen que el interletraje, el seguimiento y el interlineado sean muy fáciles de usar.
Estos accesos directos son para la suite Adobe Creative Cloud, por lo que pueden ser diferentes en Gimp o Paint.NET u otro programa.
- Interletraje : 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 interletraje
- Seguimiento : 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.
- Interlineado : 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 las 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 lento. 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 aprender, ya que hace que su flujo de trabajo sea mucho más fluido, agradable y productivo también).
Terminando
El interletraje, el seguimiento y el interlineado son elementos fundamentales 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 espacio entre letras y líneas pueda tener un impacto tan grande, pero una vez que lo maneja, aunque sea por un momento, nunca mirará sitios web, anuncios, logotipos o vallas publicitarias. de la misma manera otra vez.
¿Cuáles son sus consejos y trucos para obtener el seguimiento, interletraje o interlineado perfectos en un diseño?
Imagen destacada del artículo por BarsRsind / shutterstock.com