Vista previa y probador de fuentes gratuito

Lo que hace esta herramienta

Una herramienta de previsualización de fuentes muestra la misma cadena en muchas tipografías simultáneamente para que puedas compararlas lado a lado sin comprometerte con una. Escribe tu texto una sola vez en la parte superior (el nombre del proyecto, el titular que estás escribiendo, el wordmark de marca que estás eligiendo) y cada fuente de la galería muestra la misma cadena en su propio carácter. Ajusta el tamaño, color y fondo para probar cómo luce la comparación al tamaño y contraste con que aparecerá realmente en producción. Haz clic en cualquier fuente para copiar su declaración CSS font-family. La cadena de comparación tipográfica clásica «The quick brown fox jumps over the lazy dog» es un pangrama (cada letra del alfabeto inglés aparece al menos una vez), útil porque ejercita cada glifo que la tipografía tiene que ofrecer en una sola frase corta.

Fuentes web-safe

«Fuentes web-safe» es una expresión de principios a mediados de los años 2000, cuando las fuentes web CSS (@font-face) no contaban con soporte fiable. El conjunto se refería a tipografías preinstaladas en esencialmente todos los sistemas operativos de consumo, de modo que un diseñador podía especificarlas con la confianza de que el navegador del usuario las tendría localmente. La lista clásica de fuentes web-safe: Arial, Helvetica, Times New Roman, Times, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New, Courier, Lucida Console, Palatino, Garamond, Bookman, Comic Sans MS, Impact, Arial Black. Cada una tiene su historia, Arial fue la respuesta de Monotype a la presión de licencia de Microsoft para reemplazar Helvetica; Verdana y Georgia fueron encargadas por Microsoft a Matthew Carter en 1996 específicamente para la lectura en pantalla a las resoluciones de la época; Tahoma es la hermana más estrecha de Verdana. La convención web-safe perduró mucho después de que @font-face se volviera fiable (Internet Explorer la soportó desde la versión 4 en 1997, pero Firefox 3.5 en 2009 y Safari 3.1 en 2008 la hicieron viable entre navegadores) porque los diseñadores valoran el renderizado sin latencia y saben que las fuentes personalizadas cuestan idas y vueltas de red. La mejor práctica actual es una «pila de fuentes del sistema» (Apple -apple-system, luego BlinkMacSystemFont, luego Segoe UI, luego Roboto, luego sans-serif) que selecciona la fuente nativa de interfaz del SO del usuario sin descargar nada, rápida y visualmente apropiada para la plataforma.

Google Fonts y la era del alojamiento de fuentes web

Google Fonts se lanzó en mayo de 2010 como biblioteca CDN gratuita de tipografías de código abierto. El lanzamiento original tenía 18 fuentes; en 2026 el catálogo supera las 1500 familias, todas bajo licencia SIL Open Font License o similares permisivas. Open Sans (Steve Matteson, 2010), Roboto (Christian Robertson, 2011), Lato (Łukasz Dziedzic, 2010), Montserrat (Julieta Ulanovsky, 2011), Source Sans Pro (Paul Hunt para Adobe, 2012), Inter (Rasmus Andersson, 2016), Poppins (Indian Type Foundry, 2014), Nunito (Vernon Adams, 2011), están entre las tipografías más utilizadas en la web moderna, todas disponibles gratuitamente a través de Google Fonts. El mecanismo de carga del catálogo evolucionó con los años: el lanzamiento original de 2010 usaba etiquetas <link> hacia un endpoint CSS de Google; desde 2018 se enfatizó el parámetro display=swap para controlar el comportamiento FOUT/FOIT; la API de Google Fonts v2 de 2022 prerrendea subconjuntos para mejor rendimiento; en sitios sensibles a la privacidad se autoaloja con frecuencia las fuentes para evitar las preocupaciones de privacidad y cumplimiento RGPD del CDN de Google (un fallo judicial alemán de 2022 sostuvo específicamente que cargar Google Fonts desde los servidores de Google sin consentimiento del usuario viola el RGPD). Adobe Fonts (antes Typekit, adquirido en 2011), Fontshare (fuentes gratuitas de Indian Type Foundry, 2021), Bunny Fonts (espejo de Google Fonts respetuoso con la privacidad, 2021) son las principales alternativas.

Categorías de fuentes

