Try your own words here.
Use it on your website
Load the font with one of the snippets, then apply the CSS rule to the element you want to style. Only the weight and style you selected are requested, which keeps the download small.
Getting useful results from the playground
The preview updates as you move each control, so it is easy to over-tune. A few habits keep your choices grounded:
- Use real copy. Paste a paragraph from your site or a real headline. Short pangrams hide problems with rhythm and texture.
- Change one thing at a time. Size, line height and letter spacing interact. Set the size first, then line height, and touch letter spacing last.
- Keep body text near 16–20px. Larger sizes suit headings. For paragraphs, a line height between 1.4 and 1.7 is a sensible starting range.
- Watch the contrast indicator. It calculates the contrast ratio between your text and background colours and compares it with the WCAG 2 thresholds of 4.5:1 for normal text and 3:1 for large text.
About the generated code
The CSS tab gives you a rule for the styles you set. The loading snippets request only the weight, and the italic if you ticked it, that you selected, which keeps the download small. Font size is written in rem so the text still respects visitors who increase their browser’s default size.
Use Copy link to this setup to save the exact configuration, or continue in the Website Typography Preview to see the font in a full page layout. To understand the numbers behind the sliders, read line height and letter spacing explained.