Fluid Type Scale Calculator

Generate font size variables for a fluid type scale with CSS clamp.

Overview

Customize everything, grab the output CSS, and drop it into any existing design system.

Features

• Fully customizable parameters for everything:
  • Baseline min font size, screen width, type scale
  • Baseline max font size, screen width, type scale
  • All of your modular steps
  • Custom naming convention for CSS variables
  • Whether to show output in rems or pixels
• Output CSS variables for fluid font sizing.
• Live preview table. Pick a font and enter some sample text to fine-tune the results.

Tech Stack

This project was bootstrapped with my 11ty-sass-images-seo starter and uses the following technologies:

• 11ty
• React for the interactive bits (à la Slinkity)
• Sass

Running Locally

1. Clone the repo.
2. Run yarn to install dependencies.
3. Run yarn dev and visit localhost:8080 to view the app.

Similar Tools

• Utopia.fyi fluid type scale calculator by James Gilyead and Trys Mudford
• Type Scale by Jeremy Church
• Modern fluid typography editor by Adrian Bece
• Fluid Typography by Erik André Jakobsen
• fluidtypography.com by Kip Hughes

Learn More

• Creating a Fluid Type Scale with CSS Clamp, a deep dive I wrote on this topic. The technique covered in the article is the basis for this app.
• Generating font-size CSS Rules and Creating a Fluid Type Scale by Stephanie Eckles
• Consistent, Fluidly Scaling Type and Spacing by Andy Bell

GitHub

View Github