🔡 Font Preview Tool

The preview is live text styled by CSS, not an image, so every control maps directly to a property you can copy out. Selecting a font sets font-family. System faces such as Arial, Georgia and Courier New are already present on your machine; the rest are Google Fonts, and choosing one triggers a stylesheet request to fonts.googleapis.com for that family only, which is why an unfamiliar face takes a moment to appear the first time.

Font size is set in pixels and can be dragged from 8 to 120, or typed directly. Weight sets font-weight numerically, from light through regular at 400 to bold and beyond, and the available weights depend on what the family actually ships.

Line height is unitless and ranges from 0.8 to 3. Because it is a multiplier, the rendered line box equals the font size multiplied by that number, and it scales automatically if you change size later. Letter spacing is in pixels, from minus 5 for tightening large headings to 20 for widely tracked labels, and it is added after every character.

The remaining controls map to text-align, text-transform, text-decoration, font-style, color and background-color.

Start with body copy. Choose Inter, set the size to 18 pixels and leave line height at its default of 1.5. The rendered line box is therefore 18 multiplied by 1.5, which is 27 pixels, giving 9 pixels of breathing space distributed above and below each line. Set letter spacing to 0 and weight to 400. The CSS output reads font-family: 'Inter'; font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: 0px.

Now build a heading in the same family. Raise the size to 48 pixels and the weight to 700, and drop the line height to 1.1, which gives a line box of 48 multiplied by 1.1, or 52.8 pixels. Large type looks loose at the spacing that suits body text, so set letter spacing to minus 1 pixel to tighten it.

The effect of that tightening is easy to underestimate. Across a 30-character headline, minus 1 pixel per character removes roughly 30 pixels of width, enough to pull a headline back onto two lines instead of three. Apply the same figure to 12 pixel caption text and it would be far too tight, which is why letter spacing usually needs to be set per size rather than globally.

Judge a font on the text you will really set, not on a pangram. Paste an actual paragraph, an actual headline and an actual set of numbers, because families that look similar in a specimen diverge in their digits, currency symbols and punctuation. Check the characters that cause trouble: capital I against lowercase l and the digit 1, and zero against capital O. A face that blurs those is a poor choice for code, invoices or reference numbers.

Remember the preview shows one browser on one device. Rendering differs between operating systems, and a weight that looks crisp on a high-density display can appear thin on an older monitor, so avoid weights below 400 for body text.

Web performance deserves a thought before you finalise. Each family and each weight you use is a separate download, so a page using four weights of two families is loading eight font files. Two weights of one family covers most designs.

Finally, the copied CSS names the family but does not include the link or import that loads a Google Font. Add that to your page separately, or the browser will silently fall back to a default face.