Variable Font Debugger

Upload Font

Current: Roboto Flex (Default) (792.0 KB)

Drop to replace

Variable Font Axes

Global axes that apply to all text types

Optical Size (opsz): 14

Weight (wght): 400

Grade (GRAD): 0

Width (wdth): 100

Slant (slnt): 0

Parametric Thick Stroke (XOPQ): 96

Parametric Thin Stroke (YOPQ): 79

Parametric Counter Width (XTRA): 468

Parametric Uppercase Height (YTUC): 712

Parametric Lowercase Height (YTLC): 514

Parametric Ascender Height (YTAS): 750

Parametric Descender Depth (YTDE): -203

Parametric Figure Height (YTFI): 738

Typography Metrics

Real font metrics from font file

Baseline (0)Ascender (1900)Cap Height (1456)X-Height (1052)Descender (-500)

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: "opsz" 14, "wght" 400, "GRAD" 0, "wdth" 100, "slnt" 0, "XOPQ" 96, "YOPQ" 79, "XTRA" 468, "YTUC" 712, "YTLC" 514, "YTAS" 750, "YTDE" -203, "YTFI" 738;
}

Label Styles

.label {
  font-family: "var(--font-roboto)";
  font-size: 14px;
  letter-spacing: 0.080em;
  line-height: 1;
  font-variation-settings: "opsz" 14, "wght" 400, "GRAD" 0, "wdth" 100, "slnt" 0, "XOPQ" 96, "YOPQ" 79, "XTRA" 468, "YTUC" 712, "YTLC" 514, "YTAS" 750, "YTDE" -203, "YTFI" 738;
}

Body Styles

.body {
  font-family: "var(--font-roboto)";
  font-size: 16px;
  letter-spacing: 0.000em;
  line-height: 1.6;
  font-variation-settings: "opsz" 14, "wght" 400, "GRAD" 0, "wdth" 100, "slnt" 0, "XOPQ" 96, "YOPQ" 79, "XTRA" 468, "YTUC" 712, "YTLC" 514, "YTAS" 750, "YTDE" -203, "YTFI" 738;
}