Introducción al interletraje para diseñadores

Domina todos los secretos del kerning con nuestra guía completa

Introducción al interletraje para diseñadores

El kerning es un aspecto esencial de la tipografía que puede hacer que tu diseño destaque o sea un desastre.

Como dijo Robert Bringhurst en The Elements of Typographic Style, "La buena tipografía es, en parte, cuestión de buen gusto, pero también de seguir reglas desarrolladas a lo largo de los siglos. El kerning es una de esas reglas y puede marcar la diferencia entre un texto legible y uno que no lo es”. En resumen, el kerning consiste en ajustar el espacio entre letras o caracteres individuales para lograr una apariencia visual óptima.

Pero, ¿qué es lo "óptimo"? Para responder a esa pregunta, vamos a sumergirnos en una introducción al kerning: qué es, por qué es útil, qué tipos existen y algunos consejos para usarlo con eficacia.

¿Qué es el kerning?

En tipografía, el kerning es el proceso de ajustar el espacio entre letras individuales para crear un resultado visualmente más atractivo. El objetivo es lograr un espaciado visual consistente entre las letras, independientemente de su forma o tamaño. Se utiliza para crear un aspecto más armonioso y equilibrado, y puede aplicarse a cualquier fuente o tipo de letra.

A lo largo de los años, los diseñadores han utilizado varias definiciones de kerning, dependiendo de su área de especialización o necesidades. Por ejemplo, los diseñadores gráficos pueden definirlo como el proceso de ajustar el espacio entre letras para que una palabra o frase se vea más atractiva. Por otro lado, los diseñadores web pueden definirlo como el proceso de optimizar el espaciado entre letras para aplicaciones y dispositivos web.

¿Por qué es útil el kerning?

Algunos dicen que el kerning hace que el diseño final sea más estético. Pero Jim Krause, en Design Basics Index, sugiere: “El kerning no es solo estética, sino legibilidad y lectura. Se trata de encontrar el equilibrio adecuado entre las letras para que trabajen juntas y comuniquen un mensaje”. El kerning es útil para diversos fines prácticos, como mejorar la legibilidad, crear jerarquía tipográfica y potenciar el diseño general.

Aquí tienes algunos ejemplos de mal kerning de r/badkerning:

An image of bad kerning on an orange juice carton. Here, the word "glass" appears as "gla ss"
El kerning en este cartón de zumo de naranja hace que “GLASS” parezca dos palabras separadas.

‍

The word "kerning" cross stitched onto a piece of white fabric.
Un punto de cruz muestra cómo la falta de espacio entre letras puede dificultar la lectura. En este ejemplo, la R y la N están demasiado juntas y parecen una M minúscula.

El kerning es fundamental para titulares, logotipos tipográficos, señalética y otros diseños que requieren un alto nivel de legibilidad. Es especialmente importante en diseños donde el texto es el elemento visual principal, como carteles o anuncios. Y cuando se hace bien, el kerning ayuda a crear diseños hermosos y pulidos.

Tipos de kerning y herramientas

Existen varios tipos de kerning que los diseñadores pueden utilizar. Además, hay herramientas muy potentes integradas en el software que permiten a cualquier diseñador experimentar con las tipografías.

Kerning manual

Los diseñadores experimentados que han perfeccionado sus habilidades durante años suelen recurrir al kerning manual, que consiste en ajustar el espacio entre letras una por una. Este tipo de kerning se utiliza a menudo para titulares, logotipos y otros diseños donde se necesita un control preciso sobre el espaciado.

El kerning manual puede llevar tiempo, pero ayuda a lograr un acabado más preciso y profesional. Para ajustar el kerning manualmente, selecciona la herramienta de texto en tu programa de diseño, haz clic entre dos letras y usa las teclas de flecha de tu teclado para ajustar el espacio según sea necesario.

Kerning óptico

El kerning óptico es un tipo de ajuste automático que se basa en la apariencia visual de las letras. Este método considera el espacio y la forma percibidos de los caracteres en lugar de su tamaño real. Es una técnica especialmente útil cuando trabajas con bloques de texto grandes, ya que te ahorra tener que ajustar manualmente el espacio entre cada letra.