• Las fuentes serif tienen pequeños trazos sobresalientes (serifas) en los extremos de las letras. Las serif de estilo antiguo (Garamond, Caslon, Goudy, Sabon) datan del siglo XVI y tienen bajo contraste entre trazos gruesos y finos. Las serif transicionales (Baskerville, Times New Roman) surgieron en el siglo XVIII con mayor contraste. Las serif modernas (Bodoni, Didot) llevan el contraste al extremo. Las serif slab (Rockwell, Roboto Slab, Courier) tienen serifas rectangulares pesadas. Para el cuerpo de texto web, las serif optimizadas para pantalla como Georgia (Matthew Carter para Microsoft, 1996), Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011) y PT Serif (Paratype, 2009) se leen mejor que las derivadas de impresión como Times New Roman.
• Las fuentes sans-serif no tienen serifas. Las sans geométricas (Futura, Avenir, Avant Garde) están construidas a partir de formas geométricas limpias. Las sans humanistas (Gill Sans, Frutiger, Open Sans, Source Sans Pro) toman proporciones de las letras romanas y suelen ser las más legibles para cuerpo de texto. Las sans grotescas (Helvetica, Arial, Akzidenz-Grotesk) son los caballos de batalla industriales del siglo XIX y XX. Las neogrotescas (Inter, Roboto, San Francisco, Segoe UI) son los valores predeterminados de interfaz modernos en los principales sistemas operativos y sistemas de diseño. Las sans-serif dominan el cuerpo de texto web porque siguen siendo legibles a tamaños menores en píxeles.
• Las fuentes monospace asignan el mismo ancho a cada carácter, diseñadas originalmente para máquinas de escribir y los primeros terminales informáticos donde cada carácter ocupaba una celda fija. Críticas para editores de código, terminales, documentación técnica y cualquier contexto donde la alineación importa. Las fuentes modernas para programadores (JetBrains Mono, Fira Code, Cascadia Code, IBM Plex Mono, Inconsolata, Source Code Pro) incluyen ligaduras de programación (=> → ⇒, != → ≠) y están diseñadas para la legibilidad en sesiones largas. SF Mono de Apple y Cascadia Code de Microsoft se distribuyen con sus respectivas herramientas de desarrollo.
• Las fuentes display están diseñadas únicamente para uso en tamaño grande, titulares, carteles, wordmarks de marca, hero text de página de inicio. Impact, Bebas Neue, Anton, Oswald, Playfair Display (la serif moderna de alto contraste), Abril Fatface, todas se leen mal en tamaños de cuerpo pero captan la atención en tamaños de titular. Combinar una fuente display de titular con una fuente de cuerpo limpia es el patrón tipográfico más común en sitios web modernos.
• Las fuentes manuscritas y script imitan estilos escritos a mano. Útiles con moderación para marca personal o de tipo invitación; casi imposibles de leer en tamaños de cuerpo; deben usarse como se usan las mayúsculas (brevemente, deliberadamente).

Fuentes variables, la silenciosa revolución moderna

La especificación OpenType Font Variations (TrueType GX Variations de Apple de 1994 + contribuciones de Adobe, conjuntamente estandarizadas como OpenType 1.8 en septiembre de 2016) permite que un solo archivo de fuente describa una familia infinita de variaciones relacionadas. Donde una familia tradicional distribuye archivos separados para Light, Regular, Medium, Bold, Black, más sus cursivas (de seis a diez archivos de 50-200 KB cada uno) una fuente variable distribuye un solo archivo que contiene todos los mismos diseños como variaciones continuas a lo largo de ejes (peso, anchura, inclinación, tamaño óptico y ejes personalizados arbitrarios que el diseñador tipográfico defina). El soporte de navegador llegó en Chrome 62 (octubre de 2017), Firefox 62 (septiembre de 2018), Safari 11.0 / 11.1 (2017-2018) y Edge con Chromium (2020). Los lanzamientos importantes de fuentes variables incluyen Roboto Flex (Christian Robertson + Font Bureau, octubre de 2022) que tiene 13 ejes; Recursive (Stephen Nixon, 2019); Inter (Rasmus Andersson) con ejes de peso + inclinación; y la mayoría de las grandes familias tipográficas ahora distribuyen versiones variables junto con los archivos estáticos tradicionales. El ahorro de ancho de banda es espectacular: un archivo de fuente variable de 200 KB reemplaza ocho archivos estáticos de 100 KB, ofreciendo además más flexibilidad de diseño.

Carga de fuentes y el problema FOUT/FOIT

Cuando un navegador descarga un archivo de fuente personalizada, ¿qué muestra mientras tanto? Dos estrategias extremas. FOIT (Flash of Invisible Text), no renderizar nada de texto hasta que llegue la fuente, luego mostrar el texto de golpe. La página parece rota hasta que carga la fuente. FOUT (Flash of Unstyled Text), renderizar el texto inmediatamente en una fuente de respaldo, luego cambiar a la fuente personalizada cuando llegue. La página es legible desde el primer fotograma pero el cambio resulta visualmente abrupto. La propiedad CSS font-display (añadida en CSS Fonts Module Level 4) da control a los desarrolladores: auto (predeterminado del navegador, generalmente con tendencia FOIT), block (FOIT completo), swap (FOUT completo, práctica recomendada moderna dominante), fallback (breve bloque invisible y luego cambio, con un respaldo «aceptable» tras unos segundos), optional (omitir por completo la fuente personalizada si no carga lo bastante rápido). Para Core Web Vitals y puntuaciones Lighthouse en 2026, font-display: swap es la recomendación estándar, junto con sugerencias preload para fuentes críticas y una fuente de respaldo cuidadosamente elegida que sea métricamente similar a la personalizada (para que el diseño no se reflowe al producirse el cambio, la nueva propiedad size-adjust en CSS Fonts Module Level 5 ajusta esto con precisión).

