Variable Font Debugger

Upload Font

Default: Roboto Flex (~315 KB variable font) • Upload WOFF2 file

Drop file or click to browse

Variable Font Axes

Upload a font to see available axes

Upload a font to see variable axes

Typography Metrics

Real font metrics from font file

Baseline (0)Ascender (928)Cap Height (710)X-Height (528)Descender (-244)

Ascender

Cap Height

X-Height

Baseline

Descender

Display / Headings

Large text for headlines

Size: 72px

Letter Spacing: -0.020em

Line Height: 1.1

Making Headlines
That Matter

Labels / Buttons

Small text for UI elements

Size: 14px

Letter Spacing: 0.080em

Line Height: 1.0

Body / Paragraphs

Regular text for reading

Size: 16px

Letter Spacing: 0.000em

Line Height: 1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

CSS Output

Ready-to-use CSS for each text type

Display Styles

.display {
  font-family: "var(--font-roboto)";
  font-size: 72px;
  letter-spacing: -0.020em;
  line-height: 1.1;
  font-variation-settings: "wght" 400;
}

Label Styles

.label {
  font-family: "var(--font-roboto)";
  font-size: 14px;
  letter-spacing: 0.080em;
  line-height: 1;
  font-variation-settings: "wght" 400;
}

Body Styles

.body {
  font-family: "var(--font-roboto)";
  font-size: 16px;
  letter-spacing: 0.000em;
  line-height: 1.6;
  font-variation-settings: "wght" 400;
}