Skip to content
ENExplore Calculators

Responsive Breakpoint Sizing Calculator

Work out responsive breakpoint sizing instantly with clear inputs, formula shown and shareable results.

About Responsive Breakpoint Sizing Calculator

Fluid type is a straight line through the two breakpoint sizes: the slope is the size difference over the viewport difference, expressed in vw by multiplying by 100. Writing the result as a clamp expression means one CSS declaration handles every screen size, replacing a stack of media queries.

Formulas

Slope

slope = (max font - min font) / (max viewport - min viewport), x 100 for vw

Intercept

intercept = min font - slope x min viewport

Worked example

With the default values below, Responsive Breakpoint Sizing Calculator returns Viewport slope of 0.8333. Change any input above and every figure here is recalculated in your browser.

Inputs used

Font size at the small breakpointminimum 1 px
16 px
Font size at the large breakpointminimum 1 px
24 px
Small breakpointminimum 1 px
320 px
Large breakpointminimum 2 px
1,280 px

Results

Viewport slope
0.8333 vw
CSS clamp expression
clamp(1rem, 0.833rem + 0.833vw, 1.5rem)
Intercept in rem
0.8333 rem
Font size midway between breakpoints
20.00 px

Step by step

  1. 1Values used
  2. 2Slope
  3. 3Intercept
  4. 4Viewport slope= 0.8333 vw
  5. 5CSS clamp expression= clamp(1rem, 0.833rem + 0.833vw, 1.5rem)
  6. 6Intercept in rem= 0.8333 rem
  7. 7Font size midway between breakpoints= 20.00 px

Assumptions and limits

  • The result is derived only from the 4 inputs listed above. Anything not among them is not part of the calculation.
  • In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
  • Figures are rounded for display to 4 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is the Responsive Breakpoint Sizing figure worked out?

slope = (max font - min font) / (max viewport - min viewport), x 100 for vw. Fluid type is a straight line through the two breakpoint sizes: the slope is the size difference over the viewport difference, expressed in vw by multiplying by 100.

Why does this matter?

Writing the result as a clamp expression means one CSS declaration handles every screen size, replacing a stack of media queries.

What do I need to enter?

Enter font size at the small breakpoint, font size at the large breakpoint, small breakpoint, large breakpoint. The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.

Related Calculators

Responsive Breakpoint Sizing Calculator | Calcrivo