Cargando aplicación...
Preparando tu experiencia meskeIA
Explora y compara fuentes de Google Fonts
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">font-family: 'Roboto', sans-serif; font-size: 32px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; text-align: left;
Fuentes limpias sin remates. Ideales para pantallas y diseño moderno
Fuentes con remates clásicos. Perfectas para textos largos y elegancia
Caracteres de ancho fijo. Esenciales para código y datos técnicos
Fuentes decorativas para títulos grandes y elementos destacados
Todo lo que necesitas saber para elegir y combinar fuentes como un diseñador
| Familia | Característica | Sensación | Mejor uso | Ejemplos |
|---|---|---|---|---|
| Serif | Remates (pequeños trazos) en los extremos de las letras | Clásica, elegante, confiable, autoritaria | Textos largos en papel, logotipos premium, editorial | Times New Roman, Georgia, Garamond, Playfair Display |
| Sans-serif | Sin remates; trazos uniformes y limpios | Moderna, limpia, accesible, tecnológica | Pantallas, UI, titulares, cuerpo digital | Arial, Helvetica, Inter, Roboto, Open Sans |
| Monospace | Todos los caracteres tienen el mismo ancho | Técnica, precisa, retro, código | Código fuente, terminales, tablas de datos | Courier New, JetBrains Mono, Fira Code, Consolas |
| Display / Decorativa | Diseñada para tamaños grandes; muy expresiva | Impactante, creativa, personalidad fuerte | Títulos grandes, carteles, branding, logos | Bebas Neue, Lobster, Oswald, Impact |
| Script / Caligráfica | Imita la escritura a mano; fluida y conectada | Personal, artesanal, romántica, festiva | Invitaciones, logotipos artesanales, titulares especiales | Pacifico, Dancing Script, Great Vibes |
En pantallas, las sans-serif dominan por su legibilidad en resoluciones variables. La combinación estándar es: una sans-serif para cuerpo (Inter, Roboto, Open Sans) y una display o serif para títulos. El tamaño mínimo legible en cuerpo es 16px; en móvil nunca bajar de 14px. El interlineado óptimo (line-height) es 1,5-1,6× el tamaño de fuente.
La tipografía comunica la personalidad de una marca antes de que el usuario lea una sola palabra. Marcas tecnológicas usan sans-serif geométricas (Apple: San Francisco, Google: Product Sans). Bancos y seguros prefieren serif (Times, Garamond) para transmitir solidez. El fast food usa display robustas (Impact) para urgencia y apetito. Elegir mal la tipografía corporativa puede contradecir todos los demás valores de marca.
En PowerPoint/Keynote, la regla es: no más de 2 fuentes, máximo 3 tamaños distintos. Para presentaciones proyectadas, mínimo 24pt para cuerpo (la regla de Guy Kawasaki: tamaño de fuente = edad del oyente más mayor dividida entre 2). Para documentos impresos profesionales, Georgia o Palatino para el cuerpo y una sans-serif para los títulos funciona muy bien.
Las fuentes diseñadas para accesibilidad (Atkinson Hyperlegible, Lexie Readable, OpenDyslexic) reducen la confusión entre caracteres similares (I/l/1, 0/O, b/d). Las WCAG 2.1 recomiendan al menos 4,5:1 de contraste entre texto y fondo. Las fuentes monoline sin rasgos decorativos excesivos benefician a lectores con dislexia o visión reducida. El tamaño importa más que la familia: 16px legible > 12px con una fuente "perfecta".
La regla general es máximo 2-3 fuentes por diseño. Una para cuerpo (texto corrido), una para títulos/encabezados, y opcionalmente una tercera para elementos de acento o código. Más de 3 fuentes crea caos visual, aumenta el tiempo de carga web (cada Google Font es una petición HTTP) y dificulta la consistencia. Dentro de una misma familia tipográfica puedes tener gran variedad usando pesos (light, regular, medium, bold) e itálica, lo que se ve coherente.
La legibilidad depende de varios factores: altura de la x (x-height) alta → más legible en cuerpo pequeño; contraformas abiertas (el espacio interior de la "a", "e", "c") → reduce confusión entre caracteres; uniformidad del peso del trazo → menos fatiga visual; espaciado entre letras (tracking) equilibrado; distinción entre caracteres similares (I, l, 1; O, 0; b, d, p, q). Las fuentes diseñadas para interfaces (Inter, Roboto) optimizan todos estos factores para uso digital.
La creencia tradicional era "serif para impreso, sans-serif para pantalla". Con las pantallas de alta resolución actuales (Retina, 4K), los estudios de legibilidad muestran que la diferencia es mínima y depende más del tamaño, el interlineado y el contraste que de la familia. Medium, The New York Times digital y muchos libros digitales de calidad usan serif sin problema. La elección debe basarse en la marca, el tono y el contexto, no en dogmas tipográficos desactualizados.
Principios de emparejamiento tipográfico: (1) Contraste, no conflicto: combina familias distintas (serif + sans-serif) en lugar de dos fuentes similares que compiten. (2) Jerarquía clara: una domina (cuerpo) y la otra acenta (títulos). (3) Coherencia de época: fuentes del mismo periodo histórico o escuela de diseño suelen funcionar juntas. (4) Usar superfamilias: familias como Source Serif + Source Sans, o Noto Serif + Noto Sans, están diseñadas para usarse juntas. Google Fonts tiene una herramienta de "font pairing" que muestra combinaciones probadas.
La mayoría de fuentes en Google Fonts se distribuyen bajo licencias SIL Open Font License (OFL) o Apache License 2.0, que permiten uso gratuito en proyectos comerciales, incluyendo aplicaciones, sitios web y productos impresos. Sin embargo, siempre verifica la licencia individual de cada fuente en su página de detalle. Algunas fuentes en Google Fonts tienen restricciones específicas. Las fuentes de Adobe Fonts (Typekit) requieren suscripción a Creative Cloud y tienen restricciones de redistribución más estrictas.
Cada variante de peso (light, regular, medium, bold, etc.) de una Google Font es un archivo separado de 30-150 KB. Cargar 4 pesos de 2 familias = 8 archivos = potencialmente 400-800 KB extra. Las mejores prácticas: (1) carga solo los pesos que realmente usas; (2) usa el atributo font-display: swap para que el texto sea visible mientras carga; (3) considera las fuentes del sistema (system-ui, -apple-system) para cuerpo si la velocidad es prioritaria; (4) usa el subconjunto de caracteres latinos si no necesitas los 900+ caracteres del juego completo Unicode.
El kerning es el ajuste del espacio entre pares de caracteres específicos para que visualmente parezcan equidistantes (aunque físicamente no lo sean). El par "AV" necesita estar más cerca que "II" para parecer el mismo espacio. Las fuentes bien diseñadas incluyen tablas de kerning extensas. El tracking (letter-spacing en CSS) ajusta el espacio uniformemente entre todos los caracteres. Regla: el tracking positivo (letras más separadas) funciona bien en titulares grandes o texto en mayúsculas; el tracking negativo (letras más juntas) puede usarse en titulares muy grandes. En cuerpo, no tocar el tracking.
Las grandes empresas suelen crear sus propias tipografías para control total: Apple: SF Pro (San Francisco, 2015) para iOS/macOS/watchOS. Google: Product Sans para branding, Roboto para Android. Microsoft: Segoe UI para Windows. Airbnb: Cereal. Netflix: Netflix Sans. Spotify: Circular. Para la web, las más usadas según Google Fonts Analytics son: Roboto, Open Sans, Lato, Oswald, Raleway, Montserrat. En España, el Gobierno usa Archivo, Rubik y fuentes del sistema según la guía de accesibilidad de Administración Digital.
Antes de abrir Google Fonts, responde: ¿qué adjetivos definen tu marca o proyecto? ¿Moderno o clásico? ¿Serio o juguetón? ¿Tecnológico o artesanal? Esos adjetivos mapean directamente a familias tipográficas: moderno → sans-serif geométrica; clásico → serif con historia; artesanal → script o display con personalidad.
El 80% del texto está en el cuerpo. Empieza por ahí. Busca: alta x-height, contraformas abiertas, buen rendimiento en tamaños pequeños (16-18px en web). Prueba escribiendo un párrafo completo en el generador, no solo "The quick brown fox". ¿Es cómoda de leer varios párrafos seguidos?
Una vez fijada la fuente de cuerpo, busca un contraste visual claro para los títulos. Si el cuerpo es sans-serif, prueba una serif para títulos (y viceversa). O usa la misma familia pero en peso bold/extrabold. El contraste de peso (light vs bold) dentro de la misma familia es la combinación más segura y elegante.
Crea un prototipo de baja fidelidad con el texto real del proyecto (no "Lorem Ipsum"). Mira cómo quedan los títulos largos, los párrafos de 3-4 líneas, las listas, los números. Algunos problemas tipográficos solo se ven en contexto: números mal diseñados, comillas incorrectas para el español, falta de la ñ o tildes en la versión gratuita.
Confirma que la fuente incluye todos los caracteres que necesitas: ñ, tildes (á,é,í,ó,ú), ¡¿, €, y cualquier carácter especial de tu idioma. Verifica la licencia para el uso previsto (web, app, impreso, redistribución). Comprueba cuántos pesos están disponibles — una fuente con solo 2 pesos limita la jerarquía visual.
Define los tamaños para cada nivel jerárquico: H1, H2, H3, cuerpo, caption, etiquetas. Usa una escala modular (ratio 1,25 o 1,333): si el cuerpo es 16px, los títulos serían 20 → 25 → 31 → 39px. Documenta también los pesos (light/regular/bold) y colores para cada nivel. Esta guía de estilos evita inconsistencias cuando el proyecto crece.
El line-height óptimo para legibilidad en cuerpo de texto es 1,4-1,6 veces el tamaño de fuente. Para 16px de cuerpo: 24-26px de interlineado. Menos → las líneas se solapan visualmente. Más → se pierde la cohesión del párrafo.
La longitud ideal de una línea de texto es 65-75 caracteres (incluyendo espacios). Más largo → el ojo se cansa de volver al inicio. Más corto → demasiados saltos de línea. En CSS: max-width de 60-70ch para columnas de texto.
El estándar de accesibilidad web WCAG 2.1 requiere 4,5:1 de contraste entre texto y fondo para AA, y 7:1 para AAA. Texto negro (#000) sobre blanco (#fff) = 21:1. Gris medio (#767676) sobre blanco = 4,54:1, exactamente en el límite. Usa la herramienta de contraste de WebAIM para verificar.
El texto en mayúsculas es más difícil de leer sin espacio adicional entre letras. Cuando uses uppercase en CSS, añade siempre letter-spacing: 0.05-0.1em. Las mayúsculas sin tracking parecen apretadas y difíciles de leer, especialmente en etiquetas pequeñas y botones.
Las itálicas de fuentes sans-serif (especialmente las "oblique", que son solo versiones inclinadas matemáticamente) pierden legibilidad en tamaños pequeños. Si necesitas énfasis en cuerpo pequeño, usa bold en lugar de itálica, o una fuente con itálica verdadera (calligraphic italic) bien diseñada.
Las fuentes decorativas y display son poderosas en títulos grandes pero ilegibles en cuerpo. Regla de oro: si usas una display font, que sea solo para 1-5 palabras en tamaño grande. Nunca uses una fuente decorativa para párrafos completos, formularios o botones con texto largo.