Aperçu de Typographie
Adjust font-size, line-height & letter-spacing live.
Copy the CSS with one click.
↑ Click the text above to edit it directly
Aperçu
The Typography Preview tool lets you adjust font-size, line-height, letter-spacing, and font-weight with sliders and see the result immediately in a live preview area.
Supports Google Fonts including Japanese fonts. Once you're happy with the settings, copy the CSS output with one click. Only Google Fonts loading involves external network requests — your text content and settings are never transmitted.
Comment utiliser
Ajuster les curseurs
Faites glisser les curseurs font-size, line-height, letter-spacing et font-weight. Ou commencez à partir d'un préréglage pour les cas d'utilisation courants.
Vérifier l'aperçu
Voyez les changements instantanément dans la zone d'aperçu. Cliquez sur le texte pour le modifier avec votre propre contenu.
Copier le CSS
Cliquez sur "Copier le CSS" pour copier le code généré dans votre presse-papiers et le coller dans votre feuille de style.
Glossaire
- font-size
- Sets the size of the font. Can be specified in px, em, rem, %, etc. The browser default is 16px.
- line-height
- Sets the height of a line. A unitless value (e.g., 1.75) is recommended. For body text, 1.5–1.8 is common.
- letter-spacing
- Sets the spacing between characters. em units are recommended for scalable design.
- font-weight
- Sets the weight (thickness) of the font. Values range from 100 (thin) to 900 (heavy).
- font-family
- Specifies the typeface. Multiple fallbacks can be listed separated by commas.
- Typography
- The art of arranging type to make written language readable, legible, and appealing.
- Google Fonts
- A free web font service by Google. Fonts are loaded via a CSS link tag or JavaScript and applied via font-family.
- Web Font
- A font loaded from a server using @font-face. Web fonts ensure consistent rendering across devices.
FAQ
- Q.Is my text sent to a server?
- No. The preview text and all settings are processed locally in your browser.
- Q.Why does Google Fonts loading involve external requests?
- Only the font file itself is fetched from Google servers. Your text and settings are never transmitted.
- Q.Can I use fonts not in the list?
- You can load any Google Font by adding its name to the font-family field in your stylesheet. This tool's built-in list covers the most popular choices.
- Q.Does it work on mobile?
- Yes. The sliders support touch input.
- Q.Can I enter exact values instead of using sliders?
- Not directly. Use the presets for common values, then fine-tune with the sliders.
Cas d'utilisation
Web Design Typography
Find the right font-size and line-height combination for headings, body, and captions visually.
Blog Readability Optimization
Dial in the perfect line-height and letter-spacing for long-form article content.
Presentation Font Check
Verify that font size and weight look right before finalizing slide typography.
Learning CSS
Understand how each CSS typography property works by experimenting visually.
Envoyer des commentaires
Faites-nous part de vos réflexions pour nous aider à améliorer l'outil.
Les commentaires sont temporairement suspendus
Le serveur est occupé ou la protection anti-spam est active. Veuillez réessayer plus tard.