Base Sizes

Set the foundation for your type scale with Base Sizes. These values guide the tool in calculating the entire type scale. Provide key inputs for Font Size, Line Height, and Letter Spacing to shape your typography.

Scale

Set the Module Size and Step Unit to control how font sizes increase. The Step Unit defines the base increment, while the Module Size sets how many steps use that increment before the step size increases.

For example, with a Module Size of 4 steps and a Step Unit of 2px, the first 4 steps will add 2px to the Font Size, followed by the next 4 steps adding 6px, and so on. This allows for a consistent yet flexible type scale.

Line Grid

Show

Set a Line Grid in pixels to constrain Line Heights to multiples of this unit. For example, setting it to 4px will round all Line Heights to the nearest multiple of 4. To disable this constraint set the grid value to 1px, to prevent rounding.

ResetReset Scale
Reset Font
TableScale Values
ChartsScale Charts
DownloadDownload Scale
Add Step
Remove Step
    Add Step
    Remove Step
    • Tight
    • Medium
    • Wide
    Type Scale Tool & Models by Adonis Raul Raduca
    Type Scale Tool & Models by Adonis Raul Raduca

    The Type Scale Tool

    Meet Precise Type, the powerful Type Scale tool designed to help you craft smooth, harmonious typography for any project. From complex business apps to consumer products and visually striking websites, this tool empowers you to create with confidence. It's built for both designers and developers, offering computational models that make implementation a breeze. Whether you're focused on design or diving into the technical details, this tool has you covered.

    Metric Type Scale

    The metric type scale lets you create font sizes as precise multiples of a chosen unit, making it ideal for projects that need a structured, consistent approach. While commonly used in complex business applications, it's flexible enough to fit a wide variety of products and websites. Curious about how it all works? Head over to the Models section to explore more!

    A Little History

    Type scales gained prominence with Tim Brown's work on Modular Scale, setting a new standard for web typography. This tool goes beyond just font size, offering a complete solution for designing type scales and type systems—from design to implementation-ready models.

    End image
    © 2024 Adonis Raul Raduca
    Close

    Type Scale Charts

    See how font sizes, line heights, and letter spacing are evolving across your type scale.

    Font Size Increase

    Line Height Increase

    Letter Spacing Decrease

    Close
    Download Download Scale

    Type Scale Table

    Explore your type scale values, conveniently displayed in multiple units, for a seamless comparison across formats.
    Font Size Line Height Letter Spacing
    px rem px ratio % em