Por qué la tipografía es lo primero que los diseñadores hacen mal
La mayoría de las personas piensa que la tipografía es elegir fuentes. No lo es. La tipografía es sobre espaciado, ritmo y jerarquía — la estructura invisible que guía el ojo del lector antes de que decida conscientemente dónde mirar. Una fuente hermosa arruinada por un interlineado incorrecto, tracking erróneo o sin jerarquía comunica menos eficazmente que Times New Roman usado correctamente. Estos 8 conceptos explican por qué.
Los 8 fundamentos
Tracking
Espaciado entre letras aplicado globalmente a una palabra o bloque de texto. Auméntalo en etiquetas en mayúsculas; redúcelo en titulares display.
El texto en mayúsculas necesita tracking +10–20% para respirar. El cuerpo en minúsculas casi nunca.
Kerning
Espaciado entre dos pares de caracteres específicos. 'AV', 'To', 'WA' están demasiado separados por defecto — el buen kerning corrige estos huecos invisibles.
El kerning automático maneja bien la mayoría de los casos. Desactívalo en la demo para sentir exactamente lo que está corrigiendo.
Interlineado
El espacio vertical entre líneas de texto. Demasiado estrecho y el texto se asfixia. Demasiado amplio y el ojo pierde el hilo entre líneas.
Punto óptimo para cuerpo de texto: 1.4–1.6× el tamaño de fuente. Los titulares display pueden ir más ajustados, alrededor de 1.0–1.2×.
Peso Tipográfico
El grosor del trazo — desde thin (100) hasta black (900). El peso crea jerarquía antes de que el lector lea conscientemente una sola palabra.
Limítate a 2 pesos por diseño: uno para el cuerpo, uno para los títulos. Más de 2 crea caos.
Serif vs Sans-serif
Las fuentes serif tienen pequeños trazos finales en las letras. Las sans-serif no. Las serif ayudan a la lectura larga en papel; las sans-serif ganan en pantallas a tamaños pequeños.
Para texto web por debajo de 18px, las sans-serif casi siempre ganan en legibilidad.
Alineación
Cómo se disponen las líneas en su contenedor — izquierda, centro, derecha, justificado. La alineación izquierda es correcta para casi todo el texto de cuerpo.
Nunca justifiques el cuerpo en web. Crea huecos irregulares entre palabras llamados 'ríos' que rompen el flujo de lectura.
Escala Tipográfica
La relación de tamaño entre los niveles de encabezado. Un multiplicador consistente (1.25×, 1.414×, 1.618×) crea ritmo visual y armonía en toda la página.
Elige una relación y aplícala consistentemente. Los tamaños de encabezado arbitrarios son la mayor fuente de caos visual en diseños amateur.
Contraste
La diferencia visual entre elementos — tamaño, peso, color, estilo. Sin contraste no hay jerarquía. Sin jerarquía, nada se lee.
Si dos elementos parecen vagamente similares, hazlos idénticos o haz el contraste dramático. El término medio se lee como un error.
No lo leas — siéntelo
Cada concepto anterior tiene una demo interactiva en vivo en nuestra página Learn. Arrastra sliders para tracking e interlineado, alterna serif y sans-serif, ajusta el peso en tiempo real. La tipografía encaja cuando la mueves — no cuando lees sobre ella.
AaAbrir lección interactiva →¿Necesitas un diseñador que aplique estos principios a tu sitio?
Hablemos →About
Patrick Chen — desarrollador independiente y diseñador web detrás de Sublimearts.io. Construí la lección de Fundamentos de Tipografía porque cada curso de diseño pasa 2 horas en teoría del color y 10 minutos en tipografía. Eso me parecía al revés.