Fluid Type Scale Calculator
Generate font size variables for a fluid type scale with CSS clamp.
Customize everything, grab the output CSS, and drop it into any existing design system.
- 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.
This project was bootstrapped with my 11ty-sass-images-seo starter and uses the following technologies:
- Clone the repo.
yarnto install dependencies.
yarn devand visit
localhost:8080to view the app.
- 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
- 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.
font-sizeCSS Rules and Creating a Fluid Type Scale by Stephanie Eckles
- Consistent, Fluidly Scaling Type and Spacing by Andy Bell