Visor de pesos de fuente

• Previsualización instantánea de pesos: previsualiza al instante todos los pesos disponibles de cualquier Google Font lado a lado. Nuestro visor de pesos de fuente carga la fuente elegida directamente desde Google Fonts y renderiza todos los pesos (de Thin 100 a Black 900) en una sola vista, sin recargar la página.
• Visor de pesos de fuente online y seguro: nuestro visor de pesos de fuente funciona enteramente en tu navegador. Las fuentes se cargan directamente desde la CDN de Google Fonts: no se envían datos a ningún servidor y tu texto de previsualización permanece totalmente privado en tu dispositivo.
• Visor de pesos de fuente sin instalación: usa nuestro visor de pesos de fuente directamente en cualquier navegador, sin descargas, complementos ni cuenta. Previsualiza los pesos de cualquier Google Font desde cualquier dispositivo y en cualquier lugar, totalmente gratis.
• Varios modos de visualización: elige entre Apilado (filas a tamaño completo), Compacto (filas más pequeñas para comparar rápido) o Comparación. Filtra para mostrar solo los pesos disponibles, ajusta el tamaño de la previsualización de 14 px a 48 px y copia la declaración CSS font-weight de cualquier peso con un clic.

• Elegir el peso adecuado para la interfaz: usa nuestro visor de pesos de fuente para comparar cómo se ve una fuente en distintos pesos antes de fijarla en tu sistema de diseño. Comprueba si 500 o 600 funciona mejor en tus títulos, o si 300 es demasiado ligero para el texto del cuerpo en el tamaño objetivo.
• Diseño de escalas tipográficas: diseña una escala tipográfica completa previsualizando cómo interactúan los distintos pesos. Nuestro visor de pesos de fuente muestra todos los pesos lado a lado para que elijas la combinación adecuada para títulos, subtítulos, cuerpo de texto y pies de foto.
• Investigación de combinaciones de fuentes: investiga combinaciones de fuentes previsualizando el rango de pesos de cada candidata. Algunas fuentes tienen soporte de pesos limitado: nuestro visor muestra con claridad qué pesos están disponibles y cuáles no, evitando que descubras carencias después de implementar.
• Pruebas de accesibilidad y legibilidad: prueba la legibilidad del peso de fuente a distintos tamaños. Nuestro visor te permite ajustar el tamaño de previsualización de 14 px a 48 px mientras comparas todos los pesos, ayudándote a verificar que el peso elegido es legible en tamaños pequeños para el texto del cuerpo.
• Referencia CSS font-weight: usa nuestro visor de pesos de fuente como referencia rápida al escribir CSS. Cada tarjeta de peso muestra el valor numérico y el nombre (Thin, Light, Regular, Medium, Bold, etc.) con un botón de copiado en un clic de la declaración CSS font-weight.
• Presentaciones a clientes y revisiones de diseño: muestra a tus clientes todo el rango de pesos de una fuente propuesta durante las revisiones de diseño. Nuestro visor renderiza la fuente con el texto real de la marca del cliente, lo que facilita demostrar cómo se verá en distintos contextos de interfaz.

Un visor de pesos de fuente muestra todas las variantes de peso disponibles de una tipografía lado a lado, de Thin (100) a Black (900), para que puedas compararlas visualmente antes de decidir qué pesos incluir en tu proyecto. No todas las fuentes admiten los nueve pesos; nuestro visor indica con claridad qué pesos están disponibles en cada Google Font y atenúa los que no lo están. Todas las fuentes se cargan directamente desde la CDN de Google Fonts: no se envían datos a ningún servidor y tu texto de previsualización permanece privado en tu dispositivo.

1. Elige una fuente: busca cualquier Google Font por nombre en el cuadro de búsqueda. El visor de pesos de fuente muestra las más de 80 fuentes disponibles con su categoría y número de pesos. Haz clic en cualquier fuente para cargarla al instante.
2. Previsualiza todos los pesos: el visor de pesos de fuente renderiza todos los pesos (100-900) lado a lado con tu texto de previsualización personalizado. Los pesos disponibles se muestran completos; los no disponibles aparecen atenuados. Activa «Solo disponibles» para ocultar los no disponibles.
3. Copia y usa: haz clic en el icono de copiar de cualquier tarjeta de peso para copiar la declaración CSS font-weight. La sección de referencia CSS de la parte inferior incluye la URL @import de Google Fonts y todos los valores font-weight disponibles listos para pegar en tu hoja de estilos.

• 100 - Thin: el peso más ligero. Úsalo con moderación solo para textos grandes de display; es demasiado ligero para cuerpo de texto en tamaños pequeños.
• 300 - Light: algo más ligero que el regular. Funciona bien en subtítulos y textos secundarios cuando se combina con un peso más grueso para los títulos.
• 400 - Regular: el peso predeterminado. La opción estándar para el cuerpo de texto y la base de la mayoría de las escalas tipográficas.
• 700 - Bold: el peso negrita estándar. Se usa en títulos, énfasis y etiquetas de interfaz. Es el peso más usado después de Regular.

Cada peso de fuente que cargas desde Google Fonts suma solicitudes de red a tu página y tamaño total del archivo de fuente. Para la mayoría de los proyectos basta con cargar 2-3 pesos: normalmente Regular (400), Medium o SemiBold (500-600) para etiquetas de interfaz y Bold (700) para títulos. Evita cargar pesos que no uses. Nuestro visor de pesos de fuente te ayuda a identificar exactamente qué pesos necesitas antes de añadirlos a tu URL de importación de Google Fonts, evitando la carga innecesaria de pesos que ralentiza tu página.