BLACKSTAR
LAB / 006 Type Tool
Set the Scale

Fluid Type Calculator

Set a base size and ratio, preview the hierarchy and copy fluid CSS for the result.

Built with
CSS Clamp / Variable Type / Responsive Math
Privacy
Your inputs stay in the browser
TRY IT
01 / THE IDEA

Why Make This?

Can a handful of type choices produce a responsive scale that still feels intentional?

02 / UNDER THE HOOD

What Is It Doing?

The calculator turns your base size, ratio and reading width into a live specimen and a set of clamp values.

03 / WHERE IT FITS

Where Could This Help?

  • Starting a website type system
  • Comparing scale ratios
  • Tuning editorial layouts
  • Preparing usable values for development
HANDS ON / 06

Give It a Try

Move the controls until the specimen feels right, then copy the CSS.

TYPE CHARACTER

TYPE SCALE READY


  

  

    
LIVE TYPE SAMPLE17 PX / 1.25

    

      SAMPLE ARTICLE / TYPE
      
A Heading That Fits the Screen

      
The sizes change. The hierarchy stays easy to follow.

      
This sample uses the values on the left to set its heading sizes, line length and spacing. Nothing is fixed to a single screen width.

      
Resize the window or move a control to see the type adjust.

    

    
H1 / 51.9 PXH2 / 33.2 PXBODY / 17 PX