typography⁽¹³⁾

Automatic CSS and Tailwind code generator for modular typographic scales. Visual preview with customizable ratios and base sizes — outputs production-ready code in seconds.

Browser-based variable font editor with real-time complex-script shaping, outline tools, Python scripting, and local font data. Built for designing and testing multilingual type systems.

AI-powered font pairing generator that creates harmonious combinations for web typography using deep learning. Lock fonts you like and generate complementary pairings instantly.

Browser extension that identifies fonts on any website — name, size, line height, color — with AI pairing suggestions and variable font discovery. Essential for reverse-engineering great typography.

High-quality free fonts from Indian Type Foundry — professional-grade typefaces with no license restrictions, optimized for web use. Consistently one of the best sources for free fonts that don't look free.

Friends of Type is a collaborative typographic project showcasing original letterforms, type experiments, and lettering art. It celebrates type as an expressive art form beyond functional communication — pure inspiration for typography enthusiasts.

Ideogram excels at generating images with accurate text integration, making it invaluable for designers creating logos, signage, and text-heavy graphics. Its superior text rendering capabilities rival DALL-E for readability while offering more stylistic flexibility for branding and identity design projects.

Text Supply offers premium animated text effect components for Framer — typewriter effects, gradient text, scroll-reveal text, and more. Add polished typographic animations to your Framer sites without writing custom code.

Free tool and Figma/XD/Penpot plugin that generates balanced typography systems using mathematical ratios. Creates consistent hierarchies for web and UI design — input your base size and get a full scale with CSS ready to copy.

Curated site featuring font pairing lookbooks, top 10 lists by category, and 'fonts in the wild' examples from 3,000+ real websites. The best resource for seeing how professional designers use type in the real world.

A detailed video breakdown of how to build a typography system within your design system — covering type scales, responsive sizing, line heights, font pairing, and token naming conventions. Practical walkthrough with real implementation examples.

Curated collection of contemporary open-source typefaces from independent designers, organized by style (Sans, Serif, Mono, Display) with instant downloads and pangram previews. A hidden gem for finding quality type outside the Google Fonts mainstream.

Compares your installed fonts and Google Fonts in a grid with your own text, allowing tracking adjustments and quick exports. Faster than previewing fonts one at a time in any design tool.