CSS Font Preview
The CSS Font Preview Tool lets you instantly compare how different fonts and font settings look in real time. Experiment with properties such as size, weight, spacing, and style to see exactly how they affect your text before adding anything to your stylesheet. It’s a quick and practical way to fine-tune your typography and avoid trial-and-error in your code.
To explore the properties used in this tool, or discover even more, you can browse our comprehensive guide to CSS Properties.
Preview
About this tool
font-family
Choose from 50 typefaces - system fonts, serifs, sans-serifs, display, monospace, and handwritten - or load any other Google Font by name. The tool loads fonts on demand so you always see a true preview, and the generated font-family includes a sensible fallback stack.
font-size & font-weight
Scale type from 8 px all the way to 160 px and step through weights from Thin (100) to Black (900) in increments of 100. font-size sets the rendered size, in px or rem; font-weight controls stroke thickness. Availability depends on the typeface, so the tool lists the weights and italics each Google Font really has and only requests those.
letter-spacing & word-spacing
Tighten or open up the space between individual characters with letter-spacing, and control inter-word gaps with word-spacing. Both are output in em units so they scale with the font size. Both have significant impact on readability and brand feel.
line-height
Set the vertical rhythm of your text from 0.8 (very tight) to 3.0 (very loose). line-height is unitless by default here - a best practice that makes it relative to the current font size and avoids inheritance issues in nested elements.
font-style & text-transform
font-style switches between normal, italic (using the font's true italic variant if available), and oblique (a slanted simulation). text-transform renders text as uppercase, lowercase, or capitalised without altering the underlying HTML - useful for headings and UI labels.
text-shadow
Build shadows by adjusting horizontal offset, vertical offset, blur radius and opacity - then pick a shadow colour. text-shadow accepts multiple comma-separated values for layered effects. The tool outputs the shorthand syntax ready to paste directly into your CSS.
Why typography properties matter
Typography is one of the most powerful levers in web design. The right combination of font family and weight establishes brand voice; letter-spacing affects legibility at both display and body scales; line-height determines how comfortable long-form text is to read. CSS gives you precise, performant control over all of it - no images, no JavaScript required.
Understanding each property individually is the first step. This tool lets you develop an intuition for how they interact - because changing font size without adjusting line-height, or tightening letter-spacing on a lightweight font, can quickly undermine readability.
How to use the generated CSS
Once you're happy with a combination, copy the CSS: it is a ready-made class rule that only includes the properties you changed. For a Google Font, the HTML tab has the <link> tags for your <head> (or switch to @import under Code), requesting only the weight and style you use so the download stays small. Copy all or Download gives you a complete test page. The output uses relative units like em for spacing properties, making it easier to maintain consistency as your design scales.
You can also click directly in the preview area and type your own text - great for testing how a specific headline, button label, or paragraph reads at different settings before committing to a choice.