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 design system. Share the URL with your team members or use it to document your CSS.

Features

• Fully customizable parameters for everything:
  • Baseline min/max font size, screen width, type scale.
  • The names of the steps in your type scale.
  • The prefix to use for the variable names.
  • The max number of decimal places in the output.
  • Whether to show output in rems or pixels.
  • The resolved pixel value of 1rem.
• Output CSS variables for fluid font sizing.
• Live preview table. Pick a font and enter some sample text to fine-tune the results.
• Link sharing.

Link Sharing

Note: This is NOT a developer API.

The /calculate route accepts the following query parameters and types. All parameters are optional. If a parameter is not specified, it will fall back to the default for that value (this applies to all parameters except useRems; see table below). If a parameter is invalid, you will be shown an appropriate error message.

Param	Description	Type	Constraints	Default
minFontSize	The minimum font size for the base step	number	Non-negative	16
minWidth	The screen width corresponding to the minimum font size	number	Non-negative and < maxScreenWidth	400
minRatio	The type scale ratio for the minimum font size of each step	number	Non-negative	1.25
maxFontSize	The maximum font size for the base step	number	Non-negative	19
maxWidth	The screen width corresponding to the maximum font size	number	Non-negative and > minScreenWidth	1280
maxRatio	The type scale ratio for the maximum font size of each step	number	Non-negative	1.333
steps	A comma-separated list of names for your type scale steps, in ascending order of font size	string	Comma-separated list. Step names must be alphanumeric, with no spaces.	sm,base,md,lg,xl,xxl,xxxl
baseStep	The name of the base step	string	Must exist in steps	base
prefix	The naming convention to use for the output CSS variables	string	Non-empty	font-size
includeFallbacks	Whether to include fallback variables in the CSS output for browsers that don't support clamp.	on, true, or false	An empty value will be treated as true. Omission implies false (fallbacks are not included).	false
useRems	Whether to use rems for font sizing.	on, true, or false	An empty value (e.g., useRems) will be treated as true. Omission implies false (pixels will be used).	on
remValue	The computed pixel value of 1rem. Useful if your app changes the root font size (e.g., with the popular 62.5% font size trick). Note: This parameter has no effect if useRems is omitted.	number	Integer. Min: 1.	16
decimals	The number of decimal places to round the output to.	number	Non-negative integer. Max 10.	2
previewFont	The font family to render in the preview.	string	Spaces must be escaped (e.g., Libre+Baskerville). The font must be a valid Google Font. Custom fonts are not supported.	Inter

Example URL: https://www.fluid-type-scale.com/calculate?minFontSize=15&minWidth=400&minRatio=1.25&maxFontSize=17&maxWidth=1280&maxRatio=1.333&steps=sm%2Cbase%2Cmd%2Clg%2Cxl%2Cxxl%2Cxxxl&baseStep=base&prefix=font-size&decimals=2&useRems=on&remValue=10&previewFont=Libre+Baskerville

Tech Stack

Fluid Type Scale Calculator runs on Next.js.

• React
• TypeScript
• Sass + CSS Modules

Running Locally

1. Clone the repo.
2. Run yarn to install dependencies.
3. Run yarn dev and visit localhost:3000 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