Goafreet/Typography Lab/Variable Font Lab

Variable Font Lab

OpenType fvar

Explore the continuous design space of authentic OpenType variable fonts. Single-binary weight (wght), width (wdth), optical size (opsz), and slant (slnt) axes interpolations with zero layout shift and verified CSS output.

Select Approved Variable Font

Roboto Flex

Designer: Google Fonts / Font Bureau • License: SIL Open Font License 1.1 • Em: 1000

wght: 100–1000

wdth: 25–151

opsz: 8–144

slnt: -10–0

Dark CanvasAuto opsz

48px

1.3

0.00em

Harmonizing structural precision with continuous variation.

ACTIVE SETTINGS:

font-variation-settings: "wght" 400, "wdth" 100, "opsz" 14, "slnt" 0;

Detected OpenType Axes (4)

wght

Weight

Controls the thickness of stroke contours from ultra-hairline to heavy black.

Min: 100Def: 400Max: 1000

wdth

Width

Compresses or expands character advance widths and horizontal counter geometry.

Min: 25%Def: 100%Max: 151%

opsz

Optical Size

Adapts stroke contrast, serifs, and apertures dynamically to match physical/screen viewing size.

Min: 8ptDef: 14ptMax: 144pt

slnt

Slant

Applies an oblique mathematical shear angle to glyph contours without changing letter construction.

Min: -10degDef: 0degMax: 0deg

Named Instances (STAT / fvar)

Predefined style landmarks packaged inside the font binary.

Default

Ultra Condensed

Expanded Black

Display Headline

Micro Caption

Production CSS Exporter

Copy clean CSS with verified axis tags and appropriate fallback declarations.

/* Variable Font CSS Implementation */
.variable-specimen {
  font-family: "Roboto Flex", system-ui, sans-serif;
  font-size: 48px;
  font-weight: 400;
  font-stretch: 100%;
  font-optical-sizing: auto;
  font-variation-settings: "wght" 400, "wdth" 100, "opsz" 14, "slnt" 0;
}

CSS Precedence Rule: Modern browser engines prioritize font-variation-settings over high-level properties like font-weight and font-stretch if both are defined simultaneously on the same selector.

CONTINUE TYPOGRAPHY EXPLORATION

Letter Anatomy Lab Glyph Explorer Kerning Studio Pairing Studio