Typography Tools
Free, interactive tools for font selection, pairing, and CSS generation. Everything runs in your browser.
Font Pairing Generator
Select a font and get AI-recommended pairings with live preview.
Open tool →Font Preview
Preview any Google Font with custom text, size, weight, and color.
Open tool →Font Compare
Compare 2-4 fonts side by side with identical sample text.
Open tool →Type Scale Calculator
Generate harmonious type scales using ratios like 1.25, 1.333, 1.5.
Open tool →Font Stack Builder
Build CSS font-family stacks with web-safe fallbacks.
Open tool →CSS Code Generator
Generate ready-to-use CSS @import and font-family code for any Google Font.
Open tool →Contrast Checker
Check text/background color contrast ratio against WCAG AA and AAA standards.
Open tool →Fluid Type Calculator
Generate CSS clamp() declarations for fluid responsive typography between viewport sizes.
Open tool →px / rem / em Converter
Convert between px, rem, em, and pt units instantly. Set your base font size.
Open tool →Variable Font Playground
Explore variable font axes interactively — weight, width, slant, and optical size.
Open tool →