Tipografía: El Arte de Elegir y Combinar Fuentes

La tipografía es el arte y técnica de disponer texto para que sea legible, atractivo y transmita el tono adecuado. Elegir la fuente correcta puede transformar completamente un diseño. Una fuente equivocada puede arruinar incluso la mejor composición.

Antes de elegir fuentes, necesitás entender la terminología básica:

Partes de una letra

• Línea base (baseline): La línea invisible sobre la que "descansan" las letras
• Altura x (x-height): La altura de las minúsculas como la "x". Fuentes con mayor x-height son más legibles en tamaños pequeños
• Ascendente: La parte de letras como "b", "d", "h" que sube por encima de la altura x
• Descendente: La parte de letras como "g", "p", "y" que baja por debajo de la línea base
• Serif: Los pequeños remates al final de los trazos (como en Times New Roman)
• Tracking: El espacio entre todas las letras de un texto
• Kerning: El espacio entre dos letras específicas
• Leading (interlineado): El espacio vertical entre líneas de texto

Serif (Con remates)

Tienen pequeños trazos decorativos al final de cada letra. Transmiten tradición, autoridad, confiabilidad y elegancia.

Ejemplos populares:

• Times New Roman: La clásica editorial, usada en periódicos y documentos académicos
• Georgia: Diseñada para pantallas, excelente legibilidad digital
• Playfair Display: Serif moderna con contraste dramático, ideal para títulos elegantes
• Merriweather: Optimizada para lectura en pantalla, muy legible
• Lora: Elegante y contemporánea, perfecta para blogs y editoriales

Cuándo usarlas: Editoriales, marcas de lujo, instituciones tradicionales, cuerpo de texto en artículos largos (aunque esto está cambiando en digital).

Sans-Serif (Sin remates)

Letras limpias sin decoraciones. Transmiten modernidad, simplicidad, accesibilidad y tecnología.

Ejemplos populares:

• Inter: La fuente favorita del diseño digital moderno. Gratis y versátil
• Roboto: La fuente del ecosistema Google/Android
• Open Sans: Neutral y profesional, funciona para todo
• Montserrat: Geométrica e impactante, ideal para títulos
• Poppins: Geométrica y amigable, muy popular en LATAM
• Nunito: Redondeada y cálida, ideal para marcas friendly
• DM Sans: Limpia y contemporánea, perfecta para UI

Cuándo usarlas: Interfaces digitales, tecnología, startups, contenido web, redes sociales. Son la opción más segura para diseño digital.

Display / Decorativas

Fuentes con personalidad fuerte, diseñadas para usarse en tamaños grandes y pocas palabras.

Ejemplos:

• Bebas Neue: Bold condensada, impacto máximo en títulos
• Lobster: Script casual, feeling handmade
• Pacifico: Script relajada, vibes de playa
• Abril Fatface: Serif con mucho contraste, elegancia editorial

Cuándo usarlas: SOLO en títulos y elementos decorativos. NUNCA en cuerpo de texto. Usarlas en párrafos es uno de los errores más comunes de diseñadores principiantes.

Monospace (Ancho fijo)

Cada carácter ocupa el mismo espacio horizontal. Asociadas con código y tecnología.

Ejemplos:

• Fira Code: La favorita de programadores
• JetBrains Mono: Diseñada para legibilidad de código
• Space Mono: Monospace con personalidad, funciona en diseño editorial

Cuándo usarlas: Código, datos técnicos, diseños que quieran evocar tecnología o retro-computing.

La combinación de fuentes es donde muchos diseñadores se complican. Seguí estas reglas:

Regla 1: Máximo 2-3 fuentes por diseño

• 1 fuente: Para títulos (display o sans-serif bold)
• 1 fuente: Para cuerpo de texto (serif o sans-serif regular)
• 1 fuente opcional: Para acentos o datos (puede ser monospace o una variación de las anteriores)

Regla 2: Contraste, no conflicto

Las fuentes que combinés deben ser claramente diferentes, no "casi iguales". Dos sans-serif similares juntas se ven como un error.

Buenas combinaciones:

• Serif + Sans-serif (lo más clásico y seguro)
• Display + Sans-serif (impactante y legible)
• Sans-serif bold + Sans-serif light (misma familia, diferente peso)

Malas combinaciones:

• Dos display juntas (compiten por atención)
• Dos serif similares (parecen un error)
• Script + Script (ilegible y caótico)

Regla 3: Superfamilias son tu mejor amigo

Muchas fuentes vienen con múltiples pesos (Thin, Light, Regular, Medium, Bold, Black) y estilos (italic, condensed). Usar diferentes pesos de la misma familia garantiza cohesión.

Ejemplo con Inter:

• Título: Inter Bold 32px
• Subtítulo: Inter Medium 20px
• Cuerpo: Inter Regular 16px
• Caption: Inter Light 12px

Combinaciones probadas que siempre funcionan

Usar tamaños aleatorios crea caos visual. Usá una escala tipográfica basada en proporciones:

Escala modular (ratio 1.25)

• 12px → 15px → 19px → 24px → 30px → 37px → 47px

Escala para redes sociales

• Título principal: 40-60px (debe leerse en miniatura)
• Subtítulo: 24-32px
• Cuerpo de texto: 16-20px
• Caption/disclaimer: 12-14px

Escala para presentaciones

• Título de slide: 44-60px
• Subtítulo: 28-36px
• Bullet points: 20-24px
• Nota al pie: 14-16px

Son conceptos diferentes:

• Legibilidad (legibility): Qué tan fácil es distinguir una letra individual. Depende del diseño de la fuente.
• Lecturabilidad (readability): Qué tan fácil es leer un bloque de texto. Depende del tamaño, interlineado, largo de línea y contraste.

Tips para máxima lecturabilidad

• Largo de línea: 45-75 caracteres por línea (ideal: 65)
• Interlineado: 1.4x a 1.8x el tamaño de la fuente
• Espaciado entre párrafos: Igual o mayor al interlineado
• Contraste: Texto oscuro sobre fondo claro para lectura larga
• No uses texto totalmente negro (#000000): Usá un gris muy oscuro (#1a1a2e o #2d3748). Es más amable con los ojos.

Google Fonts (fonts.google.com)

Más de 1500 familias tipográficas gratuitas y de código abierto. Es el estándar de la industria para web y diseño digital.

Font Squirrel (fontsquirrel.com)

Fuentes gratuitas para uso comercial, curadas por calidad.

DaFont (dafont.com)

Enorme colección de fuentes decorativas. Ojo: verificá la licencia antes de usar comercialmente.

📺 Cómo elegir y combinar tipografías como un profesional

1. Abrí Google Fonts
2. Elegí una fuente serif y una sans-serif que combinen bien
3. Escribí un título de 5 palabras con la primera
4. Escribí un párrafo de 3 líneas con la segunda
5. Probá 3 tamaños diferentes para el título
6. Ajustá el interlineado hasta que se sienta "correcto"

Resumen

En la próxima lección, vamos a juntar todo lo aprendido en composición y layout: cómo organizar elementos en el espacio para crear diseños efectivos.