Prévia de Tipografia CSS
Ajuste font-size, line-height e letter-spacing em tempo real.
Copia el CSS con un clic.
↑ Haz clic en el texto de arriba para editarlo directamente
Sobre
La Vista Previa de Tipografía CSS te permite ajustar font-size, line-height, letter-spacing y font-weight con sliders y ver el resultado inmediatamente en un área de vista previa en vivo.
Compatible con Google Fonts, incluidas fuentes japonesas. Una vez que estés satisfecho con la configuración, copia el CSS generado con un clic. Solo la carga de Google Fonts implica comunicación de red externa; el texto y la configuración nunca se transmiten.
Cómo Usar
Ajusta los sliders
Arrastra los sliders de font-size, line-height, letter-spacing y font-weight. O comienza desde un preajuste para los casos de uso más comunes.
Revisa la vista previa
Observa los cambios al instante en el área de vista previa. Haz clic en el texto para editarlo con tu propio contenido.
Copia el CSS
Haz clic en "Copiar CSS" para llevar el código al portapapeles y pegarlo en tu hoja de estilos.
Glossário
- font-size
- Define el tamaño de la fuente. Se puede especificar en px, em, rem, %, etc. El valor por defecto del navegador es 16px.
- line-height
- Define la altura de la línea. Se recomienda un valor sin unidad (ej. 1.75). Para texto de cuerpo, 1.5–1.8 es habitual.
- letter-spacing
- Define el espaciado entre caracteres. Se recomiendan unidades em para un diseño escalable.
- font-weight
- Define el grosor de la fuente. Los valores van de 100 (fino) a 900 (extra negrita).
- font-family
- Especifica el tipo de letra. Se pueden listar múltiples fuentes de reserva separadas por comas.
- Tipografía
- El arte de combinar tipos para que el lenguaje escrito sea legible, legible y atractivo visualmente.
- Google Fonts
- Servicio gratuito de fuentes web de Google. Las fuentes se cargan mediante una etiqueta link CSS y se aplican con font-family.
- Fuente web
- Fuente cargada desde un servidor mediante @font-face. Garantiza una representación coherente entre dispositivos.
FAQ
- Q.¿Mi texto se envía a algún servidor?
- No. El texto de vista previa y toda la configuración se procesan localmente en tu navegador.
- Q.¿Por qué la carga de Google Fonts implica solicitudes externas?
- Solo el archivo de fuente se descarga de los servidores de Google. El texto y la configuración nunca se transmiten.
- Q.¿Puedo usar fuentes que no están en la lista?
- Puedes cargar cualquier Google Font añadiendo su nombre a la propiedad font-family en tu hoja de estilos. La lista integrada cubre las opciones más populares.
- Q.¿Funciona en móvil?
- Sí. Los sliders admiten entrada táctil.
- Q.¿Puedo ingresar valores exactos en lugar de usar sliders?
- No directamente. Usa los preajustes para los valores habituales y luego ajusta con los sliders.
Casos de Uso
Tipografía para Diseño Web
Encuentra visualmente la combinación ideal de font-size y line-height para encabezados, cuerpo y leyendas.
Optimización de Legibilidad en Blog
Ajusta el interlineado y el espaciado para mejorar la legibilidad de artículos largos.
Comprobación de Fuentes para Presentaciones
Verifica que el tamaño y el peso de la fuente se vean bien antes de finalizar la tipografía de las diapositivas.
Aprender CSS
Comprende visualmente cómo funciona cada propiedad de tipografía CSS experimentando en tiempo real.