Building a typography system requires several distinct decisions: choosing a type scale ratio, selecting typefaces for different roles, implementing fluid sizing, checking readability and contrast, and generating the CSS. There is no single tool that handles all of this, but there are several excellent free tools that cover specific steps cleanly.
This is a working list of the tools used regularly in front-end and design system work, with notes on what each does well and where it fits in the typography system workflow.
Photo by Aldrich on Pexels
1. Utopia.fyi - Fluid Type and Space Generator
What it does: Generates complete fluid type scales and spacing scales using CSS clamp() values. Input your minimum and maximum viewport widths, base font size range, and scale ratio, and it outputs the full CSS custom properties block.
Best for: The foundation step of any fluid type system. Instead of calculating each clamp() value manually, Utopia generates the complete scale in seconds. It also generates a matching fluid space scale, so type and spacing scale in proportion.
Output format: Ready-to-paste CSS custom properties. The generated code follows well-established naming conventions and is compatible with any CSS architecture.
Free tier: Fully free, no account required.
Link: utopia.fyi
2. Type Scale (type-scale.com) - Modular Scale Visualizer
What it does: Shows a live preview of a modular type scale across any ratio (Minor Second, Major Third, Perfect Fourth, Golden Ratio, and others). Accepts a base font size and ratio, then displays the full step ladder.
Best for: The early decision about which ratio to use. The visual preview makes it immediately clear how "dramatic" or "subtle" different ratios will feel in practice. The Major Third (1.25) versus Perfect Fourth (1.333) comparison is often the most useful - close enough to seem similar, different enough to create a noticeably different visual hierarchy.
Output format: Shows the pixel values for each scale step. Copy the numbers to use in your own CSS implementation or hand them to Utopia for fluid generation.
Free tier: Fully free, no account required.
Link: type-scale.com
3. Modular Scale (modularscale.com) - Advanced Scale Calculator
What it does: The original modular scale tool by Tim Brown and Scott Kellum. Supports multiple base values (useful for scales with more complex harmonic relationships), custom ratios, and outputs scales with notation showing the mathematical relationship between each step.
Best for: Type systems that require more than one base frequency or non-standard ratios. Also useful for teams that want to document the mathematical rationale behind their scale choices.
Output format: Scale values with ratio notation. Less turn-key than Type Scale but more expressive for complex systems.
Free tier: Fully free.
Link: modularscale.com
4. Wakamaifondue - Variable Font Inspector
What it does: Drag any font file onto the browser window and Wakamaifondue shows you all axes the variable font supports, their ranges, named instances, features (ligatures, tabular figures, old-style numbers), and a live preview where you can adjust all axes interactively.
Best for: Understanding what a variable font actually offers before committing to it. Not all variable fonts expose the same axes. Some only vary weight. Others include optical size, width, and slant. Wakamaifondue shows you exactly what is available.
Output format: CSS code for any combination of axis values you set in the live preview.
Free tier: Fully free, runs in the browser.
Link: wakamaifondue.com
5. Google Fonts - Font Discovery and Pairing
What it does: Hosts over 1,400 free, open-source web fonts with previews at adjustable sizes, weight comparisons, and usage data. The knowledge base section includes detailed articles on typography principles, font selection by use case, and type pairing theory.
Best for: Finding fonts that meet specific role requirements (legible body text, distinctive headings, monospace for code). The filter options for classification, number of styles, and character support are useful for narrowing from 1,400+ options to a manageable shortlist.
Output format: CSS @import or tags for web loading. Also available for self-hosting via the downloadable zip files.
Free tier: All fonts are free, including commercial use.
Link: fonts.google.com
6. WebAIM Contrast Checker - Accessibility Compliance
What it does: Takes foreground and background color values (hex, RGB, or HSL) and returns the contrast ratio, pass/fail status against WCAG AA and AAA for both normal and large text, and a suggestion for the minimum change needed to pass if the current combination fails.
Best for: Typography color decisions - specifically, whether a specific font color on a specific background meets accessibility requirements. Any text element that serves informational content needs at least 4.5:1 contrast for body text (WCAG AA) or 3:1 for large text (18pt+ or 14pt bold).
Output format: Contrast ratio and pass/fail. Instant, no setup required.
Free tier: Fully free.
Link: webaim.org/resources/contrastchecker/
7. Fonts In Use - Real-World Font Examples
What it does: A catalog of typographic choices made in real published work, with photographs and detailed notes on which fonts appear in which roles, why they were chosen, and how they are used in combination.
Best for: Font evaluation in actual reading contexts rather than type specimen previews. Searching "sans-serif body" or "web interface" returns examples of fonts used in comparable contexts to your project, which is far more useful for decision-making than looking at a font specimen that shows it at 72pt.
Free tier: Fully free, browsable without an account.
Link: fontsinuse.com
How These Tools Fit Together
A typical typography system workflow using these tools:
Step 1 - Establish the scale: Use Utopia.fyi to generate a fluid type scale for your target viewport range. Preview alternative ratios in type-scale.com first if you are undecided.
Step 2 - Select typefaces: Browse Google Fonts filtered to your role requirements. Validate candidates at body text size by previewing at 16px in actual paragraph text. Check Fonts In Use for real-world examples of shortlisted fonts.
Step 3 - Inspect variable font support: If using variable fonts, load them into Wakamaifondue to understand available axes and generate the CSS for your implementation.
Step 4 - Verify contrast: Run each text color/background color pairing through WebAIM Contrast Checker and fix any that fail AA.
Step 5 - Implement and test: Write the CSS using the Utopia-generated clamp() values, apply the custom properties across all text elements, and verify at 375px, 768px, and 1280px viewports.
The full guide on web typography system design at https://137foundry.com covers the conceptual decisions behind each step - which scale ratio fits which design context, how to pair fonts by functional role, and how to implement the system with CSS custom properties for long-term maintainability.
For front-end development projects where typography system implementation is part of the scope, 137Foundry web development services handle the full design-to-CSS pipeline, from scale generation through component-level integration and accessibility review.
Revisiting this toolset periodically is worth doing as the ecosystem evolves. Google Fonts has continued expanding its variable font catalog and filtering options since 2022. WebAIM updates their contrast checker guidance alongside WCAG standard revisions. Both Utopia.fyi and Wakamaifondue have added features since their initial releases. Checking each tool for updates before starting a new project takes two minutes and occasionally surfaces options that were not available the last time you used it.
Top comments (0)