Typescale is a web-based typography tool designed to help designers and developers build structured and visually balanced type systems for digital products. It allows users to define a base font size and apply mathematical scaling ratios to automatically generate a full hierarchy of text styles, from small captions to large display headings.

The tool focuses on solving the challenge of inconsistent typography in user interfaces by applying modular scale principles. Users can experiment with different ratios (such as Minor Third, Perfect Fourth, or Golden Ratio), adjust line heights, letter spacing, and font families, and instantly preview how a complete typographic system will look across different screen sizes.

Typescale also generates production-ready CSS, including variables and reusable classes, making it easy to integrate the resulting system into web projects. It supports responsive typography workflows, allowing designers to adapt scales for mobile and desktop layouts while maintaining visual consistency.

In addition to scale generation, Typescale provides inspiration through prebuilt examples and community-shared typography systems, helping users understand how professional design systems structure type hierarchies in real-world applications.

Key features include:

• Automated generation of typographic scales using mathematical ratios
• Adjustable base font size, line height, and spacing controls
• Live preview of heading and body text hierarchy
• CSS export with variables and reusable styles
• Responsive typography configuration for different screen sizes

Common use cases include:

• Designing UI typography systems
• Building design systems for web apps
• Generating consistent heading hierarchies
• Prototyping website typography
• Exporting production-ready CSS for developers

Typescale is an independent web tool created by designer and developer Sam Smith.