CodeNimbleToolsFree Online Developer Tools
Explore tools

Fluid Typography Calculator

Build a complete fluid type scale — modular ratios at both viewport ends, output as CSS custom properties.

Tool input is processed locally in your browser and is not submitted to CodeNimbleTools. Avoid pasting production secrets into any device or website you do not fully trust.

Fluid type scale (CSS custom properties) 

  




  





  

    
About this tool
One clamp() is a size; a system needs a scale. This calculator generates a full fluid type scale: pick base sizes and modular ratios for small and large viewports, and get a set of --step-* custom properties where every step interpolates smoothly between its own min and max.
Using a larger ratio on desktop than mobile keeps headings dramatic on large screens without overwhelming phones.
    
How to use it
  1. Set base sizes (body text) for min and max viewports.
  2. Pick a modular ratio for each end — minor third to golden ratio.
  3. Choose how many steps up (headings) and down (small text).
  4. Copy the :root block and use var(--step-2) etc. in your CSS.
    
Useful ways to apply it
  • Design systems that need consistent heading hierarchies.
  • Marketing sites with big, fluid display type.
  • Replacing ad-hoc font sizes with a principled scale.
  • Matching a designer's type ramp in code precisely.

          
Worked example

      

        
Example input
16px→20px base size across 360px→1280px viewport, modular ratios 1.2→1.25

        
Expected output
A set of CSS custom properties using clamp() for a fluid type scale

      

    
          
Edge cases to check

      
  • Aggressive ratios can create very large heading steps.
  • Viewport interpolation should still be tested with browser zoom and user font settings.
  • The chosen scale is a design decision, not an accessibility guarantee.

    
    
Known limitations

    
The calculator generates a mathematical scale; it cannot judge readability, line length, font metrics or the needs of a specific audience.


    

      
How this tool was reviewed

      
Reviewed at minimum/maximum viewport boundaries and across negative/base/positive scale steps for monotonic output.

      
Last reviewed: September 3, 2026 · Maintainer: William

              
Standards and technical references

        
            
See the site-wide testing methodology for fixture categories, privacy checks and correction policy.

    

  

    

    
Frequently asked questions

          
What is a modular scale?
A series where each step multiplies the previous by a fixed ratio (like 1.25). It produces harmonious size relationships instead of arbitrary values.

          
Why different ratios for min and max?
Small screens can't fit huge headings; large screens look flat without them. A 1.2 ratio on mobile and 1.25+ on desktop is a proven combination.

          
How do I use the output?
Paste the :root block into your CSS, then reference the variables: h1 { font-size: var(--step-4); }. The generator includes usage examples.

      

    
 Privacy
Tool input is processed locally in your browser and is not submitted to CodeNimbleTools. Avoid pasting production secrets into any device or website you do not fully trust.