Font Playground

Test your fonts on real layouts.

Pick a template, open it, and use the Fontara widget to try different font combinations — live on the page.

New features

Beyond typography — now with layout and accessibility.

Details tab

Control spacing, borders, and background — live.

The new Details tab gives you full control over the box model of any selected element. Adjust margin and padding with sliders, tweak border radius and color with the built-in HSV picker, set background color, or control image filters and object-fit — all applied instantly to the real page.

Fontara
FontsSettingsPresets
DetailsA11y
Spacing
Margin Top
16px
Margin Bottom
24px
Padding Left
12px
Padding Right
12px
Border
Radius
8px
Color
#7c3aed

Accessibility tab

Automated WCAG checks and color blindness simulation.

The A11y tab runs 5 automated WCAG 2.1 AA checks against your actual page styles — font size, line height, letter spacing, weight, and size hierarchy. It also lets you simulate how your site looks to users with Deuteranopia, Protanopia, Tritanopia, or Achromatopsia using real SVG filters.

Fontara
FontsSettingsPresets
DetailsA11y
WCAG / EAA
Font size ≥ 16px18px
Line height ≥ 1.51.6
Letter spacing0.02em
H1 > body font size36 > 18
!Body weight 400–500600
Color Blindness
Deuteranopia
Green-blind
Protanopia
Red-blind
Tritanopia
Blue-blind
Achromatopsia
No color