Typography & Scale Hub
Calculate modular type scale ratios, generate fluid CSS clamp() tokens, align typography to a vertical baseline grid, and build production web font loading strategies.
Interactive Typography Studio
Tune scale progression ratios, test baseline grid alignment, or build font-family stacks.
Modular Type Scale & Clamp Generator
Calculate modular font steps with responsive CSS clamp() formulas.
Scale System Health
89/100 — Type system readyBrand fit
81%
Font pairing
76%
Scale rhythm
100%
Responsive behavior
100%
Token readiness
88%
Computed Type Scale Ladder
Interactive type scale hierarchy with fluid CSS clamp() values.
Curated Typography Scale Directory
25 production-ready type scales covering SaaS UI, hero marketing landers, editorial publications, code documentation, and fluid CSS clamp systems.
Click any preset to load into the studio.
SaaS Dashboard Compact
Product UI • Inter / Inter
Display Scale 20px
Subheading 17px
Body text rendered at base size 14px.
Tight 1.200 Minor Third scale engineered for data-dense dashboards, tables, and product sidebars.
B2B Web App Standard
Product UI • Inter / Inter
Display Scale 25px
Subheading 20px
Body text rendered at base size 16px.
Balanced 1.250 Major Third scale providing clear UI hierarchy without taking over limited screen space.
Dense Admin & Analytics
Product UI • Space Grotesk / Inter
Display Scale 16px
Subheading 15px
Body text rendered at base size 13px.
Subtle 1.125 Major Second progression built for complex financial tables and dense settings panels.
Mobile-First Touch Scale
Product UI • Inter / Inter
Display Scale 25px
Subheading 20px
Body text rendered at base size 16px.
16px base with 1.250 ratio ensuring legible tap targets and clear section titles on small screens.
Bento Grid Component Scale
Product UI • Inter / Inter
Display Scale 22px
Subheading 18px
Body text rendered at base size 15px.
1.200 scale designed for Apple-style Bento grid feature cards and metric callouts.
High-Impact Hero Launch
Hero Marketing • Space Grotesk / Inter
Display Scale 32px
Subheading 23px
Body text rendered at base size 16px.
Bold 1.414 Augmented Fourth scale creating dramatic contrast between landing page headers and body text.
Perfect Fifth Impact Scale
Hero Marketing • Space Grotesk / Inter
Display Scale 41px
Subheading 27px
Body text rendered at base size 18px.
Aggressive 1.500 ratio for marketing sites that rely on massive display typography and high visual punch.
Golden Ratio Showcase
Hero Marketing • Playfair Display / Source Sans 3
Display Scale 42px
Subheading 26px
Body text rendered at base size 16px.
Harmonic 1.618 Golden Ratio scale that creates natural proportional jumps for agency and product landing pages.
Startup Pitch Landing Page
Hero Marketing • Inter / Inter
Display Scale 30px
Subheading 23px
Body text rendered at base size 17px.
1.333 Perfect Fourth scale paired with bold sans-serif display headers for high-converting landing pages.
Creative Agency Poster Scale
Hero Marketing • Playfair Display / Inter
Display Scale 41px
Subheading 27px
Body text rendered at base size 18px.
1.500 Perfect Fifth scale with large display type for portfolio sites, launch announcements, and poster layouts.
Classic Magazine Editorial
Editorial & Longform • Playfair Display / Merriweather
Display Scale 32px
Subheading 24px
Body text rendered at base size 18px.
Timeless 1.333 Perfect Fourth ratio pairing Playfair Display headers with readable serif body text.
Longform Article & Essay
Editorial & Longform • Lora / Source Sans 3
Display Scale 32px
Subheading 24px
Body text rendered at base size 18px.
Generous 18px base text with 1.333 scale, optimized for long reading sessions and low cognitive strain.
Newsletter & Substack Style
Editorial & Longform • Lora / Lora
Display Scale 27px
Subheading 21px
Body text rendered at base size 17px.
Warm 1.250 Major Third scale tailored for email newsletters, publication digests, and personal blogs.
Documentation Knowledgebase
Editorial & Longform • Inter / Inter
Display Scale 25px
Subheading 20px
Body text rendered at base size 16px.
Clear 1.250 scale with crisp heading hierarchy for multi-level technical articles and help docs.
Academic Paper & Whitepaper
Editorial & Longform • Merriweather / Merriweather
Display Scale 23px
Subheading 19px
Body text rendered at base size 16px.
Formal 1.200 Minor Third scale with traditional serif body copy for research reports and whitepapers.
API Reference & Code Docs
Developer & Code • Inter / JetBrains Mono
Display Scale 18px
Subheading 16px
Body text rendered at base size 14px.
Subtle 1.125 scale pairing sans headings with monospace code blocks for API documentation and IDE tools.
CLI Terminal & Code Editor
Developer & Code • JetBrains Mono / JetBrains Mono
Display Scale 16px
Subheading 15px
Body text rendered at base size 13px.
Tight 1.125 scale where all tokens map cleanly to JetBrains Mono code environments.
DevTools Dark Workspace
Developer & Code • Space Grotesk / JetBrains Mono
Display Scale 20px
Subheading 17px
Body text rendered at base size 14px.
1.200 scale designed for dark-mode IDE panels, log viewers, and developer workspace tools.
Design Token Code System
Developer & Code • Inter / JetBrains Mono
Display Scale 25px
Subheading 20px
Body text rendered at base size 16px.
Strict 1.250 scale where font steps convert directly into CSS custom properties and Tailwind tokens.
GitHub Readme & Markdown Style
Developer & Code • Inter / Inter
Display Scale 25px
Subheading 20px
Body text rendered at base size 16px.
1.250 scale modeled after modern repository README hierarchy and markdown renderers.
Fluid Clamp Universal System
Fluid & Responsive • Inter / Inter
Display Scale 25px
Subheading 20px
Body text rendered at base size 16px.
Smooth CSS clamp() scale transitioning seamlessly from 390px mobile up to 1440px desktop displays.
Fluid Hero Expressive Clamp
Fluid & Responsive • Space Grotesk / Inter
Display Scale 34px
Subheading 24px
Body text rendered at base size 17px.
High-contrast 1.414 fluid scale that expands hero headers smoothly on ultra-wide desktop monitors.
Fluid Mobile-Optimized Clamp
Fluid & Responsive • Inter / Inter
Display Scale 22px
Subheading 18px
Body text rendered at base size 15px.
Gentle fluid scale preventing oversized headers on small mobile screens while maintaining desktop punch.
Fluid Golden Ratio Spectrum
Fluid & Responsive • Playfair Display / Source Sans 3
Display Scale 42px
Subheading 26px
Body text rendered at base size 16px.
1.618 Golden Ratio scale with viewport-interpolated clamp functions for expressive editorial landers.
Fluid Enterprise Token Scale
Fluid & Responsive • Inter / Inter
Display Scale 25px
Subheading 20px
Body text rendered at base size 16px.
Production-ready fluid clamp system designed to be copied directly into CSS design-token files.