Squish Lab Pro
Support us
Squish Lab Pro
Home Preview Compare License Squish Lab Brand Analyzer Wordmark Studio FontMagic QA Lab NEW Pairings Guides All Tools
About Privacy Terms
VARIABLE FONT ENGINEERING & CALIBRATION

Precision-tuning weight, width, and optical axes

Enterprise-grade compression and optical optimization. Calibrate perceptual weight, compensate for irradiation, and achieve perfect visual parity across all modes.

Drop your variable font

.woff2, .ttf, .otf · fvar parsing

axes detected

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

Compensated Weight
Perceptual Difference
(%)

Perceptual Scaling Array

Screen Size
Phone
Tablet
Laptop
Monitor
Optical Size
Light Mode Lc
Dark Mode Lc
PERCEPTUAL PERFORMANCE SCORE
Light BG
Light Text
Dark BG
Dark Text
Glyph
Paragraph
Overlay
Blink
Hologram

Light Mode

Ag

Dark Mode

Ag

Light Mode

The quick brown fox jumps over the lazy dog. Variable fonts allow fluid transitions between weights and optical sizes. This paragraph demonstrates how text appears in light mode with your current settings.

Dark Mode

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

← Drag to compare →

Ag
Ag
Base
Comp
Δ
{{ screenSize }}" opsz: {{ currentOpsz }}
The quick brown fox jumps over the lazy dog

Share Perceptual State

Dark Mode CSS
/* Auto-generated dark mode CSS */
:root { --font-grade: ; }
@media (prefers-color-scheme: dark) {
  :root { --font-grade: ; }
}
body { font-variation-settings: ; }
CSS
JSON
Tailwind
Figma

How to Use Squish Lab Pro

1

Upload Font

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

No font loaded
2

Adjust Axes

Fine-tune weight, width, optical size, etc.

wght:
3

Optical Axis Optimization

AI suggests 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, or Figma tokens

Font Calibrated Export

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.

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; grading compensates for this optical illusion.
  • APCA Contrast Compliance — Achieve WCAG accessibility standards with precise grade control.
  • Brand Consistency — Maintain visual identity across light and dark themes without redesign.
  • Variable Font Advantage — Unlike static fonts, variable fonts allow smooth grade transitions for every screen condition.
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.
STEP-BY-STEP GUIDE

How to Use Squish Lab Pro

Master variable font engineering in 6 simple steps. Perfect for beginners and pros alike.

1

Load Your Font

Drag & drop any variable font (.woff2, .ttf, .otf) or click the upload zone. The tool automatically detects all available axes.

PRO TIP:

No font handy? Click "Load Sample Variable Font" to try with Roboto Flex.

2

Adjust Axes

Fine-tune Weight, Width, Optical Size, and Grade axes. Watch the preview update in real-time as you adjust.

wght 400 → 700
3

Get AI Suggestions

The Optical Axis Optimization analyzes APCA contrast and suggests optimal dark mode grade values.

Suggested: -12% lighter
4

Light/Dark Optical Test

Use the blink calibration tool. Adjust the slider until the text stops pulsating – that's your perfect dark mode weight.

Perfect when Δ < 5%
5

Test Different Screens

Simulate phones, tablets, laptops, and monitors. Optical Size (opsz) adjusts automatically.

📱 5" 💻 15" 🖥️ 27"
6

Export & Implement

Copy CSS, JSON, Tailwind, or Figma Tokens. Use the dark mode CSS snippet for automatic theme switching.

@media (prefers-color-scheme: dark) { ... }

Watch Quick Demo

2-minute video tutorial

See how to go from a blank slate to perfectly calibrated dark mode typography in under 2 minutes. Learn the irradiation correction technique used by professional font engineers.

✓
Upload any variable font
✓
AI-powered grade suggestions
✓
Light/Dark Optical Test for perfection
✓
Export to CSS, Figma, Tailwind

Frequently Asked Questions

What is "Light/Dark Optical Test"?

It's an advanced form of irradiation correction where the tool rapidly alternates between light and dark mode weights. When the text stops pulsating, you've achieved perfect optical parity—the text appears the same visual weight in both modes.

Do I need a variable font?

Yes! Squish Lab Pro is designed specifically for variable fonts that include axes like wght, GRAD, or opsz. If your font doesn't have these axes, try our sample font or upload a variable font from Google Fonts.

What APCA score should I target?

For body text, aim for 60+ Lc. For headings, 75+ Lc is recommended. Our meter turns green when you hit these targets. The Optical Axis Optimization automatically suggests adjustments to meet WCAG standards.

How do I use the Figma export?

The Figma export is compatible with Tokens Studio plugin. Copy the JSON and import it into your design system. It creates light and dark mode tokens for your font grades.

Ready to engineer your typography?