DevTools Logo

Typography Anatomy & Variable Font Lab

Related guides

Your Font Has Axes: A Field Guide to Variable Fonts and OpenType Features

One font file, infinite weights. How the fvar and gvar tables actually work, why a font inspector can show you the axes but not animate between them, and the metric-override trick that kills fallback-font layout shift.

Related tools

Aspect Ratio Calculator

Calculate dimensions and ratios for images and videos.

Border Radius Generator

Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.

Box Shadow Generator

Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.

CSS Grid Generator

Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.

CSS Spring Physics Generator

Generate natural CSS spring animations from stiffness, damping, mass, and velocity. Analytical damped-harmonic solution with settle-time estimation and cubic-bezier approximation.

Cubic Bezier / Easing Generator

Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.