modularscale
Modular scales for harmonious typography and layout proportions
AI Summary
Modularscale is a tool for calculating modular scales based on mathematical ratios such as the golden ratio. It helps create harmonious typography systems by generating a proportional number sequence from a base value and a ratio. The tool offers web calculators, Sass and JavaScript plugins for direct integration into development projects.
✓ Pros
- + Mathematically grounded, harmonious proportions for professional typography
- + Plugins for Sass and JavaScript enable direct project integration
- + Flexibility through multi-stranded scales with multiple bases or ratios
✗ Cons
- − Requires understanding of typographic concepts and mathematical ratios
- − Plugin setup can be complex for beginners
Use Cases
- → Creating consistent font size systems for headings and body text
- → Defining harmonious spacing and layout proportions
- → Integrating modular scales into Sass or JavaScript projects via plugin
- → Experimenting with different mathematical ratios for typography hierarchies
Who is it for?
For web designers and frontend developers who want to create professional, harmonious typography systems and proportional layouts.
Tags
What is modularscale?
Modularscale calculates proportional number sequences from a base value and a mathematical ratio. The result is a scale from which consistent font sizes, spacing values and layout proportions can be derived. Available ratios include classic options such as the golden ratio, as well as various musical and geometric intervals. The web calculator visualises the resulting values immediately, making it easy to compare different ratios quickly.
Core features
- Web calculator: Enter the base value and ratio, and the scale appears directly in the browser with all derived steps.
- Sass plugin: Integrates the scale directly into the build process. Font sizes and spacing values can be referenced as Sass functions without managing numbers manually.
- JavaScript plugin: Provides access to scale values in frontend code or in build tools outside of Sass workflows.
- Multi-stranded scales: Multiple base values or ratios can be combined to produce denser or more nuanced scales.
Who is modularscale for?
Frontend developers and web designers who want to build a typography system without relying on arbitrary one-off decisions. Anyone building a design system from scratch benefits from deriving all font sizes and spacing from a single source. The Sass plugin fits well into existing CSS preprocessor setups, and the JavaScript plugin into JS-first workflows.
That said, anyone without background knowledge in typography theory will need time to get up to speed. The tool makes no recommendation about which ratio suits which use case. That judgement is left to the user. The plugin setup also assumes that Sass or a corresponding JS build process is already configured.
Context & alternatives
Modularscale belongs to the category of CSS and design utilities that help build token-based systems. It solves a specific problem: giving mathematical grounding to numbers in typography and spacing rather than guessing. Comparable approaches exist in larger design system frameworks such as Tailwind CSS, which ships with its own spacing and font size scales. There, however, the scale is fixed. Modularscale puts the choice of ratio in the user's hands. Anyone working with an existing framework and happy to accept its scale does not need it. Anyone who wants to define their own scale will find this the most direct tool for the job.
