¿Qué es Probador de tipografía?

El probador de tipografía te permite ajustar propiedades de fuentes y ver los resultados en tiempo real. Elige una familia tipográfica, modifica tamaño, peso, altura de línea y espaciado, y copia el CSS directo a tu proyecto.

El tester permite ajustar familia tipográfica, tamaño, peso (100 a 900), altura de línea, espaciado entre letras, espaciado entre palabras, alineación, transformación de texto y color. El texto de muestra es editable, así puedes previsualizar tus propios titulares o párrafos, y el panel de CSS se copia con un clic para pegarlo en una hoja de estilos o en un componente.

Cómo usar

1. Escribe o pega tu texto de muestra en el área de vista previa.
2. Ajusta los controles tipográficos: familia de fuentes, tamaño, peso, altura de línea, espaciado entre letras y espaciado entre palabras.
3. Copia la salida CSS para usar directamente la configuración tipográfica en tu proyecto.

Cuándo usar

• Afinar el cuerpo de un blog hasta que 18 px Inter con interlineado 1,6 se lea cómodo en el móvil.
• Probar un artículo largo en 16, 17 y 18 px para ver qué tamaño mantiene al lector enganchado.
• Comprobar si subir el letter-spacing arregla la sensación apretada de un botón en mayúsculas.

Resultado

Un diseñador web prueba 'Inter' a 18 px con una altura de línea de 1,6 y un espaciado entre letras de 0,02 em, luego copia el CSS para la hoja de estilos de su blog.

Preguntas frecuentes

¿Qué interlineado va bien para texto corrido?

Para párrafos largos a 16-18 px, una altura de línea de 1,5 a 1,7 resulta cómoda en pantalla. Los titulares respiran mejor con valores más cerrados, en torno a 1,1 a 1,3. Escribe titular y párrafo en la caja de muestra para comparar.

¿Por qué el letter-spacing va en em y no en px?

Em escala con el tamaño de letra, así que un valor de 0,02 em se ve proporcionalmente igual a 14 px o a 48 px. Un valor en píxeles puede quedar bien a un tamaño y descuadrado en otro.

¿Qué pesos de fuente son seguros en la web?

Las Google Fonts y las fuentes variables modernas soportan de 100 a 900, pero algunas fuentes auto-alojadas sólo traen 400 y 700. Si la previsualización no cambia al modificar el peso, la fuente no lo tiene y el navegador simula un estilo falso.

¿Puedo probar fuentes que la página no haya precargado?

Elige en el menú de fuentes incorporado: trae un buscador y filtros de Sans / Serif / Monoespaciada / Sistema, y cualquier Google Font que elijas se carga sola. Cambia a la vista Galería para ver tu texto de muestra en todas las fuentes a la vez, o activa Comparar para poner dos tipografías lado a lado. Subir un archivo de fuente propio no está disponible aquí; para eso necesitas un @font-face en tu sitio.

¿Cómo paso el CSS a un proyecto React o Tailwind?

Pulsa Copiar CSS para llevarte cada propiedad como declaración estándar. En React, pégalo dentro de un template literal de styled-components o convierte cada línea a clave camelCase. En Tailwind, mapea tamaño y peso a clases utilitarias y conserva tracking e interlineado con valores arbitrarios.

Herramientas relacionadas