Bienvenidos a mi primer blog de la serie Entendiendo tipografía donde les estaré explicando conceptos de tipografía de una manera sencilla. Espero que la información le resulte útil para mejorar su tipografía o composiciones tipográficas.
¡Empecemos!👇
Cada vez que escribe (por ejemplo, en Figma o Ai), aparece un cuadro delimitador alrededor de la letra. El cuadro es la combinación del ancho del carácter y los rumbos laterales izquierdo y derecho.
Cojinetes laterales: Considérelos como los márgenes izquierdo y derecho que los diseñadores le dan a cada glifo para evitar que se crucen entre sí cuando se escriben para formar una palabra.
Una combinación de rodamiento del lado derecho y rodamiento del lado izquierdo se llama métrica. Las métricas definen el espacio entre dos caracteres adyacentes o qué tan lejos estarán las letras entre sí, a lo que nos referimos como espaciado entre caracteres (no el espacio entre palabras, que es el espacio entre dos palabras).
Forma de letra 'a' con el cuadro delimitador, el ancho de los caracteres y las métricas (orientación del lado izquierdo + orientación del lado derecho).
Un ejemplo del texto con cojinetes laterales.
Un ejemplo del texto sin cojinetes laterales.
Antes de pasar al kerning y al seguimiento, es importante comprender el espacio negativo alrededor de las formas geométricas básicas (cuadrado, círculo, triángulo).
En comparación con los cuadrados, los círculos y los triángulos tienen una superficie más pequeña, lo que genera más espacio negativo a su alrededor y los hace parecer más pequeños. Para restablecer el equilibrio visual, aumentamos ligeramente el tamaño de los círculos y triángulos.
Un aumento de tamaño aumenta la altura de la forma. El grado en que aumenta la altura se llama excederse.
Espacio negativo y exceso aplicado al círculo y al triángulo.
El mismo principio de exceso se aplica a las formas de las letras para contrarrestar el desequilibrio visual que se asemeja a la geometría circular y triangular, por ejemplo, a, o, b, d, A, V, W, M, O, C y Q, etc.
Sobreimpulso aplicado a las letras 'n' y 'o' de la palabra inox.
Kerning es el proceso de ajustar el espacio entre dos caracteres específicos para promover un flujo rítmico y visualmente agradable entre letras.
El kerning se utiliza generalmente en logotipos, carteles, titulares y otros lugares donde el espacio irregular entre las letras es evidente.
Pero, ¿cómo se hace?
Estás familiarizado con el espacio negativo que crean las formas geométricas a su alrededor, por lo que el interletraje no debería ser demasiado difícil de entender. Es ese espacio negativo el que define si el kerning será normal, abierta, apretada o muy apretada.
Si coloca letras de borde recto, por ejemplo, H, junto a letras redondas, por ejemplo, O, esto generalmente se considera interletraje normal. Usamos esto como base para ajustar el interletraje entre otras letras.
Ilustremos otros interletraje colocando dos cuadrados y dos círculos uno al lado del otro.
Se colocan 2 cuadrados y 2 círculos equidistantes entre sí marcados como 1, 2, 3 y 4. El espacio entre las formas 2 y 3 es interletraje normal. Por lo tanto, no se debe realizar ningún cambio entre ellos. El espacio entre 1 y 2 es menor que nuestro interletraje de referencia (2–3), por lo que necesitamos abrir el espacio entre 1 y 2 para equilibrar visualmente el espacio entre ellos. Esto se conoce como kerning abierto.De la misma manera, el espacio percibido entre 3 y 4 es mayor que el espacio entre 2 y 3, por lo que reducimos el espacio entre 3 y 4. Se llama kerning ajustado.
El interletraje abierto se aplica entre las formas 1 y 2, el interletraje normal se aplica entre las formas 2 y 3 y el interletraje apretado se aplica entre las formas 3 y 4.
Se aplican diferentes interletrajes a las letras Ohno.
¡Esperar! ¿Qué pasa con las formas triangulares? 🤔
Entendamos esto volviendo a las formas y colocando círculos y triángulos uno al lado del otro a distancias iguales.
El kerning se aplica entre dos círculos, entre un círculo y un triángulo y entre dos triángulos.
En la imagen de arriba, puedes ver que el espacio negativo alrededor de los triángulos es tan grande que el espacio percibido entre los dos triángulos es incluso mayor que entre los círculos.
En consecuencia, las letras que presentan diseños triangulares deben colocarse mucho más juntas, lo que requiere un interletraje muy ajustado. Por ejemplo, esto se puede ver en combinaciones de letras como “wx” y “vx”.
A veces, durante el kerning, se topan entre sí y forman una ligadura.
La ligadura es simplemente el acto de atar. Durante las artes de la escritura y la tipografía, las ligaduras ocurren cuando dos letras se combinan para formar una. Por ejemplo, Ampersand(&) es la ligadura de E y T.
Kerning en letras con geometría triangular. por ejemplo, A y V, y los números 7 y 4.
👉Aquí una imagen de Netflix. La película se llama THALAIVII. El texto está tan estrechamente intercalado que IVI se parece a M. Decisiones como ésta alteran el significado del texto en su conjunto. Estos deben evitarse.
El título de la película THALAIVII está tan estrechamente intercalado que altera la lectura del texto de THALAIVII a THALAMI.
El seguimiento (también conocido como espaciado entre letras en CSS) se define como ajustar el espacio horizontal entre las formas de las letras en un rango de caracteres.
El seguimiento agrega o reduce la misma cantidad de espaciado en comparación con el interletraje, donde se ajusta el espaciado individualmente.
Si reducimos el espacio entre las letras, lo llamamos seguimiento cercano y si lo aumentamos, lo llamamos seguimiento abierto.
Ejemplo de seguimiento aplicado a la palabra CAOS.
EL TEXTO EN MAYÚSCULAS ES DIFÍCIL DE LEER EN COMPARACIÓN CON EL TEXTO EN MINÚSCULAS. 😥
El texto escrito en mayúsculas es difícil de leer en comparación con el texto escrito en minúsculas.💕
Por lo tanto, las palabras en mayúsculas tienen SEGUIMIENTO abierto para aumentar el espacio entre las formas de las letras y facilitar el movimiento de nuestros ojos a través del mayor espacio y la comprensión de la forma.
Tabla de Internshala Design System donde aplicamos un espacio entre letras de 0,5 px al encabezado de la tabla establecido en un tamaño de fuente de 12 px.
¿Por qué pasó esto?
En palabras de Ellen Lupton, “Las letras mayúsculas, al ser cuadradas, prefieren mantenerse un poco alejadas unas de otras”.
Además de eso, tendemos a reconocer las letras por su forma. Dado que todas las letras mayúsculas tienen la misma altura, hay menos contraste de forma en comparación con las letras minúsculas y, por lo tanto, todas parecen iguales. Por ejemplo, AMNWXYZ o CGOQ o BDPR.
Contraste de forma: La diferencia en la forma de una letra entre sí.
👉 Todas las mayúsculas tienen un borde superior y un borde inferior, mientras que las letras minúsculas tienen de dos a tres bordes superior e inferior dependiendo del ascendente y descendente. Por tanto, hay más contraste de formas.
Bordes en las formas de las letras.
👉 Las letras en mayúsculas tienen formas y contornos similares, lo que las hace Difícil de reconocer con facilidad al ejecutar texto en un tamaño de punto pequeño., mientras que las letras minúsculas tienen una forma y una altura distintivas que las hacen más fáciles de comprender a pesar de tener las mismas formas de contorno. A continuación se muestra un ejemplo:
Es mucho más fácil comprender CDGOQ en minúsculas que en mayúsculas, ya que las formas son diferentes, lo que hace que sean más fáciles de distinguir en tamaños de puntos pequeños. Lo mismo ocurre con otras letras.
👉 Todo el texto en mayúsculas o minúsculas configurado en tamaños de puntos pequeños requiere seguimiento abierto. Los siguientes ejemplos de dos libros; El niño, el topo, el zorro y el caballoy El pequeño libro del consuelodonde se da seguimiento abierto a los títulos de los libros.
A los títulos de los libros en el lomo se les dio seguimiento abierto.
👉 Títulos grandes y en negrita: No siempre es necesario utilizar el seguimiento abierto para todas las mayúsculas, por ejemplo, en títulos grandes y en negrita. En los ejemplos siguientes de Swiggy's y The Prestige, el texto está escrito en mayúsculas para el título y el título casi no tiene seguimiento. Parece que están muy entrelazados.
Este correo electrónico de Swiggy y el póster de la película The Prestige muestran casos en los que no se realiza ningún seguimiento del texto escrito en mayúsculas.
👉 Tipos de letra condensados: Como sus nombres indican, las tipografías condensadas requieren intimidad. Sin embargo, debemos tener cuidado al utilizarlos. Pueden funcionar bien sin seguimiento abierto para títulos con poco texto y fuentes pesadas, como el título La casa de papel, que se muestra a continuación.
Sin embargo, son difíciles de leer con tamaños de fuente pequeños y pesos regulares o livianos, por lo que se requiere que se les dé seguimiento abierto. Por ejemplo, el texto de la PARTE 5 que aparece debajo del título tiene seguimiento abierto.
Si tienes curiosidad por los tipos de letra condensados, consulta Bebas Neue y Akrobat de FontFabric.
Póster de Money Heist que ilustra el uso del seguimiento en los titulares.
👉 Tamaño de fuente grande: Con tamaños de fuente grandes, las letras minúsculas deben tener un seguimiento negativo para compensar el espacio adicional entre las letras. Vea el siguiente ejemplo del sitio web de Apple donde agregaron el seguimiento negativo al texto configurado con un tamaño de fuente de 80 píxeles.
Apple agregó un seguimiento negativo de -1,2 px con un tamaño de fuente de 80 px.
👉 Aquí hay otro ejemplo de Netflix donde se aplica el seguimiento abierto al texto escrito en mayúsculas y en tamaño de fuente pequeño.
Seguimiento abierto agregado al texto de la SERIE en Netflix.Interletrado: Seleccione el espacio entre los caracteres que desea cambiar y utilice el Alt + tecla de chevron derecha o izquierda (para Figma) o Alt+tecla de flecha derecha o izquierda (para AI) para aumentar o disminuir el interletraje.Seguimiento: Seleccione la palabra completa y luego use Alt+tecla de chevron derecha o izquierda (para Figma) o Alt+tecla de flecha derecha o izquierda (para IA) para aumentar o disminuir el seguimiento.
Atajos que puedes utilizar para configurar el kerning y el seguimiento en Figma y Adobe Illustrator.
Eso es todo por hoy.
Gracias por leer. Sientete libre para compartir.