font-size sets the scale of the glyphs, while line-height sets the vertical rhythm.
Local CSS typography generator
ライブ プレビューで読みやすい CSS タイポグラフィを調整する
独自のサンプル テキストでサイズ、行の高さ、間隔、太さ、配置を調整し、宣言をコピーします。
* Everything runs in your browser. No text is uploaded or saved.
CSS ready
font-size: 48px; line-height: 1.1; letter-spacing: -1.2px; font-weight: 700; text-align: center;Make every word count.
QUICK GUIDE
Typography is a system of relationships
Letter spacing changes the texture of a line; negative values can tighten display text.
Weight affects emphasis and density, but available results depend on the chosen font.
Preview the actual words you plan to use because line breaks change as the type settings move.
FAQ
Typography questions
What is a good line height?
Body copy often needs more leading than display text. Start near 1.4–1.6 for paragraphs and tighten headings as needed.
Why does letter spacing matter?
It changes the visual rhythm between characters. Small adjustments are more predictable than large ones.
Does this choose a font?
No. TypoBox tunes metrics around your current font stack. Apply the output to your chosen font family.