Generate font size variables for a fluid type scale with CSS clamp.
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.
- 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.
The /calculate route accepts the following query parameters and types. All parameters except boolean flags are required. Booleans that are not specified in the URL are treated as unchecked (false).
| Param | Description | Type | Constraints |
|---|---|---|---|
minFontSize |
The minimum font size for the base step | number |
> 0 && < maxFontSize |
minWidth |
The viewport or container width corresponding to the minimum font size | number |
> 0 && < maxWidth |
minRatio |
The type scale ratio for the minimum font size of each step | number |
> 0 && < maxRatio |
maxFontSize |
The maximum font size for the base step | number |
> 0 && > minFontSize |
maxWidth |
The viewport or container width corresponding to the maximum font size | number |
> 0 && > minWidth |
maxRatio |
The type scale ratio for the maximum font size of each step | number |
> 0 && > minRatio |
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. No duplicates are allowed. |
baseStep |
The name of the base step | string |
Non-empty string. Must appear in steps. |
prefix |
The naming convention to use for the output CSS variables | string |
Non-empty alphanumeric string. |
includeFallbacks |
Whether to include fallback variables in the CSS output for browsers that don't support clamp. | on, true, or false |
|
useRems |
Whether to use rems for font sizing. | on, true, or false |
|
useContainerWidth |
Whether to use container width (cqi) instead of viewport width. | on, true, or false |
|
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 |
> 0 |
decimals |
The number of decimal places to round the output to. | int |
>= 0 && <= 10 |
previewFont |
The font family to render in the preview. | string |
Non-empty string. Spaces must be escaped (e.g., Libre+Baskerville). The font must be a valid Google Font. Custom fonts are not supported. |
previewText |
The text to render in the preview table. | string |
Non-empty string. Spaces must be escaped (e.g., This+is+a+sentence). |
previewWidth |
The width to simulate in the preview table. | number |
> 0 |
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&previewText=Testing+123&previewWidth=420
- SvelteKit
- Sass
- TypeScript
- Clone the repo.
- Run
pnpm installto install dependencies. - Run
pnpm run devand visitlocalhost:5173to 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.
- Generating
font-sizeCSS Rules and Creating a Fluid Type Scale by Stephanie Eckles - Consistent, Fluidly Scaling Type and Spacing by Andy Bell