Rules & PairingsTypographic rules, font pairings, and tipsRhetorical TypePersuasion through typographic choicesType AnimationsCSS and JS animation techniques for text
Font InspectorExamine OpenType features and metricsSpecimen GeneratorGenerate type specimens for any fontVariable FontsExplore variable font axes in real timeFont DNAExtract the genetic fingerprint of a typefaceType AuditAudit any website's typographic choices
Perfect ParagraphTune every parameter of body textReading LabTest readability across configurationsClamp CalculatorGenerate fluid type scales with clamp()Pairing BuilderCreate and export font pairing cardsgo.jsUniversal typographic enhancement script
AboutSupport

Variable Font Playground

Explore Every Axis

Manipulate variation axes in real time. Animate between extremes. Compare configurations. Generate production-ready CSS.

HomeBuilderClampInspector

01 -- Playground

Live Editor

Variation Axes

wghtWeight
100900
slntSlant
-100
Font Size32px
The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
CSS Output

02 -- Custom Font

Upload Your Own

Drop a variable font file here (.ttf, .woff2, .otf)

or click to browse

03 -- Font Index

Available Fonts

Inter

wghtslnt

Recursive

wghtslntCASLCRSVMONO

Roboto Flex

wghtwdthopszGRADslntXTRAYOPQYTASYTDEYTFIYTLCYTUC

Source Sans 3

wghtital

Outfit

wght

Commissioner

wghtslntFLARVOLM

Fraunces

wghtopszSOFTWONK

Crimson Pro

wght

Literata

wghtopsz

Newsreader

wghtopsz

Bricolage Grotesque

wghtwdthopsz

Playfair Display

wght

Sora

wght

Built with care for the craft of typography

SpecimenDNA

Also in Analyze

Font InspectorExamine OpenType features and metricsSpecimen GeneratorGenerate type specimens for any fontFont DNAExtract the genetic fingerprint of a typefaceType AuditAudit any website's typographic choices