A Sass library for generating modular scales to create harmonious typography and spacing in web design.
Modular Scale is a Sass library that generates modular scales—mathematical sequences of values based on a consistent ratio—for use in web typography and spacing. It solves the problem of arbitrary font sizes and spacing by providing a systematic way to create harmonious, proportional designs directly within Sass stylesheets. Developers can define a base size and ratio to produce a scale of values that ensure visual consistency across their projects.
Frontend developers and designers working with Sass who want to implement systematic typography and spacing scales in their web projects. It's particularly useful for those building design systems or aiming for mathematically precise, aesthetically pleasing layouts.
Developers choose Modular Scale because it deeply integrates modular scale theory into Sass, offering powerful features like multi-stranded scales, responsive typography helpers, and target size calculations. Unlike manual calculations or generic CSS tools, it provides a dedicated, flexible system for implementing and maintaining design proportions directly in the stylesheet.
Modular scale calculator built into your Sass
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows setting multiple base values and ratios for complex, multi-stranded scales, as shown in the configurable $modularscale map with threads for different contexts.
Includes the ms-respond mixin for fluid typography across breakpoints, implementing Mike Riethmuller's technique to seamlessly scale values based on predefined ratios.
Offers a collection of classic ratios like golden ratio and musical proportions out of the box, eliminating guesswork for aesthetically pleasing scales.
Enables defining ratios by specifying target sizes at scale steps (e.g., 42at5), simplifying setup by deriving ratios from desired font sizes rather than manual math.
Requires external Sass libraries like Compass or mathsass for non-integer exponents and target sizes, adding setup complexity and potential compatibility issues.
Tied exclusively to Sass preprocessing, making it incompatible with modern styling approaches like CSS-in-JS, utility-first frameworks, or vanilla CSS workflows.
Setting up multiple threads and responsive breakpoints demands careful ordering and unit consistency in the $modularscale map, which can be error-prone and hard to debug.