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

Learn More

GitHub

View Github