Web Tools tools.bryantsmith.com

Color & Typography

Font Size Scale Generator

Pick a base size and a ratio, and get a consistent modular type scale. Preview every step live, then copy the generated CSS variables or download them. Everything runs in your browser — your input never leaves the page.

Runs in your browser v1.0.0

Build your type scale

live

The size your body text starts from.

Scale preview

live

    Large steps are capped visually so the list stays readable; the value shown is exact.

    Generated CSS

    copy & paste 
    
                
    
                    
                    
                
    
                
    
                    Paste the block into :root and reference the variables anywhere,
                    for example font-size: var(--font-size-xl);.
                
    
            
    
        
    
    
    

    
    
        
            Advanced
            Root font size for rem conversion
        
        
    
            
    
                
                
                
    
                    Used to convert between px and rem. The browser default is 16px.
                
    
            
    
        
    
    
    

    
    
        
    
            
    How the scale works
    
        
    
        
    
            
    
                A modular scale multiplies a base size by a ratio for each step:
                size = base × ratiostep. A small ratio keeps the
                hierarchy subtle, while a larger ratio spreads headings further from body text.
                The generator names each step, formats the values, and emits a block of
                --font-size-* custom properties you can drop straight into your
                stylesheet. Invalid values are reported inline instead of producing broken CSS.
            
    
        
    
    
    

    

    Related tools
    • Accessible Palette GeneratorTurn one brand color into an accessible tonal palette whose text, button and muted roles are adjusted to meet a WCAG contrast target.
    • Color Palette GeneratorTurn one seed color into a coordinated color-harmony palette, then copy it as CSS variables, JSON tokens, Tailwind colors or a hex list.
    • Color Shade GeneratorGenerate configurable lighter and darker shade scales from a base color, then copy CSS variables, JSON tokens or Tailwind config.
    • CSS Text Shadow GeneratorBuild single or layered CSS text shadows with a live preview, then copy production-ready CSS — entirely in your browser.
    • Line Height CalculatorTurn a font size and target ratio into readable line-height values in unitless, px, em, rem, percent, and points.
    • Typography PreviewCompare font families, weights, sizes, spacing and line heights against your own sample text — live in the browser.
    More Color & Typography tools