CSS Clamp / Fluid Typography Generator

Responsive Font Sizing • No Media Queries • Live Resize Preview

Range
Used to convert px to rem. 16px is the browser default unless the site changes it.
Below 320px viewport width, the font stays at 16px. Above 1200px, it stays at 48px. In between, it scales smoothly.
Live Resize Preview
760px
Fluid Type
Drag the slider above to simulate different screen widths — the text resizes live using the same math as the exported CSS.
CSS Code

                    

                

            

                    
        

    


    
    

        

            
 About

            
 Contact

        

        

            
About CSS Clamp / Fluid Typography Generator

            
The CSS clamp(MIN, PREFERRED, MAX) function lets a value scale smoothly between a minimum and maximum, without writing a single media query. For fluid typography, the trick is building the PREFERRED value from a mix of rem and vw units so that the font size increases linearly with the viewport width — landing exactly on your minimum size at the minimum viewport width, exactly on your maximum size at the maximum viewport width, and scaling proportionally everywhere in between. This tool calculates that formula for you: set your font size range and the viewport range it should scale across, and copy the resulting clamp() declaration. All processing happens locally in your browser.