Typographic scale

modular scale · fluid type · custom properties

Set minimum and maximum sizes for each typographic level and get the correct clamp() formula with a viewport preview. CSS custom properties ready for your theme stylesheet.

Scale parameters
Base size 16px
Steps above base
Steps below base
Root font-size
Output format
Variable prefix
Ratio
Custom ratio
Font preview

                                    

                                    

                                        

                                    

                                

                            

                        

                    


                    

                        
Fluid typography with CSS clamp() is the modern approach to managing text sizes in responsive layouts: instead of defining font-size at every breakpoint, you specify a min-max range and the browser linearly interpolates the value based on viewport width.
This generator lets you:
  • Set minimum and maximum sizes for H1 through H6 and body text
  • Automatically calculate the correct clamp() formula with the fluid scale coefficient
  • Preview the scale across different viewport widths
  • Export CSS custom properties ready for the theme stylesheet
Particularly useful in the Figma → WordPress workflow: designers work on a fixed desktop frame, but the theme needs to scale gracefully on mobile. An automatically generated scale eliminates the need to define every value at every breakpoint.
How to use the modular scale
  • Pick a ratio (e.g. perfect fourth 1.333 or golden ratio 1.618) for the rhythm between steps.
  • Set the visual base size and how many steps up and down you need.
  • Choose output as rem, px, rem with px comments, or ready-made clamp().
  • Paste the :root block into your stylesheet or download the .css file.
Pairing a modular scale with fluid type keeps hierarchy consistent across viewports.