Web Tools tools.bryantsmith.com

Color & Typography

Typography Preview

Set real sample text, then tune family, weight, size, letter spacing and line height and watch the specimen update instantly. Compare all families side by side with the same settings and copy production-ready CSS. Everything stays in your browser.

Runs in your browser v1.0.0

Start from a preset

one click

Typography controls

—

Paste a headline, paragraph or your own copy to preview it.

Live preview

—

CSS output

copy & paste 

                    

                        
                        
                    

                

            

        

    


    

        

            
Compare families

            same settings, side by side
        

        

            
Click any card to make that family the active specimen.

            

        

    


    

        

            
How it works

        

        

            

                The specimen is styled directly with font-family, font-size,
                font-weight, letter-spacing, line-height and
                text-transform, so what you see is exactly what the copied CSS produces.
                Families are web-safe system stacks — no fonts are downloaded. Nothing is sent to a
                server; the optional share link encodes the settings in the URL fragment, which stays in
                your browser.
            

        

    




Related tools
  • Line Height CalculatorTurn a font size and target ratio into readable line-height values in unitless, px, em, rem, percent, and points.
  • CSS Text Shadow GeneratorBuild single or layered CSS text shadows with a live preview, then copy production-ready CSS — entirely in your browser.
  • Font Size Scale GeneratorBuild a modular type scale from a base size and ratio, preview it live, and copy ready-to-use CSS variables.
  • 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 MixerMix two colors, then build design-system tints, shades, UI states, palettes and transparency steps with HEX, RGB, HSL and color-mix() output.
  • 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.
More Color & Typography tools