Precision-tuning weight, width, and optical axes with font grading tool
Enterprise-grade compression and optical optimization. Calibrate perceptual weight, compensate for irradiation, and achieve perfect visual parity across all modes. Compare variable fonts, test font rendering, use the variable font weight animator for smooth transitions, and master typography QA with our professional font grading tool.
Drop your variable font
.woff2, .ttf, .otf · fvar parsing
axes detected
Light/Dark Optical Test
Perceptual Scaling Array
Light Mode
Dark Mode
Light Mode
Dark Mode
← Drag to compare →
Share Perceptual State
Dark Mode CSS
:root { --font-grade: ; }
@media (prefers-color-scheme: dark) {
:root { --font-grade: ; }
}
body { font-variation-settings: ; }
How to Use Squish Lab Pro
Upload Font
Drop any .woff2, .ttf, or .otf variable font file
Adjust Axes
Fine-tune weight, width, optical size, and grade axis. Watch the variable font weight animator create smooth transitions.
Optical Axis Optimization
AI suggests optimal dark mode grade using font grading tool
Light/Dark Optical Test
Adjust until text stops pulsating for perfect irradiation correction
Scale
Simulate different screen sizes for perceptual scaling
Export
Copy CSS, JSON, Tailwind, or Figma tokens
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.
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 Compliance — Achieve WCAG accessibility standards with precise grade axis control using our APCA contrast tool.
- 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.