Para usar el interletraje óptico, selecciona la herramienta de texto en tu software de diseño, resalta el texto que deseas ajustar y elige la opción de interletraje óptico en la configuración de tipografía o caracteres.

Interletraje métrico

El interletraje métrico es un tipo de espaciado que utiliza valores predefinidos basados en las métricas de la fuente. Suele ser la opción predeterminada en el software de diseño y se utiliza a menudo para el cuerpo del texto. Si no sabes por dónde empezar a ajustar el interletraje, este es el tipo ideal para estudiar las "reglas".

Interletraje contextual

El interletraje contextual es un tipo de espaciado que ajusta la distancia entre letras según su contexto dentro de una palabra. Es especialmente útil para ligaduras y otras combinaciones de caracteres especiales. Para quienes no lo sepan, las ligaduras ocurren cuando dos o más caracteres se combinan en un solo glifo o símbolo. Esto se hace a menudo por motivos estéticos o de legibilidad, ya que mejora el espaciado y la apariencia del texto, ayudando a que las palabras fluyan con suavidad.

En Thinking with Type, Ellen Lupton ofrece numerosos ejemplos de interletraje, incluida la palabra "LOVE LETTERS". En este ejemplo, el espacio entre la V y la E se ajusta para que el trazo diagonal de la V no sea tan notorio, creando un ritmo visual más uniforme.

Fuente

Interletraje automático

El interletraje automático es aquel que aplica el software de diseño de forma autónoma. Se basa en reglas predefinidas y puede ser ajustado por el diseñador.

Consejos de interletraje

Dominar el interletraje puede ser un reto, pero existen algunos consejos que pueden ayudar a la mayoría de los diseñadores a empezar a experimentar.

Combinaciones de letras

Algunas combinaciones de letras requieren más atención al ajustar el interletraje para obtener resultados óptimos. Estas incluyen combinaciones como VA, WA, AV, AW, TO, TY y WA, que presentan trazos inclinados. A menudo, estas combinaciones requieren ajustar el espacio entre las letras para evitar que parezcan demasiado apretadas o demasiado sueltas. Esto también puede ocurrir entre letras redondeadas, especialmente al trabajar con el idioma inglés. Otras combinaciones de letras problemáticas incluyen:

  • Letras K, W, Y, F, L y T
  • Palabras escritas en mayúsculas
  • Mayúsculas combinadas con minúsculas

En otros idiomas, este problema se traslada a otras letras o ligaduras. Algunos ejemplos incluyen:

  • El francés utiliza muchas letras minúsculas con acentos, como é, è, ê y à. El interletraje es importante en francés para asegurar que estos acentos estén correctamente espaciados y alineados con las letras que modifican.
  • El alemán hace un uso frecuente de signos diacríticos como las diéresis (ä, ö, ü) y la Eszett (ß). El interletraje en alemán implica ajustar el espacio entre estos caracteres y las letras a las que están unidos.
  • En chino, los caracteres no tienen formas de letras individuales, sino que consisten en combinaciones complejas de trazos. El interletraje en chino implica ajustar el espacio dentro de los propios caracteres para crear un texto visualmente agradable y fácil de leer.
  • En árabe, la escritura cursiva requiere un interletraje cuidadoso por parte de los diseñadores de fuentes para asegurar que las letras se conecten correctamente y que el texto sea legible. El interletraje en árabe implica ajustar el espacio entre cada letra redondeada, dependiendo de su posición en la palabra y de las letras que la rodean.

Exceso y falta de interletraje

El exceso de interletraje ocurre cuando el espacio entre las letras es demasiado estrecho, lo que hace que el texto parezca apretado y difícil de leer. La falta de interletraje sucede cuando el espacio es demasiado amplio, haciendo que el texto se vea desconectado y desequilibrado. Es fundamental encontrar el punto medio entre estos dos extremos para lograr resultados óptimos. Como señala el diseñador Tobias Van Schneider en este artículo, "Los diseñadores con experiencia saben que la mitad de la excelencia es simplemente el amor por el detalle... perfeccionan el espaciado y el interletraje en cada página, para cada tamaño de pantalla. No pasan por alto elementos diminutos ni interacciones como los estados de los enlaces y los favicons."

