Starlight Tools

Web CSS Tool

CSS Clamp Calculator for Responsive Typography

Create a fluid font-size that grows smoothly between two viewport widths and stops at exact minimum and maximum sizes. The calculation and preview run entirely in your browser.

Typography range

Set two points on a linear scale. The generated value reaches each size at its matching viewport width.

Used to convert rem values.

Viewport shortcut

Generated CSS


        

          
          
          
        

        

        

          
—Slope · px per viewport px

          
—Viewport coefficient

          
—Y-intercept

          
—Fluid viewport span

        

        

      

    


    

      
Responsive type preview

      

        

          
          
        

        —
      

      
Fluid type should feel calm, not surprising.

      
The preview simulates the selected viewport; it does not resize the browser window.

      
      
    


    




      
How to Calculate a CSS Clamp Font Size

      
    
        
  1. Enter the smallest and largest font sizes you want. Choose rem for root-relative typography or px for pixel output.
    2. 
        
  2. Enter the viewport width where scaling starts and the width where it stops. Both viewport inputs are pixels because CSS 1vw represents one percent of the viewport width.
    3. 
        
  3. Move the simulated viewport slider to inspect the size below, inside, and above the fluid range.
    4. 
        
  4. Copy the full font-size declaration, copy only the clamp() value, or download a small CSS file.
    5. 
      

    





    

      
Formula and Assumptions

      
The preferred value is the straight line through (minimum viewport, minimum size) and (maximum viewport, maximum size). Sizes are converted to pixels for the calculation; a rem intercept is converted back using the selected root size.

      
slope = (maximum size − minimum size) ÷ (maximum viewport − minimum viewport)
vw coefficient = slope × 100
intercept = minimum size − (slope × minimum viewport)
font-size = clamp(minimum, intercept + vw coefficient, maximum)

      
The generated CSS assumes the selected rem-to-pixel relationship when rem output is used. A user or stylesheet can change the actual root font size, so test the result with your real root styles and browser zoom. The CSS Values and Units specification defines clamp() as a minimum, central calculation, and maximum; MDN’s clamp reference includes responsive typography and accessibility guidance.

    


    

      
Practical Fluid Typography Guide

      

        
What Happens at Each Width
Below the starting viewport, the minimum term wins. Within the selected range, the preferred expression grows linearly. Above the ending viewport, the maximum term wins. No media query is required for that one continuous scale.

        
REM vs Pixel Output
REM keeps the minimum and intercept tied to the document root size and is the usual choice for type. Pixel output can match fixed design specifications, but it makes the relationship to a root type scale less explicit.

        
Accessibility and Zoom
Do not disable browser zoom. Test at 200% zoom, with larger default text, and on narrow screens. A maximum at least twice the minimum provides more room for enlargement, but a formula alone does not guarantee readable type or accessible reflow.

        
When to Use a Type Scale
Use related minimum and maximum values across headings and body styles so the hierarchy remains intentional. CSS custom properties can store each generated clamp and keep component rules readable.

      

    


    


    

      
CSS Clamp Calculator FAQ

      
What does CSS clamp() do?
clamp(minimum, preferred, maximum) uses the preferred responsive value while preventing the result from going below the minimum or above the maximum.

      
How is the fluid font-size calculated?
The calculator finds the slope between the two size/viewport points, then calculates the line’s intercept. Multiplying the slope by 100 produces the vw coefficient because 1vw is one percent of the viewport width.

      
Should I use rem or px in clamp()?
REM is usually preferable for typography because its fixed terms follow the document root font size. Pixel output is useful when a design specification explicitly uses pixels. Test either choice with browser zoom and user text settings.

      
What happens outside the viewport range?
Below the minimum viewport width, the minimum font size wins. Above the maximum viewport width, the maximum font size wins. Between them, the preferred value changes linearly.

      
Can this calculator make type shrink as the viewport grows?
No. This typography-focused calculator requires the maximum font size to be greater than the minimum. Reverse scaling is unusual and should be written and tested intentionally.

      
Are my values uploaded or stored?
No. The calculations, preview, clipboard copies, and CSS download happen locally in the browser. This tool does not upload or store your input values.

    


      

        
Explore more tools