VARIABLE FONT ENGINEERING & CALIBRATION

Precision-tune every variable font axis

Upload a variable font and tune its weight, width, optical size and grade axes. Calibrate perceived weight for light and dark backgrounds, then export the settings as CSS, JSON, Tailwind or Figma tokens.

Drop your variable font

.woff2, .ttf, .otf ยท fvar parsing

axes detected

VARIABLE FONT WEIGHT ANIMATOR ยท REAL-TIME TRANSITIONS
Engineering Load:
Calibration Status:
Optical Consistency:
OPTICAL AXIS OPTIMIZATION APCA Lc driven
Axis Range โ†’
Light Lc
Dark Lc
Base Grade
Irradiation Factor
Perceptual Multiplier
Suggested ฮ”

Light/Dark Optical Test

Perceptual Difference
(%)

Perceptual Scaling Array

Phone
Tablet
Laptop
Monitor
Optical Size (opsz)
Light Mode Lc
Dark Mode Lc
PERCEPTUAL PERFORMANCE SCORE

Light Mode

Ag

Dark Mode

Ag

Light Mode

The quick brown fox jumps over the lazy dog. Compare variable fonts and test font rendering with our professional typography QA tools. The variable font weight animator creates smooth transitions between weights.

Dark Mode

Perceptual weight achieves optical harmony. APCA contrast: Lc. The irradiation effect is compensated for optimal readability.
Ag
Ag

โ† Drag to compare โ†’

Ag
Ag
Base
Comp
ฮ”
opsz:
The quick brown fox jumps over the lazy dog

Share Perceptual State

Dark Mode CSS
/* Perceptual weight compensation CSS for dark mode typography */
:root { --font-grade: ; }
@media (prefers-color-scheme: dark) {
  :root { --font-grade: ; }
}
body { font-variation-settings: ; }

How to Use Squish Lab Pro

1

Upload Font

Drop any .woff2, .ttf, or .otf variable font file

2

Adjust Axes

Fine-tune weight, width, optical size, and grade axis

wght:
3

Optical Axis Optimization

Suggests an optimal dark mode grade

Suggested:
4

Light/Dark Optical Test

Adjust until text stops pulsating

ฮ”
5

Scale

Simulate different screen sizes

" | opsz:
6

Export

Copy CSS, JSON, Tailwind, or Figma tokens

FontCalibratedExport

Font Grading: The Secret to Perfect Dark Mode Typography

Font grading is the subtle adjustment of a typeface's weight and contrast to maintain optical harmony across different backgrounds and screen conditions. Unlike standard weight adjustment, grading fine-tunes the perceived thickness without changing the font's core design. The variable font weight animator helps visualize these adjustments in real-time, making it easier to find the perfect balance. This is why professional font engineers rely on font grading tools for dark mode optimization.

Current Grade Axis: Range: โ†’
Light Mode Grade
Dark Mode Grade
Perceptual Difference
Why It's Critical for Modern Design:
  • Dark Mode Optimization โ€” Text often appears heavier on dark backgrounds due to irradiation; font grading compensates for this optical illusion.
  • APCA Contrast Check โ€” See APCA contrast alongside the WCAG 2 ratio as you adjust the grade axis. APCA is a newer contrast model and is not yet part of WCAG 2 conformance.
  • Variable Font Weight Animator โ€” See real-time weight transitions to find the perfect optical balance between light and dark modes.
  • Brand Consistency โ€” Maintain visual identity across light and dark themes without redesign.
Pro Tip: Use the Light/Dark Optical Test tool above to find the perfect dark mode grade. When the text stops pulsating, you've achieved optical harmony! For high-contrast displays, you may need to reduce weight further to compensate for light bleed. The variable font weight animator makes it easy to see the difference in real-time. This is the essence of professional perceptual weight compensation and font grading.

Variable Font Tester

Variable fonts are one of the most powerful tools in modern web typography โ€” a single font file that contains an entire family of weights, widths and optical sizes. The Squish Lab lets you explore every axis of any variable font file you upload, interactively.

Drag the weight axis from Thin to Black. Compress or expand the width. Adjust optical size for display vs body use. See all changes instantly rendered at any text size. No CSS knowledge required โ€” just drag and explore.

What Are Variable Font Axes?

Variable fonts use axes โ€” continuous ranges of variation โ€” instead of fixed weights. Common axes include weight (wght), width (wdth), optical size (opsz), slant (slnt) and italic (ital). Some fonts have custom axes unique to their design.

The Squish Lab exposes all available axes for each font, so you can discover what's possible and find the exact expression that fits your design โ€” then copy the CSS font-variation-settings value directly into your code. For a deeper explanation, read the variable fonts guide, and see how font loading affects performance. To test contrast and readability, use the Typography QA Lab.

Professional Variable Fonts
Browse Premium Variable Font Families on MyFonts
Explored variable font axes? Get full professionally licensed variable font families on MyFonts โ€” including typefaces you won't find on Google Fonts.
Shop MyFonts →

Affiliate link — we may earn a small commission at no extra cost to you