Espaciado en bloques de texto

El espacio entre letras no solo depende de las letras en sí, sino también de la forma del bloque de texto. Por ejemplo, un bloque de texto curvo puede requerir más espacio negativo entre letras que uno recto. Es importante considerar la forma del bloque al ajustar el interletraje para no herir la sensibilidad estética ni que el resultado se vea visualmente extraño.

Tamaños de fuente, grosores y espaciado

El tamaño de la fuente influye mucho en el interletraje. A medida que aumenta el tamaño, el espacio entre letras también debe crecer para mantener la legibilidad. Cuanto más grande es la fuente, más espacio hay entre caracteres, lo que hace que el interletraje sea menos evidente. Por el contrario, los tamaños pequeños requieren más atención para asegurar que el espaciado sea legible y agradable a la vista. Además, el grosor de la fuente también afecta: las fuentes más negritas y pesadas pueden necesitar más espacio para ser legibles, mientras que las fuentes más ligeras pueden requerir un interletraje más ajustado para evitar huecos o inconsistencias.

Imprime y gira

Para tener una mejor percepción del interletraje, suele ser útil imprimir el texto o girarlo horizontalmente (ponerlo boca abajo). Ver las mismas letras fuera de su contexto habitual ayuda a observar el texto desde otra perspectiva y a identificar cualquier problema en el espaciado.

El interletraje, al final

La regla de oro dicta que el interletraje debe ser el último paso del proceso de diseño, una vez que todos los demás elementos estén finalizados. Esto garantiza que el ajuste se haga sobre el diseño definitivo y no sobre bocetos o maquetas preliminares, evitando que sea excesivo o insuficiente. Pero tampoco hay que darle demasiadas vueltas. Como dijo el padre de la tipografía Jan Tschichold en su libro, La nueva tipografía: manual para diseñadores modernos, “La tipografía perfecta es, sin duda, la más esquiva de todas las artes. Solo la escultura en piedra se le acerca en obstinación”.

Recursos de interletraje para diseñadores principiantes

Existen varios recursos para ayudar a los diseñadores a mejorar sus habilidades de interletraje, incluyendo juegos en línea, herramientas de software y tutoriales.

  • KernType: Un popular juego de tipografía llamado "KernType" es una actividad divertida para diseñadores novatos. Este juego desafía a los jugadores a ajustar el espacio entre letras para lograr resultados sobresalientes.
The KernType website. Here the word Quijote is displayed with different options for kerning.
Fuente
  • Pares de interletraje: Esta función viene integrada en programas de diseño como Adobe InDesign. Los pares de interletraje son ajustes preestablecidos que el software aplica al espacio entre combinaciones específicas de letras. Puedes acceder a estos pares en la configuración de tipografía o caracteres de tu programa y ajustarlos según sea necesario para mejorar el aspecto general del texto.
  • Tracking: El tracking es una herramienta que permite ajustar el espacio general entre todas las letras de una palabra o frase. Es muy útil si tienes un bloque de texto que se ve demasiado apretado o demasiado suelto. Para ajustarlo, selecciona la herramienta de texto en tu programa de diseño, resalta el texto y usa la configuración de tracking para aumentar o disminuir el espacio entre las letras.
  • Typewolf: Analizar el trabajo de otros es una excelente forma de aprender sobre composición tipográfica. Este sitio web ofrece una colección de inspiración y recursos, incluyendo artículos sobre técnicas de interletraje.
  • Adobe Creative Cloud: La suite de herramientas de diseño de Adobe incluye recursos y tutoriales sobre tipografía e interletraje.
  • Design Cuts: Este sitio web ofrece una amplia gama de recursos de diseño, incluyendo tutoriales sobre espaciado de caracteres, tipografía e interletraje.
  • Skillshare: Esta plataforma de aprendizaje en línea ofrece cursos de diseño gráfico, así como clases específicas sobre tipografía e interletraje.
  • Fonts In Use: Este sitio web muestra tipografías aplicadas en diseños reales, proporcionando ejemplos de técnicas de interletraje en acción.
  • Webflow University ofrece lecciones gratuitas como Tipografía web avanzada 

