Fluid Typography Calculator

Responsive type and spacing that scale smoothly, with no breakpoints.

Private by design

Your inputs stay on your device and are not sent to our servers. Optional usage analytics does not receive your files or tool inputs.

Preparing fluid typography calculator

Preparing tool

How to use Fluid Typography Calculator

Set the smallest and largest screen widths.
Enter the base size and scale ratio at each end.
Copy the CSS variables or a single clamp() value.

Read the detailed guide →

What are the limits of Fluid Typography Calculator?

Assumes a 16 px root size unless you change it. Uses vw, so text does not follow the browser's zoom setting as well as pure rem does; the rem part keeps some zoom response. Check large text with your own eyes. Your data stays on your device.

:root { --step-n2: clamp(0.6944rem, 0.6859rem + 0.0426vw, 0.72rem); --step-n1: clamp(0.8333rem, 0.8111rem + 0.1111vw, 0.9rem); --step-0: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem); --step-1: clamp(1.2rem, 1.1312rem + 0.3438vw, 1.4063rem); --step-2: clamp(1.44rem, 1.3341rem + 0.5297vw, 1.7578rem); --step-3: clamp(1.728rem, 1.5716rem + 0.7821vw, 2.1973rem); --step-4: clamp(2.0736rem, 1.8493rem + 1.1216vw, 2.7466rem); --step-5: clamp(2.4883rem, 2.1734rem + 1.5748vw, 3.4332rem); --space-3xs: clamp(0.25rem, 0.2396rem + 0.0521vw, 0.2813rem); --space-2xs: clamp(0.5rem, 0.4792rem + 0.1042vw, 0.5625rem); --space-xs: clamp(0.75rem, 0.7188rem + 0.1563vw, 0.8438rem); --space-s: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem); --space-m: clamp(1.5rem, 1.4375rem + 0.3125vw, 1.6875rem); --space-l: clamp(2rem, 1.9167rem + 0.4167vw, 2.25rem); --space-xl: clamp(3rem, 2.875rem + 0.625vw, 3.375rem); --space-2xl: clamp(4rem, 3.8333rem + 0.8333vw, 4.5rem); --space-3xl: clamp(6rem, 5.75rem + 1.25vw, 6.75rem); }

Step	Small (px)	Large (px)	clamp()
--step-n2	11.11	11.52	clamp(0.6944rem, 0.6859rem + 0.0426vw, 0.72rem)
--step-n1	13.33	14.4	clamp(0.8333rem, 0.8111rem + 0.1111vw, 0.9rem)
--step-0	16	18	clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)
--step-1	19.2	22.5	clamp(1.2rem, 1.1312rem + 0.3438vw, 1.4063rem)
--step-2	23.04	28.13	clamp(1.44rem, 1.3341rem + 0.5297vw, 1.7578rem)
--step-3	27.65	35.16	clamp(1.728rem, 1.5716rem + 0.7821vw, 2.1973rem)
--step-4	33.18	43.95	clamp(2.0736rem, 1.8493rem + 1.1216vw, 2.7466rem)
--step-5	39.81	54.93	clamp(2.4883rem, 2.1734rem + 1.5748vw, 3.4332rem)
--space-3xs	4	4.5	clamp(0.25rem, 0.2396rem + 0.0521vw, 0.2813rem)
--space-2xs	8	9	clamp(0.5rem, 0.4792rem + 0.1042vw, 0.5625rem)
--space-xs	12	13.5	clamp(0.75rem, 0.7188rem + 0.1563vw, 0.8438rem)
--space-s	16	18	clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)
--space-m	24	27	clamp(1.5rem, 1.4375rem + 0.3125vw, 1.6875rem)
--space-l	32	36	clamp(2rem, 1.9167rem + 0.4167vw, 2.25rem)
--space-xl	48	54	clamp(3rem, 2.875rem + 0.625vw, 3.375rem)
--space-2xl	64	72	clamp(4rem, 3.8333rem + 0.8333vw, 4.5rem)
--space-3xl	96	108	clamp(6rem, 5.75rem + 1.25vw, 6.75rem)

Step

Small (px)

Large (px)

clamp()

--step-n2

11.11

11.52

clamp(0.6944rem, 0.6859rem + 0.0426vw, 0.72rem)

--step-n1

13.33

14.4

clamp(0.8333rem, 0.8111rem + 0.1111vw, 0.9rem)

--step-0

clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)

--step-1

19.2

22.5

clamp(1.2rem, 1.1312rem + 0.3438vw, 1.4063rem)

--step-2

23.04

28.13

clamp(1.44rem, 1.3341rem + 0.5297vw, 1.7578rem)

--step-3

27.65

35.16

clamp(1.728rem, 1.5716rem + 0.7821vw, 2.1973rem)

