DISEÑO VISUAL · 02

Cada letra tiene una voz.

Compara fuentes reales, elige según el contexto y construye una escala que puedas repetir en toda la página.

DISEÑO QUE PUEDES PROBAR

Seis familias para empezar.

Estas categorías son una guía práctica y se solapan: slab es una clase de serif, y display describe un uso. Mira formas, proporciones y legibilidad, no solo la etiqueta.

Texto de la muestra

Cargando tipografías; si una no llega se muestra su alternativa.

SERIF · Lora

Sabor

Clásica, editorial, cálida.

Ideal como punto de partida: Restaurantes, lectura extensa, marcas con tradición.

Una serif robusta puede ser muy legible en pantalla; prueba tamaños pequeños y su contraste.

Ver familia y licencia

SERIF · Playfair Display

Sabor

Elegante, con contraste y voz editorial.

Ideal como punto de partida: Moda, portadas, títulos de marcas refinadas.

Sus detalles finos necesitan tamaño y contraste suficientes.

Ver familia y licencia

SANS-SERIF · Inter

Sabor

Neutral, funcional, centrada en interfaz.

Ideal como punto de partida: Apps, paneles, servicios y texto de pantalla.

Neutral no significa sin personalidad; peso y espaciado cambian su tono.

Ver familia y licencia

SANS-SERIF · Manrope

Sabor

Moderna, geométrica, abierta.

Ideal como punto de partida: Tecnología, educación, portafolios.

Una fuente geométrica debe probarse con párrafos reales, no solo logos.

Ver familia y licencia

SLAB SERIF · Roboto Slab

Sabor

Robusta, estable, con remates marcados.

Ideal como punto de partida: Titulares, blogs y marcas con presencia.

No asumas que todas las slab se comportan igual en cuerpo.

Ver familia y licencia

SLAB SERIF · Zilla Slab

Sabor

Editorial, cercana, con carácter.

Ideal como punto de partida: Publicaciones, cultura, marcas expresivas.

Revisa la densidad visual cuando subes el peso.

Ver familia y licencia

DISPLAY · Bebas Neue

Sabor

Condensada, directa, enérgica.

Ideal como punto de partida: Deportes, campañas y titulares cortos.

No es una elección cómoda para párrafos; principalmente mayúsculas.

Ver familia y licencia

DISPLAY · Abril Fatface

Sabor

Dramática, contrastada, protagonista.

Ideal como punto de partida: Portadas, cultura, titulares de gran tamaño.

Display es una función: puede ser serif o sans. Reserva su protagonismo.

Ver familia y licencia

MANUSCRITA · Caveat

Sabor

Espontánea, informal, personal.

Ideal como punto de partida: Notas cortas, educación creativa, eventos.

No para formularios, datos críticos o párrafos largos.

Ver familia y licencia

MANUSCRITA · Dancing Script

Sabor

Festiva, fluida, ceremonial.

Ideal como punto de partida: Bodas, invitaciones y detalles de marca.

Comprueba nombres, números y legibilidad antes de elegir.

Ver familia y licencia

MONOESPACIADA · JetBrains Mono

Sabor

Técnica, organizada, de código.

Ideal como punto de partida: Editores, código y estética de desarrollo.

Todos los caracteres ocupan el mismo ancho; puede cansar en lectura extensa.

Ver familia y licencia

MONOESPACIADA · IBM Plex Mono

Sabor

Precisa, sobria, tecnológica.

Ideal como punto de partida: Datos técnicos, etiquetas y documentación.

Para alinear cifras en una sans también existen números tabulares.

Ver familia y licencia

Más allá de seis etiquetas

También puedes estudiar serif de estilo antiguo, transicionales y didonas; sans humanistas, grotescas y geométricas; fuentes variables y familias con muchos idiomas. Una fuente variable permite ajustar ejes como peso o ancho, pero solo los que la familia ofrece.

DISEÑO QUE PUEDES PROBAR

Elige según la tarea y el contexto.

Una combinación recomendada es un punto de partida, no una norma de sector. Comprueba público, idioma, legibilidad, licencia y tono de marca.

UNA MISMA IDEA

Una experiencia que se recuerda.

Descubre una propuesta pensada para ti. Información clara, detalles cuidados y un siguiente paso sencillo.

DISEÑO QUE PUEDES PROBAR

Tipografía con sistema, no tamaños al azar.

Define funciones: etiqueta, cuerpo, subtítulo y título. Una escala modular aporta relaciones, pero puedes ajustarlas ópticamente.

ETIQUETA / CONTEXTO

Una jerarquía que se entiende.

Un subtítulo ordena la lectura.

Un cuerpo legible necesita espacio entre líneas y una medida cómoda. No escales todos los textos del mismo modo: títulos, botones, tablas y notas tienen tareas distintas.

Nota secundaria, con tamaño legible.

Familias: Una o dos suelen bastar. Si usas más, asigna una función estable a cada una.
Pesos: Selecciona los necesarios; cargar muchos archivos aumenta el coste de la página.
Medida: Un ancho aproximado de 45–75 caracteres puede servir como punto de partida para párrafos; pruébalo con tu fuente y contenido.
Escala: Usa rem para tamaños base y clamp para titulares adaptables, sin impedir el zoom.

DISEÑO QUE PUEDES PROBAR

La prueba real está en el contenido.

“Aa” ayuda a ver formas; un párrafo, un precio y una dirección ayudan a decidir si sirven.

Idioma y cobertura

Prueba ñ, tildes, ¿?, ¡!, símbolos monetarios, números y nombres propios. Una alternativa puede cambiar la medida del texto.

Contexto de lectura

Compara móvil y escritorio, texto largo y controles. Prueba tamaño ampliado y conexión lenta.

Accesibilidad

No uses pesos excesivamente finos ni color tenue para información esencial. La elección debe facilitar la lectura.

Una receta que puedes copiar

:root {
  --font-body: "Inter", system-ui, sans-serif;
  --font-heading: "Lora", Georgia, serif;
}
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }
.texto { max-width: 65ch; }

Consulta Google Fonts Knowledge para profundizar en anatomía, clasificación y selección.

PIENSA ANTES DE APLICAR