About this tool
The Typography Anatomy & Variable Font Lab parses a real font file (TTF, OTF, WOFF, WOFF2) with opentype.js entirely in your browser and lets you inspect it the way a type designer would — glyph outlines as Bézier curves, the baseline/x-height/cap-height/ascender/descender grid a letterform sits on, and the raw kerning table for common problem pairs like AV, To and Ta.
For variable fonts, every registered axis (wght, wdth, slnt, ital, opsz, or a foundry's custom axis) gets a live slider. Dragging one doesn't reimplement font interpolation — opentype.js can't do that — it drives the browser's own FontFace API with real CSS font-variation-settings on live DOM text, so what you see is exactly what a browser would render.
A rasterization preview shows the same sample text against a light, mid-gray and dark background side by side, making it easy to spot how antialiasing and perceived weight shift with contrast — a font that looks fine on white can look thin or fuzzy in a dark UI.
The tool also surfaces which OpenType features the font actually ships — standard/discretionary ligatures, contextual alternates, tabular figures and friends — read directly from the GSUB and GPOS feature lists rather than guessed from the font's name.
Export panel gives you copy-ready CSS: an @font-face block, a font-variation-settings rule for your current axis values, and ascent-override/descent-override/line-gap-override percentages computed from the font's own metrics for a tighter fallback-font size match.
How to use
Load a font
Drop or choose a .ttf, .otf, .woff or .woff2 file — parsing happens locally, the file never leaves your browser.
Inspect a glyph
Type a character to see its outline, control points and the baseline/x-height/cap-height guide lines scaled to your chosen preview size.
Check kerning
Scroll the kerning table for the built-in list of classic tight pairs (AV, To, Ta, Wa...) evaluated against the loaded font.
Move variable axes
If the font has an fvar table, drag its axis sliders (wght, wdth, slnt, ital, opsz or custom tags) to preview live, real browser-rendered text.
Compare backgrounds
Read the rasterization preview strip to see the sample text rendered on light, mid and dark backgrounds.
Export CSS
Copy the generated @font-face, font-variation-settings or fallback-metric-override blocks from the Export panel.
Use cases
Type-system audits
Confirm a webfont's actual metrics and kerning before committing to it, instead of trusting a specimen page.
Variable font QA
Sweep an axis end to end to catch glyphs that break or clip at extreme weight/width values before shipping.
Fallback-font tuning
Generate ascent/descent/line-gap overrides so a system-font fallback occupies the same vertical space as the webfont, reducing CLS.
Teaching type anatomy
Show students baseline, x-height and cap-height on a real glyph outline instead of a diagram.
Common mistakes
Mistake:Expecting the tool to animate real glyph-shape interpolation between axis values
Fix:opentype.js doesn't implement the gvar table, so shape interpolation isn't computed manually — instead the live preview delegates to the browser's own variable-font rendering via FontFace + font-variation-settings, which is accurate but only visible in the rendered preview text, not the static glyph-outline view.
Mistake:Confusing this tool with a text-styling generator
Fix:This tool analyzes a font file's real glyph anatomy, kerning and variable axes — it does not turn plain text into styled Unicode lookalikes; for that, use Unicode Font Styler.
Mistake:Assuming every font has kerning or variable axes
Fix:The kerning table reads 0 for any pair the font doesn't define, and the axis panel stays empty for static (non-variable) fonts — both are expected, not errors.
Frequently asked questions
Related guides
References & standards
Related tools
Distributed Systems & Network Topology Simulator
Build a network topology from load balancers, API gateways, microservices, message queues, distributed databases and caches, then inject chaos — kill nodes, partition the network, packet loss, latency spikes, circuit breaker trips — and watch Raft leader election, split-brain and Hystrix-style breaker state react live. Export the topology as Docker Compose, Kubernetes manifests, Mermaid or PlantUML. Entirely client-side, educational simulation.
Pixel Art Sprite Studio
Draw retro pixel art on an 8x8 to 64x64 grid with pencil, flood-fill, ordered-dither and symmetry tools, curated PICO-8/Game Boy/NES/C64/Endesga-32 palettes, multi-layer compositing, and a frame timeline with onion skinning. Export static PNG, animated PNG, GIF, a sprite-sheet atlas (Pixi/Phaser/Godot/Unity JSON), or a CSS steps() animation snippet.
Digital Logic Gate & Circuit Simulator
Build digital circuits from AND/OR/NOT/NAND/NOR/XOR/XNOR gates, tri-state buffers, switches, clocks and 7-segment displays; wire flip-flops, latches and multiplexers into adders and counters. Runs an event-driven propagation-delay simulation with High-Z and driver-conflict detection, packages sub-circuits into reusable ICs, and exports a truth table, K-Map minimization, Verilog, VHDL, and a documented JSON+SVG schematic. Everything runs client-side; circuits never leave the browser.
2D Fluid Dynamics & Particle Physics Sandbox
A physics playground with two engines sharing one canvas. The fluid mode runs a real Eulerian Navier-Stokes solver — semi-Lagrangian advection, explicit diffusion, Jacobi pressure projection and vorticity confinement — that you paint with dye and velocity using mouse or touch. The particle mode is a damped Verlet N-body engine with gravity wells, Coulomb attractors and repulsors, spring links, wall restitution and elastic circle collisions. Particle counts adapt to the device (100k target on WebGL2 desktop, 2k-5k on CPU fallback), and every configuration exports as runnable code: a Matter.js world, a PixiJS ticker setup, or a standalone vanilla Canvas engine.
GLSL Shader Art & Visual FX Playground
A live GLSL fragment-shader laboratory running on WebGL2 with the full Shadertoy uniform set (iResolution, iTime, iTimeDelta, iFrame, iMouse, iChannel0..3). Write shaders with syntax highlighting and see them recompile on every keystroke, with compiler errors mapped back to your line numbers and highlighted in the editor, plus a live FPS counter. The gallery ships raymarched spheres, tori and a Mandelbulb fractal, Voronoi and FBM procedural noise, cyberpunk grids, plasma waves, a neon audio visualizer and matrix rain. Export any shader as Three.js ShaderMaterial code, a React Three Fiber component, a standalone single-file WebGL2 HTML page or plain GLSL — or record the canvas straight to WebM video. A Canvas2D plasma fallback keeps the tool usable where WebGL2 is unavailable.
Web Audio Modular Synthesizer & Sound FX Generator
A full synth voice designer running entirely in your browser: seven oscillator flavors (sine, saw, triangle, square with real PWM duty control, white/pink/brown noise), a visual ADSR envelope, resonant biquad filtering, an LFO routed to pitch, filter or gain, and an effects chain of tanh overdrive, stereo ping-pong delay and Schroeder reverb. Play the two-octave keyboard with your mouse, the printed computer keys (A W S E D…) or a Web MIDI controller, watch the live FFT spectrum and scrolling waterfall spectrogram, fire retro game SFX one-shots (jump, laser, coin, powerup, explosion, click), then export your sound as 8/16/24-bit WAV or as dependency-free Web Audio code you can paste into any project.