--step-4

33.18

43.95

clamp(2.0736rem, 1.8493rem + 1.1216vw, 2.7466rem)

--step-5

39.81

54.93

clamp(2.4883rem, 2.1734rem + 1.5748vw, 3.4332rem)

--space-3xs

4.5

clamp(0.25rem, 0.2396rem + 0.0521vw, 0.2813rem)

--space-2xs

clamp(0.5rem, 0.4792rem + 0.1042vw, 0.5625rem)

--space-xs

13.5

clamp(0.75rem, 0.7188rem + 0.1563vw, 0.8438rem)

--space-s

clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)

--space-m

clamp(1.5rem, 1.4375rem + 0.3125vw, 1.6875rem)

--space-l

clamp(2rem, 1.9167rem + 0.4167vw, 2.25rem)

--space-xl

clamp(3rem, 2.875rem + 0.625vw, 3.375rem)

--space-2xl

clamp(4rem, 3.8333rem + 0.8333vw, 4.5rem)

--space-3xl

108

clamp(6rem, 5.75rem + 1.25vw, 6.75rem)

Step	Small (px)	Large (px)	clamp()
--step-n2	11.11	11.52	clamp(0.6944rem, 0.6859rem + 0.0426vw, 0.72rem)
--step-n1	13.33	14.4	clamp(0.8333rem, 0.8111rem + 0.1111vw, 0.9rem)
--step-0	16	18	clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)
--step-1	19.2	22.5	clamp(1.2rem, 1.1312rem + 0.3438vw, 1.4063rem)
--step-2	23.04	28.13	clamp(1.44rem, 1.3341rem + 0.5297vw, 1.7578rem)
--step-3	27.65	35.16	clamp(1.728rem, 1.5716rem + 0.7821vw, 2.1973rem)
--step-4	33.18	43.95	clamp(2.0736rem, 1.8493rem + 1.1216vw, 2.7466rem)
--step-5	39.81	54.93	clamp(2.4883rem, 2.1734rem + 1.5748vw, 3.4332rem)
--space-3xs	4	4.5	clamp(0.25rem, 0.2396rem + 0.0521vw, 0.2813rem)
--space-2xs	8	9	clamp(0.5rem, 0.4792rem + 0.1042vw, 0.5625rem)
--space-xs	12	13.5	clamp(0.75rem, 0.7188rem + 0.1563vw, 0.8438rem)
--space-s	16	18	clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)
--space-m	24	27	clamp(1.5rem, 1.4375rem + 0.3125vw, 1.6875rem)
--space-l	32	36	clamp(2rem, 1.9167rem + 0.4167vw, 2.25rem)
--space-xl	48	54	clamp(3rem, 2.875rem + 0.625vw, 3.375rem)
--space-2xl	64	72	clamp(4rem, 3.8333rem + 0.8333vw, 4.5rem)
--space-3xl	96	108	clamp(6rem, 5.75rem + 1.25vw, 6.75rem)

Step

Small (px)

Large (px)

clamp()

--step-n2

11.11

11.52

clamp(0.6944rem, 0.6859rem + 0.0426vw, 0.72rem)

--step-n1

13.33

14.4

clamp(0.8333rem, 0.8111rem + 0.1111vw, 0.9rem)

--step-0

clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)

--step-1

19.2

22.5

clamp(1.2rem, 1.1312rem + 0.3438vw, 1.4063rem)

--step-2

23.04

28.13

clamp(1.44rem, 1.3341rem + 0.5297vw, 1.7578rem)

--step-3

27.65

35.16

clamp(1.728rem, 1.5716rem + 0.7821vw, 2.1973rem)

--step-4

33.18

43.95

clamp(2.0736rem, 1.8493rem + 1.1216vw, 2.7466rem)

--step-5

39.81

54.93

clamp(2.4883rem, 2.1734rem + 1.5748vw, 3.4332rem)

--space-3xs

4.5

clamp(0.25rem, 0.2396rem + 0.0521vw, 0.2813rem)

--space-2xs

clamp(0.5rem, 0.4792rem + 0.1042vw, 0.5625rem)

--space-xs

13.5

clamp(0.75rem, 0.7188rem + 0.1563vw, 0.8438rem)

--space-s

clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)

--space-m

clamp(1.5rem, 1.4375rem + 0.3125vw, 1.6875rem)

--space-l

clamp(2rem, 1.9167rem + 0.4167vw, 2.25rem)

--space-xl

clamp(3rem, 2.875rem + 0.625vw, 3.375rem)

--space-2xl

clamp(4rem, 3.8333rem + 0.8333vw, 4.5rem)

--space-3xl

108

clamp(6rem, 5.75rem + 1.25vw, 6.75rem)