Elegir fuentes según el trabajo

• Texto de interfaz: pila de fuentes del sistema primero (Apple SF, Segoe UI, Roboto, sigue al SO del usuario) para latencia cero y aspecto adecuado a la plataforma. Si por razones de marca se requiere una fuente personalizada, elige una sans humanista (Inter, Open Sans, Source Sans Pro) a 16 px o más.
• Lectura larga (artículos, blogs): serif optimizada para pantalla (Georgia, Merriweather, Lora) a 18-22 px con interlineado generoso (1,6-1,8). Las serif facilitan el seguimiento ocular en líneas largas de texto.
• Wordmark de marca: un carácter display distintivo usado a un único tamaño grande. Combina con un carácter de cuerpo más neutro. Invertir aquí en una tipografía personalizada o encargada compensa, es la decisión tipográfica más visible de la marca.
• Bloques de código: una fuente de programación dedicada (JetBrains Mono, Fira Code, Cascadia Code) a 14-15 px. Las ligaduras de programación son una preferencia personal; muchos desarrolladores las adoran, otros las encuentran confusas.
• Tablas de números: una fuente con cifras tabulares (el dígito 1 ocupa el mismo ancho que 2, 3, etc.) para que las columnas de números se alineen sin relleno manual. La mayoría de las fuentes modernas ofrecen cifras tabulares mediante la propiedad font-variant-numeric: tabular-nums.
• Uso decorativo solamente: fuentes manuscritas, scripts, caracteres display retro. Úsalas brevemente y con intención; nunca para cuerpo de texto.

Preguntas frecuentes

¿Cuál es la diferencia entre fuentes web-safe y fuentes personalizadas?

Las fuentes web-safe vienen preinstaladas en los dispositivos de los usuarios, así que se renderizan al instante sin solicitud de red. Las fuentes personalizadas (Google Fonts, Adobe Fonts, @font-face autoalojado) deben descargarse, añadiendo latencia pero ofreciendo variedad visual más allá del conjunto del SO. La mayoría de los sitios web modernos usan una mezcla: una fuente personalizada como primaria, fuentes web-safe como respaldos a través de la pila font-family, y una pila de fuentes del sistema (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) para elementos de interfaz donde se prefiere un aspecto nativo a la plataforma.

¿Cómo usar una Google Font en mi sitio?

Dos formas. Alojado en CDN: añade una etiqueta <link> a fonts.googleapis.com en el <head> de tu HTML, luego referencia la fuente en CSS via font-family: 'Inter', sans-serif. Autoalojado: descarga los archivos WOFF2 desde Google Fonts, álojalos en tu propio dominio y decláralos con @font-face. El autoalojamiento es preferible en contextos sensibles a la privacidad (un tribunal alemán dictaminó en 2022 que cargar Google Fonts desde el CDN de Google sin consentimiento viola el RGPD). Añade font-display: swap para controlar el comportamiento de carga y precarga las fuentes críticas para mejor rendimiento.

¿Cuál es una buena fuente serif para el cuerpo de texto?

Georgia (Matthew Carter, encargada por Microsoft en 1996 específicamente para renderizado en pantalla) sigue siendo una excelente opción y viene preinstalada en todos los SO de consumo. Desde Google Fonts: Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011), PT Serif (Paratype, 2009), Source Serif Pro (Frank Grießhammer para Adobe, 2014). Evita Times New Roman para cuerpo web, diseñada para impresión periodística en tamaños pequeños, se lee apretada y desfasada en pantallas. Para titulares serif modernos de alto contraste, Playfair Display funciona estupendamente (evítala en cuerpo de texto, demasiado contraste a tamaños pequeños).

¿Funciona esta herramienta de previsualización sin conexión?

Las fuentes web-safe (Arial, Georgia, Verdana, etc.) funcionan sin conexión porque se cargan desde tu sistema operativo. Las Google Fonts de la galería requieren una descarga puntual desde el CDN de Google para renderizarse, una vez cargadas se cachean y la previsualización funciona sin conexión a partir de ese momento. Pon la página sin conexión (modo avión) tras la carga inicial para confirmarlo; las fuentes instaladas por el SO siguen renderizando, las Google Fonts usan lo que estuviera en caché.

Herramientas relacionadas