Formas alternativas de mejorar tus habilidades de interletraje y espaciado

Ellen Lupton sugiere en Thinking with Type que "el interletraje es el ingrediente secreto que transforma la tipografía de lo ordinario a lo extraordinario. Es lo que le da al texto ese equilibrio y fluidez perfectos". Por eso, abordar el interletraje desde otra perspectiva es clave para evitar errores. Si estás empezando, aquí tienes lo que puedes hacer:

  • Analiza diseños profesionales: Observa de cerca los trabajos de diseñadores veteranos y fíjate en cómo espacian y equilibran las letras. Esto te dará pistas valiosas sobre técnicas de interletraje eficaces.
  • Experimenta con diferentes fuentes: Prueba con distintas tipografías y ajusta el espacio para ver cómo la relación entre las letras afecta al aspecto y la sensación general de tu diseño.
  • Usa un sistema de rejilla: Considera utilizar una rejilla para guiar tus ajustes de interletraje y asegurar que el espaciado entre letras sea coherente y equilibrado.
  • Colabora con otros diseñadores: Trabajar con otros te permite recibir comentarios valiosos, descubrir nuevas técnicas y aprender de la experiencia y los conocimientos de los demás.

Por último, a veces tomar distancia de un diseño ayuda a refrescar la mirada y recuperar la concentración. Esto te permitirá detectar problemas de interletraje que antes pasabas por alto de tanto mirarlos. Con práctica y atención al detalle, dominarás el arte del interletraje para crear diseños que destaquen y comuniquen con eficacia. ¡Esperamos que ya estés en camino de lograrlo!

Consigue gratis nuestro curso de 100 vídeos sobre diseño web

Desde los fundamentos hasta temas avanzados: aprende a crear sitios en Webflow y conviértete en el diseñador que siempre quisiste ser.

→
↗
►
↓
←
↑
Leer ahora

Última actualización
April 7, 2023
Categoría

Artículos relacionados

Introducción a la tipografía web
Introducción a la tipografía web

Introducción a la tipografía web

Introducción a la tipografía web

Diseño
Por
Neal O’Grady
,
,
Leer artículo
Marca la diferencia con estas 10 fuentes en mayúsculas
Marca la diferencia con estas 10 fuentes en mayúsculas

Marca la diferencia con estas 10 fuentes en mayúsculas

Marca la diferencia con estas 10 fuentes en mayúsculas

Diseño
Por
Equipo de Webflow
,
,
Leer artículo
7 grandes ejemplos de tipografía en diseño web
7 grandes ejemplos de tipografía en diseño web

7 grandes ejemplos de tipografía en diseño web

7 grandes ejemplos de tipografía en diseño web

Diseño
Por
Equipo de Webflow
,
,
Leer artículo
Las 14 mejores fuentes modernas para usar en 2025
Las 14 mejores fuentes modernas para usar en 2025

Las 14 mejores fuentes modernas para usar en 2025

Las 14 mejores fuentes modernas para usar en 2025

Diseño
Por
Jeff Cardello
,
Equipo de Webflow
,
Leer artículo
La importancia de la tipografía y cómo influye en el impacto de un diseño
La importancia de la tipografía y cómo influye en el impacto de un diseño

La importancia de la tipografía y cómo influye en el impacto de un diseño

La importancia de la tipografía y cómo influye en el impacto de un diseño

Diseño
Por
Equipo de Webflow
,
,
Leer artículo
Consejos de diseño web sencillos para principiantes: una guía completa
Consejos de diseño web sencillos para principiantes: una guía completa

Consejos de diseño web sencillos para principiantes: una guía completa

Consejos de diseño web sencillos para principiantes: una guía completa

Diseño
Por
Equipo de Webflow
,
,
Leer artículo

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo

Empieza gratis

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.

Empieza, es gratis
Ver demostración

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.