What You Can Adjust in the Playground

The playground exposes every typography decision in one place. Change a heading font, adjust the body size, swap the background color, and watch the preview update immediately. No save step, no preview mode. For a scored starting pair instead of a blank canvas, open the font pairing generator first, then come back here to tune sizes and color.

Heading and body fonts

Pick from 38 open-source families listed in the Google Fonts catalog. Each font shows its weight range and whether it has a variable axis. The heading and body can be any two different families, or the same family if you want a single-font system. Families with a variable font tester axis can be inspected there if you need wght or opsz beyond the sliders here.

Size, weight, and line height

Sliders control heading size from 24 to 96 pixels and body size from 12 to 24 pixels. Weight dropdowns show only the weights each font actually includes. Line height adjusts from 1.0 to 2.0 for each level independently. Pixel size maps to CSS font-size; the unitless line-height control matches the CSS line-height number form, which scales with the font size instead of locking a pixel gap.

Color and palette

The text color, background, and surface colors all accept hex input with a visual picker. Selecting a palette from the dropdown fills the text, background, primary, accent, surface, and border colors at once. You can override any role individually after picking a palette. For a dedicated WCAG AA and AAA pass against those hex values, use the WCAG contrast checker. The ratio definition is the W3C WCAG 2.2 specification.

Modular type scale

Set a base size and a ratio, and the playground generates the full scale. Each step shows its pixel value computed from the ratio. The preview uses the scale to set heading sizes, so changing the ratio immediately updates the heading hierarchy. For clamp-based viewport steps, leave this page and use the type scale calculator or the fluid type generator.

Layout presets

Ten layout presets show how the typography looks in realistic contexts: a website homepage, a two-column UI grid, a slide deck, a social media post, a newsletter, a resume, a business card, an editorial article, a dashboard, and a portfolio page. Each preset has its own content structure and column layout.

How the Layout Presets Work

The layout preset changes what appears in the preview pane without altering your font or color settings. Each preset is a different publishing surface with its own content structure.

• Website. A typical two-column homepage with a hero heading, a subheading, body paragraphs, and a CTA button. Shows heading hierarchy and body readability at once.
• UI grid. A component grid showing card headers, labels, body text, badges, and form controls at actual UI sizes. Tests how the body font renders at small sizes.
• Slides. A title slide with a large heading and a subtitle. Tests the heading at the sizes used in presentations without needing a separate tool.
• Social. A social media card with a headline, excerpt, and author line. Shows how the pairing reads in a constrained, image-forward format.
• Newsletter. A newsletter article with a headline, byline, date, and multi-paragraph body. The reading width and line length in this preset match typical email constraints.
• Resume. A CV layout with name, job title, section headings, and bullet points. Tests how the body font handles small type and dense information.
• Business card. A card with a name, title, contact line, and logo placeholder. Shows the heading font at very large size against the body font at very small size.
• Editorial. A long-form article with a headline, deck, byline, and body copy at reading width. The most relevant preview for blog and content sites.
• Dashboard. A data-dense interface with a page title, metric cards, a table, and a sidebar. Tests the body font at small sizes in a structured layout.
• Portfolio. A portfolio index with a project title, category label, description, and thumbnail. Shows the pairing in a visual-first layout with moderate text density.

Saving and Sharing Your Configuration

The playground saves its state to your browser's localStorage automatically. Refresh the page or close the tab and return later, and your heading font, body font, colors, sizes, and scale are still there. Nothing is sent to a server. See the privacy policy for what stays on-device.

The share button encodes the current state into the URL as a compact string. Copy that URL and send it to a colleague, or paste it into a pull request description. Opening the URL restores the exact configuration, including the selected layout preset and any custom colors.

The undo and redo buttons navigate through your edit history within the session. The reset button returns everything to the default state (Playfair Display heading, Inter body, ink-on-cream palette). Export the tokens before resetting if you want to keep the current setup.

What the Export Formats Give You

Click Export in the toolbar to open the export panel. Every format is based on the current playground state and updates when you change a setting.

CSS

CSS custom properties for --font-heading, --font-body, --font-ui, and all the color roles. Also includes the Google Fonts @import URL with the correct weights and display=swap. Custom properties follow the CSS custom properties syntax.

SCSS

The same tokens as SCSS variables. Drop the file into an SCSS project and reference $font-heading or $color-text in any rule.

Tailwind

A partial theme object for tailwind.config.js. Paste it into the theme.fonts and theme.colors keys. You still need the Google Fonts @import in your HTML.

JSON

A structured JSON object with font names, weights, sizes, line heights, and the full color palette. Import this into a design system token setup or a custom build script.

Markdown

A DESIGN.md file with the heading font, body font, palette swatches, and type scale steps written out in readable prose. Useful for documentation or a pull request description.

SVG

A small SVG palette swatch showing the text, background, primary, accent, surface, and border colors as labeled swatches. Drop it into a brand guide or a presentation slide.

Frequently Asked Questions

Does the playground work offline?

Yes. After the fonts load once, the browser caches them. The playground itself requires no network requests to run. The state is always in localStorage, so it works without a connection even on a flight.

Why does my exported CSS use different weights than what I selected?

The export includes only the weights actually used in the preview. If the heading is at weight 700 and the body at 400, only those two weights appear in the Google Fonts URL. Add or remove weights in the toolbar before exporting if you need a different set.

Can I use the playground to design a brand system?

Yes. Set up the heading and body fonts, pick a palette, configure the type scale, then open the brand kit builder and import the configuration. The brand kit builder adds semantic color roles, contrast checks, and additional export formats on top of what the playground provides.

What is the difference between the playground and the font pairing generator?

The pairing generator scores pre-built combinations and returns the best matches for a mood or use case. The playground lets you set every value manually and see the result in context. Use the generator to find a starting point, browse finished examples in the font pairings library, then move to the playground to fine-tune the weights, sizes, and colors.

How do I reset to the default state?

Click the rotate icon in the toolbar. This resets heading to Playfair Display at 48 pixels bold, body to Inter at 16 pixels regular, and the palette to ink on cream. Export your current work first if you want to keep it.

Related Tools

• Color palettes if you want a named scheme instead of ad-hoc hex.
• CSS gradient generator for backgrounds that sit behind the same type.
• Inter font pairing and Playfair Display font pairing pages document the default playground pair.