A typography scale is a set of font sizes that follow a consistent mathematical ratio. Instead of choosing sizes randomly, each step is multiplied by the same ratio — creating visual rhythm and hierarchy across headings, body text, and captions.
Choose a base size (16px is the browser default and a solid starting point), then pick a ratio. Smaller ratios like 1.125 create subtle, elegant scales for editorial sites; larger ratios like 1.618 create dramatic contrast for marketing pages.
Frequently Asked Questions
Q: What is a modular scale?
What is a modular scale? A modular scale is a series of sizes derived from a base size multiplied repeatedly by a fixed ratio — the same math behind musical scales.
Q: Which ratio should I choose?
Which ratio should I choose? Start with 1.333 (perfect fourth) for general web use. Use 1.2 for dense interfaces, 1.5 for bold marketing sites, and 1.618 for dramatic editorial designs.
Q: Why is 16px the standard base size?
Why is 16px the standard base size? 16px is the default root font size in all browsers. Basing your scale on it ensures consistency when users change browser zoom or accessibility settings.
Q: Should I use rem instead of px?
Should I use rem instead of px? Yes. Define the scale in px but apply with rem for accessibility: 1rem equals the root font size, so rem-based sizes scale with user preferences.
Q: How many steps does a scale need?
How many steps does a scale need? 6-8 steps cover most needs: caption, small, body, h4-h1 range, and a display size. More steps add maintenance without much benefit.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.