Vista previa de fuentes de Google

• Vista previa y comparación instantáneas de fuentes: obtenga una vista previa de cualquier fuente de Google con texto, tamaño, grosor y altura de línea personalizados y compare dos fuentes una al lado de la otra. Google Fonts Previewer actualiza la vista previa en tiempo real a medida que ajustas cada configuración, sin necesidad de recargar la página.
• Biblioteca seleccionada de más de 60 fuentes de Google: explore una colección cuidadosamente seleccionada de las fuentes de Google más populares y versátiles en 5 categorías: Sans Serif, Serif, Display, Handwriting y Monospace. Busque por nombre de fuente, categoría o descripción para encontrar el tipo de letra perfecto.
• Copiar y pegar etiquetas CSS y HTML: no es necesario visitar el sitio web de Google Fonts. Google Fonts Previewer genera declaraciones @import, etiquetas y declaraciones de familias de fuentes CSS listas para usar para cualquier fuente y peso que elija. Copia con un clic.
• Control completo de tipografía: ajuste el tamaño de fuente de 8 px a 128 px, elija entre 9 niveles de peso (delgado a negro), cambie la cursiva y establezca la altura de la línea. Obtenga una vista previa de su texto exacto, desde títulos cortos hasta párrafos largos, para ver cómo se comporta la fuente en contexto.

• Desarrollo web y diseño CSS: los desarrolladores de aplicaciones para el usuario utilizan Google Fonts Previewer para buscar y probar tipos de letra antes de comprometerse con un diseño. Obtenga una vista previa de cómo se representan las fuentes en diferentes tamaños y pesos, luego copie el @import exacto o la etiqueta directamente en su código base sin visitar el sitio web de Google Fonts.
• Creación de prototipos de diseño web y de interfaz de usuario: los diseñadores utilizan Google Fonts Previewer para evaluar los pares de fuentes y las jerarquías de tipos durante el proceso de diseño. Compare las fuentes del encabezado y del cuerpo, una al lado de la otra, con contenido de texto real para garantizar que la combinación funcione en contexto antes de presentarla a los clientes.
• Estrategia de contenido y diseño de blogs: los estrategas de contenido y los editores de blogs utilizan el Vista previa de fuentes de Google para elegir fuentes legibles para el cuerpo del contenido de formato largo. Pruebe el texto del párrafo en tamaños de lectura y alturas de línea típicos para garantizar experiencias de lectura cómodas para cada visitante.
• Páginas de destino y sitios de marketing: los equipos de marketing utilizan Google Fonts Previewer para seleccionar fuentes de visualización para secciones principales y encabezados de llamado a la acción. Obtenga una vista previa del texto grande con diferentes pesos para encontrar el equilibrio perfecto entre impacto visual y legibilidad.
• Tipografía móvil y responsiva: los diseñadores móviles utilizan Google Fonts Previewer para probar cómo se comportan las fuentes en tamaños pequeños en las pantallas. Ajuste el tamaño de fuente y la altura de la línea para encontrar la experiencia de lectura óptima para los usuarios de dispositivos móviles manteniendo la tipografía de la marca.
• Identidad de marca y selección de tipo: los diseñadores de marca utilizan Google Fonts Previewer para evaluar tipos de letra para proyectos de identidad de marca. Compare hasta dos fuentes simultáneamente con texto de muestra específico de la marca (títulos, lemas y texto del cuerpo) para tomar decisiones tipográficas informadas.

Google Fonts Previewer es una herramienta basada en navegador que le permite obtener una vista previa, comparar e integrar fuentes de la biblioteca de Google Fonts, sin visitar el sitio web de Google Fonts ni realizar llamadas API externas. Cuenta con una colección seleccionada de más de 60 fuentes populares de Google en 5 categorías (Sans Serif, Serif, Display, Handwriting y Monospace), cada una cuidadosamente seleccionada por su calidad, versatilidad y amplia compatibilidad con idiomas. Puede buscar por nombre, categoría o descripción del carácter del tipo de letra y luego obtener una vista previa de cualquier fuente con texto personalizado, tamaño (8 px a 128 px), peso (9 niveles de fino a negro), alto de línea y alternancia de cursiva. El modo de comparación lado a lado le permite evaluar dos fuentes simultáneamente. Una vez que haya encontrado el tipo de letra perfecto, la herramienta genera declaraciones de familias de fuentes @import, <link> y CSS listas para usar que puede copiar con un solo clic.

1. Encuentre su fuente: use la barra de búsqueda para escribir el nombre de una fuente (por ejemplo, "Inter", "Playfair") o busque por categoría usando los filtros. Los resultados se actualizan instantáneamente a medida que escribe: cada tarjeta de fuente muestra el nombre del tipo de letra, la categoría y una breve descripción del carácter. Haga clic en cualquier fuente para cargarla en el panel de vista previa.
2. Personalice la vista previa: ajuste el peso de la fuente usando los botones de peso preseleccionados disponibles para esa fuente. Utilice la entrada de texto para escribir su propio texto de muestra, luego ajuste el tamaño de fuente, la altura de la línea y alterne la cursiva. La vista previa se actualiza en tiempo real a medida que realiza cambios. Utilice el modo de comparación lado a lado para evaluar dos fuentes simultáneamente.
3. Copie el código: una vez que esté satisfecho con una fuente, haga clic en los botones "Copiar @import", "Copiar <enlace>" o "Copiar CSS" para obtener el código exacto necesario para integrar la fuente en su proyecto. Todo el código se genera utilizando el formato API CSS oficial de Google Fonts y está listo para pegarse en su archivo HTML o CSS.

• Sans Serif: tipos de letra limpios y modernos sin trazos decorativos. Excelente para el cuerpo del texto en pantallas e interfaces de interfaz de usuario. Las opciones populares incluyen Inter, Roboto, Open Sans y Poppins. Las fuentes sans serif son la categoría más versátil y funcionan bien tanto para títulos como para el cuerpo del texto.
• Serif: tipos de letra tradicionales con pequeños trazos decorativos (serifas) al final de las letras. Excelente para lecturas extensas y para establecer un tono clásico y confiable. Merriweather, Playfair Display y Lora son populares por su diseño editorial.
• Pantalla: tipos de letra decorativos diseñados para tamaños grandes: titulares, carteles y secciones de héroes. Las fuentes para display suelen tener formas de letras distintivas y expresivas que las hacen inadecuadas para el cuerpo del texto. Oswald, Anton y Unbounded son buenas opciones de visualización.
• Escritura a mano: tipos de letra informales, tipo escritura, que imitan la escritura natural. Es mejor usarlo con moderación para enfatizar o contextos informales. Dancing Script y Caveat son fuentes de escritura a mano populares que siguen siendo legibles en tamaños moderados.
• Monoespacio: Tipos de letra donde cada carácter ocupa el mismo ancho horizontal. Diseñado para editores de código, pantallas de terminales y datos tabulares. JetBrains Mono, Fira Code y Source Code Pro ofrecen excelentes ligaduras de programación.

Seleccionar el tipo de letra adecuado para su sitio web implica algo más que elegir una fuente que le guste. Aquí hay consideraciones clave:

• Rendimiento de carga: cada fuente de Google agrega una solicitud HTTP y un peso de página adicional. Limite su sitio a 2 o 3 familias de fuentes (normalmente una fuente de encabezado y una fuente de cuerpo). Utilice font-display: swap para evitar texto invisible durante la carga de fuentes.
• Armonía de combinación: combine una fuente de título serif con una fuente de cuerpo sans-serif (o viceversa) para lograr un contraste visual. Evite emparejar dos fuentes de la misma categoría que se parezcan demasiado; la diferencia debe ser intencional y notable.
• Disponibilidad de peso: no todas las fuentes admiten los 9 niveles de peso. La vista previa de fuentes de Google solo muestra los pesos realmente disponibles para cada fuente. Elija una fuente con suficiente variación de peso (por ejemplo, 400, 600, 700) para una jerarquía de tipos funcional.
• Compatibilidad con idiomas: si su contenido incluye caracteres no latinos (cirílico, griego, vietnamita, etc.), verifique que la fuente admita esos conjuntos de caracteres. Google Fonts proporciona subconjuntos de URL para muchos idiomas.