Modular Scale Generator
Our typography & graphic design calculator teaches modular scale step by step. Perfect for students, teachers, and self-learners.
Calculator
Adjust values & calculateScale Values
CSS Custom Properties
:root {
--scale-n3: 0.5120rem;
--scale-n2: 0.6400rem;
--scale-n1: 0.8000rem;
--scale-0: 1.0000rem;
--scale-1: 1.2500rem;
--scale-2: 1.5625rem;
--scale-3: 1.9531rem;
--scale-4: 2.4414rem;
--scale-5: 3.0518rem;
--scale-6: 3.8147rem;
}Formula
Each value in the modular scale is calculated by raising the ratio to the power of the step number and multiplying by the base value. Step 0 is the base value, positive steps generate larger values, and negative steps generate smaller values. The ratio determines how dramatically values change between consecutive steps.
Last reviewed: December 2025
Worked Examples
Example 1: Design System Type Scale
Example 2: Double-Stranded Scale for Editorial Layout
Background & Theory
The Modular Scale Generator applies the following established principles and formulas. Educational measurement applies mathematical principles to quantify learning outcomes, track academic progress, and compare performance across students and institutions. Grade Point Average (GPA) is the central metric. In the standard four-point scale, letter grades are converted to grade points: A equals 4.0, B equals 3.0, C equals 2.0, D equals 1.0, and F equals 0. The GPA is then computed as the sum of (grade points multiplied by credit hours for each course) divided by total credit hours attempted. This weighted average ensures that high-credit courses exert proportionally greater influence on the final figure. Weighted GPA systems assign additional grade-point bonuses to honors, Advanced Placement, or International Baccalaureate courses, typically adding 0.5 to 1.0 points to acknowledge increased academic rigor. Unweighted GPA treats all courses equivalently regardless of difficulty. Percentile rank situates an individual score within a reference distribution: a student at the 75th percentile scored higher than 75 percent of the comparison group. Standardized tests use scaled scores and z-scores to normalize results across different test administrations. Standard deviation in test design quantifies how widely scores spread around the mean, informing item difficulty analysis and test reliability assessment. Bloom's Taxonomy, introduced in 1956, classifies cognitive learning into six hierarchical levels: remember, understand, apply, analyze, evaluate, and create. This framework guides curriculum design by ensuring assessments target higher-order thinking rather than only rote recall. Spaced repetition exploits the psychological spacing effect, whereby information reviewed at increasing intervals is retained far more efficiently than information reviewed in massed sessions. The SM-2 algorithm, developed by Piotr Wozniak in 1987, computes optimal review intervals using an ease factor updated after each recall attempt: I(n) = I(n-1) * EF, where the ease factor EF adjusts based on performance quality rated on a 0 to 5 scale. Flesch-Kincaid readability formulas estimate text difficulty. The Reading Ease score = 206.835 minus 1.015 times the average words per sentence minus 84.6 times the average syllables per word, where higher scores indicate easier text.
History
The history behind the Modular Scale Generator traces back through the following developments. Formal mass education systems emerged in the early 19th century. Prussia established a compulsory state schooling system beginning around 1763 under Frederick the Great, though full enforcement and a structured curriculum took shape in the early 1800s. The Prussian model, emphasizing standardized instruction, teacher training, and compulsory attendance, became a template that the United States, Britain, Japan, and much of Europe adopted throughout the 19th century. Compulsory education laws spread across the industrializing world between roughly 1850 and 1900. Massachusetts passed the first such law in the United States in 1852. By the end of the century most developed nations had established free, publicly funded schooling systems with defined grade levels and curricula. The measurement of individual intelligence and academic aptitude arose at the turn of the 20th century. Alfred Binet, commissioned by the French government to identify students needing additional support, developed the first practical intelligence test in 1905 with Theodore Simon. Their scale introduced the concept of mental age and formed the basis for later intelligence quotient measurements. The Scholastic Aptitude Test, later the SAT, was introduced in the United States in 1926 by Carl Brigham, building on Army intelligence tests used during World War I. It became the dominant college admissions tool over the following decades, institutionalizing standardized testing in American secondary education. The second half of the 20th century brought accountability-driven reform. The Elementary and Secondary Education Act of 1965 tied federal funding to measured outcomes. The No Child Left Behind Act of 2001 required annual standardized testing in core subjects across all public schools and imposed consequences for persistent underperformance, intensifying debate about the validity and consequences of high-stakes testing. The 21st century introduced Massive Open Online Courses, or MOOCs, beginning with the Khan Academy in 2006 and expanding rapidly after Stanford's free online courses attracted hundreds of thousands of students in 2011. Digital learning platforms enabled spaced repetition software, adaptive assessments, and learning analytics to reach global audiences outside traditional institutions.
Frequently Asked Questions
Formula
Value = Base x Ratio^Step
Each value in the modular scale is calculated by raising the ratio to the power of the step number and multiplying by the base value. Step 0 is the base value, positive steps generate larger values, and negative steps generate smaller values. The ratio determines how dramatically values change between consecutive steps.
Worked Examples
Example 1: Design System Type Scale
Problem: Create a modular scale for a design system with 16px base, Major Third ratio (1.25), 6 steps up and 2 steps down. What are all the values?
Solution: Base: 16px, Ratio: 1.25 (Major Third / 4:5)\n\nStep -2 (xs): 16 x 1.25^-2 = 10.24px (0.64rem)\nStep -1 (sm): 16 x 1.25^-1 = 12.80px (0.80rem)\nStep 0 (base): 16.00px (1.00rem)\nStep 1 (lg): 16 x 1.25^1 = 20.00px (1.25rem)\nStep 2 (xl): 16 x 1.25^2 = 25.00px (1.5625rem)\nStep 3 (2xl): 16 x 1.25^3 = 31.25px (1.9531rem)\nStep 4 (3xl): 16 x 1.25^4 = 39.06px (2.4414rem)\nStep 5 (4xl): 16 x 1.25^5 = 48.83px (3.0518rem)\nStep 6 (5xl): 16 x 1.25^6 = 61.04px (3.8147rem)\n\nTotal range: 61.04 / 10.24 = 5.96x
Result: 9 values from 10.24px to 61.04px | Range: 5.96x | Major Third ratio
Example 2: Double-Stranded Scale for Editorial Layout
Problem: An editorial website needs a richer scale. Use bases of 16px and 20px with a Perfect Fourth ratio (1.333), 4 steps up. Generate the merged scale.
Solution: Primary strand (base 16):\n16 x 1.333^0 = 16.00px\n16 x 1.333^1 = 21.33px\n16 x 1.333^2 = 28.43px\n16 x 1.333^3 = 37.90px\n16 x 1.333^4 = 50.52px\n\nSecondary strand (base 20):\n20 x 1.333^0 = 20.00px\n20 x 1.333^1 = 26.66px\n20 x 1.333^2 = 35.54px\n20 x 1.333^3 = 47.37px\n20 x 1.333^4 = 63.14px\n\nMerged (sorted): 16, 20, 21.33, 26.66, 28.43, 35.54, 37.90, 47.37, 50.52, 63.14\n10 distinct values providing finer granularity.
Result: 10 values from 16px to 63.14px | Double-stranded provides 5 additional intermediate sizes
Frequently Asked Questions
What is a modular scale in design?
A modular scale is a sequence of numbers that relate to one another through a consistent ratio, creating a harmonious set of proportions for design decisions. Rooted in musical theory (where notes relate through mathematical ratios), modular scales provide designers with predetermined values for typography, spacing, layout, and other dimensional decisions. Instead of choosing arbitrary numbers, a designer picks a base value and a ratio, then generates all sizes mathematically. For example, with a base of 16px and a ratio of 1.25, the scale produces 16, 20, 25, 31.25, 39.06, and so on. This mathematical foundation creates visual harmony because all values share proportional relationships.
How do I choose the right ratio for my modular scale?
The ratio should match the visual character and practical needs of your project. Smaller ratios like Minor Second (1.067) or Major Second (1.125) produce subtle differences between steps, ideal for data-dense interfaces, dashboards, and applications where many distinct but similar sizes are needed. Medium ratios like Minor Third (1.2) and Major Third (1.25) offer a good balance for most web projects, providing enough contrast for clear hierarchy without extreme size jumps. Larger ratios like Perfect Fifth (1.5) or Golden Ratio (1.618) create dramatic, editorial-style contrasts suitable for marketing sites, portfolios, and print design where visual impact takes priority over information density.
What is a double-stranded modular scale?
A double-stranded modular scale uses two base values with the same ratio, creating a richer set of proportional values. For example, using bases of 16px and 18px with a 1.25 ratio generates two interleaved scales that provide more size options while maintaining mathematical harmony. This technique was popularized by designer Tim Brown and is useful when a single-stranded scale does not provide enough intermediate values. The second base might be derived from a meaningful proportion in the design, such as the body text size and the sidebar width. The resulting merged scale offers more flexibility while preserving the proportional relationships that make modular scales visually coherent.
How do modular scales relate to musical intervals?
Modular scales in design borrow directly from musical harmony, where notes relate through mathematical frequency ratios. The Perfect Fifth (2:3 ratio, or 1.5) produces the same proportional relationship between design values as between musical notes a fifth apart. The Golden Ratio (approximately 1.618) appears throughout nature and art. The Octave (2:1) doubles the value with each step, creating the most dramatic contrast. These musical intervals have been recognized as pleasing proportions for centuries, and their application to typography and layout leverages the same innate human preference for harmonic relationships. The terminology helps designers communicate about proportional systems using shared musical vocabulary.
How do I implement a modular scale in CSS?
The most maintainable CSS implementation uses custom properties (variables) on the root element. Define each scale value as a variable: --scale-0: 1rem; --scale-1: 1.25rem; --scale-2: 1.5625rem, and so on. Reference these throughout your stylesheet for font-size, margin, padding, and gap values. CSS preprocessors like Sass can calculate scale values automatically using a function. For example, you can create a Sass function that takes a step number and returns baseValue * pow(ratio, step). Modern CSS with calc() can approximate this but lacks a native power function. Several CSS frameworks and PostCSS plugins like postcss-modular-scale automate this process entirely.
Can modular scales be used for spacing and layout, not just typography?
Absolutely. While modular scales are most commonly associated with typography, applying the same scale values to spacing (margins, padding, gaps) and layout dimensions creates a unified proportional system across the entire design. Using scale values for component padding, section margins, grid gaps, and border radii ensures that every dimensional decision reinforces the same visual rhythm. For example, if your type scale step-2 equals 25px, using 25px as a standard spacing unit creates visual alignment between text hierarchy and spatial organization. This holistic approach to proportional design is a hallmark of well-crafted design systems and creates a subtle but perceptible sense of visual order.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy