Color Picker
Pick colors with EyeDropper, get HEX/RGB/HSL/CMYK/HWB values, explore harmonies and gradients.
FREE ONLINE TOOL
Type Scale Calculator
Generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values.
2 worked examples
Methodology and sources included
Ads only on eligible content
Reviewed April 27, 2026
Design
Type Scale Calculator is a free, browser-based design tool. Generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values.
What this tool does
- base font size input with px default
- preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio
- custom ratio input
- generate h1 through h6 sizes
- calculated line heights from 1.2 to 1.6
More Design Tools
Color Wheel & HarmoniesExplore color theory with an interactive wheel, harmony presets, palette intent CSS Text Shadow GeneratorCreate multi-layer CSS text shadow effects with live preview. Add unlimited shad CSS Loader GeneratorGenerate beautiful CSS loading spinners and animations. 12+ presets with live pr HTML Color Codes ReferenceBrowse all 140+ HTML named colors with their hex, RGB, and HSL values — search bIn-Depth Guide
Type scales are a centuries-old system for relating font sizes in a document, with formalised modern ratios documented by Robert Bringhurst in 'The Elements of Typographic Style' and Tim Brown's modularscale.com. Common scales use mathematical ratios: minor third (1.2), major third (1.25), perfect fourth (1.333), golden ratio (1.618), etc. Given a base body-text size - typically 16px or 18px to honour WCAG 2.2 readability and browser defaults - the scale generates heading sizes (h1 through h6) and supporting text sizes (small, tiny) that look proportional and balanced. FastTool's Type Scale Calculator lets designers pick a base size and ratio, preview the full scale with real text, and export CSS custom properties ready to paste into a design system.
Why This Matters
A consistent type scale is the difference between a design system that scales across dozens of screens and an ad-hoc collection of arbitrary font sizes. Without a scale, every new page's headings drift slightly and viewers perceive inconsistency even if they cannot articulate it. CSS Working Group's modern clamp() function combined with a well-chosen scale produces fluid typography that adapts across breakpoints without media queries, a technique championed by Utopia.fyi and adopted by government design systems like GOV.UK.
Real-World Case Studies
- Design system foundations. A design-systems lead at a fintech picks the perfect fourth (1.333) ratio from a 16px base. The scale produces 16 / 21.3 / 28.4 / 37.9 / 50.5 / 67.3 px for body / small headings / body headings / feature headings / major headings / hero. She codifies these as CSS custom properties and the entire product portfolio aligns visually across 40+ screens within a single release cycle.
- Fluid typography on marketing. A marketing designer uses the calculator in conjunction with Utopia.fyi to produce
clamp(1rem, 0.5rem + 2vw, 2rem)values for each level. The result is hero text that scales smoothly from mobile 40px to desktop 80px without any media query, with mathematically-controlled in-between values at every viewport width. - Legibility improvement. A product team auditing their app switches their base font size from the default 14px to 16px and applies a minor-third scale. The change removes 4 previous WCAG 2.2 small-text violations (SC 1.4.4 Resize Text) and measurably reduces user-reported legibility complaints in the NPS follow-up survey.
Technical Deep Dive
A type scale with base b and ratio r generates step n as b r^n. Negative n produces smaller sizes (captions, footnotes); positive n produces headings. Common ratios from modularscale.com: minor second 1.067, major second 1.125, minor third 1.2, major third 1.25, perfect fourth 1.333, augmented fourth 1.414, perfect fifth 1.5, golden ratio 1.618, major sixth 1.667, minor seventh 1.778, major seventh 1.875, octave 2.0. For fluid typography, the calculator generates CSS clamp(min, preferred, max) expressions per CSS Values and Units Module Level 4, using the linear-interpolation approach from Utopia: preferred value = y_min + (x - x_min) (y_max - y_min) / (x_max - x_min). Output units default to rem for accessibility (scales with user browser settings) with px equivalents shown for reference. CSS custom property names follow the industry convention --text-xs, --text-sm, --text-base, --text-lg, --text-xl, --text-2xl ... --text-6xl used by Tailwind, Bootstrap 5, and most modern design systems.
💡 Expert Pro Tip
Do not use the same scale ratio across both body and display contexts. Display headings benefit from tighter ratios (1.2-1.25) that keep hierarchy on a crowded marketing page; long-form body reading benefits from wider ratios (1.333-1.414) for clear visual separation between headings and paragraphs. Pick based on content density, not house style.
Methodology, Sources & Accessibility
Methodology
The implementation produces standards-compliant CSS, SVG, or HTML that conforms to the current W3C specification for the relevant feature. Colour calculations happen in the sRGB colour space unless a specific alternative is surfaced in the UI (lab, OKLCH, HSL). Accessibility is considered in the default output (WCAG 2.2 contrast guidance, focus-state preservation, semantic HTML), but you remain responsible for the larger accessibility context your generated artifact lives in.
Authoritative Sources
- CSS Color Module Level 4 — The current W3C specification for colour values and conversions in CSS.
- WCAG 2.2 Contrast — Accessibility contrast requirements colour tools reference.
- SVG 2 Specification — The scalable vector graphics spec used for design artifact generation.
- W3C Web Standards — The World Wide Web Consortium publishes HTML, CSS, DOM, and accessibility specifications that browser-based tools rely on.
- MDN Web Docs — Mozilla's reference documentation for web platform APIs used throughout this tool's implementation.
About This Tool
Type Scale Calculator is a free, browser-based utility in the Design category. Generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values. Standard processing runs on the client — no account is required, and there is no paywall or usage cap. The implementation uses audited standard-library primitives and published specifications rather than proprietary algorithms, so the output is reproducible and transparent.
Accessibility
FastTool targets WCAG 2.2 Level AA conformance: keyboard-navigable controls, visible focus states, semantic HTML, sufficient colour contrast, and screen-reader compatibility. If you encounter an accessibility issue, please reach us via the site footer.
Stop switching between apps — Type Scale Calculator lets you generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values directly in your browser. Design tokens matured in 2025 with the W3C Design Tokens specification — 2026 teams treat a JSON token file as the contract between design tools and production code, and Type Scale Calculator fits naturally into that token-first workflow. Type Scale Calculator processes standard inputs on your device. No account or server-side project storage is required, and ads or analytics are disclosed separately from tool input handling. With features like base font size input with px default and preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio, plus custom ratio input, Type Scale Calculator covers the full workflow from input to output. Most users complete their task in under 30 seconds. Type Scale Calculator is optimized for the most common design scenarios while still offering enough flexibility for advanced needs. Just enter your data and Type Scale Calculator gives you results instantly. From there you can preview, copy, or export the result. Try Type Scale Calculator now — no sign-up required, and your first result is seconds away.
You might also like our Color Wheel & Harmonies. Check out our SVG Path Visualizer. For related tasks, try our CSS Gradient Generator.
What Makes Type Scale Calculator Useful
- base font size input with px default — a purpose-built capability for design professionals
- preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio to handle your specific needs efficiently
- custom ratio input for faster, more precise results
- generate h1 through h6 sizes that saves you time by automating a common step in the process
- calculated line heights from 1.2 to 1.6 to handle your specific needs efficiently
- margin and letter spacing values for faster, more precise results
- Integrated live rendered heading preview for a smoother workflow
- CSS output with rem and px values included out of the box, ready to use with no extra configuration
- copy CSS to clipboard — reducing manual effort and helping you focus on what matters
- Side-by-side comparison view to spot differences quickly
- Completely free to use with no registration, no account, and no usage limits
- Runs in your browser for standard workflows, with no account or upload queue required
- Responsive design that works on desktops, tablets, and mobile phones
Reasons to Use Type Scale Calculator
- Uninterrupted workflow — the tool controls remain available without interstitials, forced waits, or layout shifts. Your workflow stays focused from input to result.
- Cross-platform consistency — whether you use Chrome, Firefox, Safari, or Edge on Windows, macOS, Linux, iOS, or Android, Type Scale Calculator delivers identical results. You never have to worry about platform-specific differences affecting your output.
- Offline capability — once the page loads, Type Scale Calculator works without an internet connection. This makes it useful in situations with limited connectivity — airplanes, remote locations, or metered mobile data plans — where cloud-based alternatives would fail.
- Continuous improvements — Type Scale Calculator is part of the FastTool collection, which receives regular updates and new features. Every time you visit, you get the latest version automatically without downloading updates or managing software versions.
How to Use Type Scale Calculator
- Navigate to the Type Scale Calculator page. The tool is ready the moment the page loads.
- Choose your design settings in the designated input area. The base font size input with px default option can help you format your input correctly. Labels and placeholders show you exactly what is expected.
- Review the settings panel. With preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio and custom ratio input available, you can shape the output to match your workflow precisely.
- Press the action button and your result appears immediately. All computation happens in your browser, so there is zero latency.
- Review your result carefully. Type Scale Calculator displays the output clearly so you can verify it meets your expectations before using it elsewhere.
- Save your output — click the copy button to place it on your clipboard, ready to paste into your target application, document, or communication.
- Continue using Type Scale Calculator for additional tasks — there is no limit on how many times you can run it in a single session or across multiple visits.
Get More from Type Scale Calculator
- When working on responsive designs, test your values on both mobile and desktop by resizing the browser window while using this tool.
- Export your results from Type Scale Calculator and save them in a design tokens file. This creates a single source of truth that your whole team can reference.
- Document your design decisions alongside the generated values. Future you — or your teammates — will appreciate knowing why a specific choice was made.
Common Errors and Fixes
- Choosing colors by eye alone. Always check your generated palette against WCAG 2.2 contrast requirements (4.5:1 for body, 3:1 for large text) before shipping — accessibility regressions hurt both users and SEO.
- Hard-coding design tokens that should be CSS variables. Pasting raw hex values into dozens of components locks you out of easy theming later — centralize them in a token file from day one.
- Trusting Type Scale Calculator for final print output. Screen colors use RGB and rely on backlighting; print uses CMYK with physical ink limits. Always proof critical print pieces before committing to a run.
- Ignoring dark mode in your workflow. Modern users expect both light and dark themes — test every generated value in both contexts before declaring a design done.
- Forgetting that designs look different across devices. A color or spacing choice that works on a calibrated monitor can fail on an OLED phone or a cheap laptop panel — sample across real hardware.
See Type Scale Calculator in Action
Creating a compact dashboard scale
Input
Base size: 16px
Ratio: 1.2
Steps: 6
→
Output
16px, 19.2px, 23.04px, 27.65px, 33.18px, 39.81px
A modest ratio keeps dashboard headings clear without making compact panels feel oversized.
Planning editorial headings
Input
Base size: 18px
Ratio: 1.333
Steps: 5
→
Output
18px, 24px, 32px, 42.65px, 56.87px
A larger type scale creates stronger hierarchy for articles and landing pages.
Browser-Based vs Other Options
| Feature | Browser-Based (FastTool) | Design Suite | Mobile Design App |
|---|---|---|---|
| Cost | Free, no limits | $$$ license or subscription | Free with limitations |
| Privacy | Browser-local standard processing | Local processing | May upload data |
| Installation | None — runs in browser | Large download + install | Browser extension install |
| Speed | Instant for quick tasks | Powerful for complex work | Lightweight but limited |
| Cross-Platform | Works everywhere | OS-specific versions | Browser-dependent |
| Updates | Always latest version | Manual updates needed | Auto-updates |
Alternatives Worth Considering
No tool is perfect for every scenario. Here are situations where a different approach will serve you better:
- When producing final assets for a major brand campaign. Type Scale Calculator handles quick iterations well, but the precision controls of Figma, Adobe Illustrator, or Affinity Designer remain essential for production-grade output.
- When you need real-time team collaboration. Browser tools are single-user by design; use Figma, Miro, or FigJam when multiple designers need to co-edit in real time.
- When working with advanced typography. Pro-level font features (OpenType ligatures, variable axes, language-specific forms) need a dedicated design application.
The Essentials of Type Scale Calculator
Type Scale Calculator supports the visual design process by providing instant feedback on design decisions. Generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values. Professional designers often need to rapidly test variations and communicate precise specifications to developers. Browser-based design tools bridge the gap between concept and implementation by generating production-ready values that can be copied directly into CSS or design files.
The task that Type Scale Calculator handles — generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values — is something that designers and creatives encounter regularly in their work. Before tools like this existed, the same task required either specialized desktop software, manual effort, or custom scripts written from scratch. Browser-based tools have changed this landscape by providing instant access to focused functionality without the overhead of software installation, license management, or environment configuration.
The evolution of web technology has made tools like Type Scale Calculator possible and practical. Modern browsers provide powerful APIs for computation, file handling, and user interface rendering that rival what was once only available in native desktop applications. Features like base font size input with px default, preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio demonstrate the practical benefits of this approach: instant access, zero maintenance, automatic updates, and cross-platform compatibility — all while maintaining the privacy guarantees that come from client-side processing.
How It Works
Type Scale Calculator is powered by JavaScript modules that implement design algorithms following industry standards with capabilities including base font size input with px default, preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio, custom ratio input. Color space conversions use the ICC color profile mathematics, and layout calculations follow the CSS Box Model specification. The live preview updates on every input change using requestAnimationFrame for smooth 60fps rendering. Output formats are generated to be directly usable in CSS, design tools, and development frameworks.
Worth Knowing
Design tokens reached broad maturity in 2025 with the W3C Design Tokens Community Group's specification — teams increasingly ship token JSON as the contract between design files and code.
The average person encounters between 4,000 and 10,000 design elements (ads, logos, icons, UI components) per day.
Essential Terms
- Gradient
- A gradual transition between two or more colors. CSS supports linear gradients (straight line), radial gradients (circular), and conic gradients (around a center point).
- Responsive Design
- A web design approach that makes pages render well on a variety of screen sizes. Responsive designs use flexible grids, flexible images, and CSS media queries to adapt to the viewing environment.
- Viewport
- The visible area of a web page in the browser window. Responsive design uses viewport-relative units (vw, vh) and meta tags to control how content appears at different sizes.
- Typography Scale
- A set of harmoniously sized text values used in a design system. Common scales are based on mathematical ratios like the golden ratio (1.618) or the perfect fourth (1.333).
Frequently Asked Questions
What is a type scale?
Type scale is a key concept in design that Type Scale Calculator helps you work with. Generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values. Understanding type scale is important because it affects how you approach this type of task. Type Scale Calculator on FastTool lets you explore and apply type scale directly in your browser, with features like base font size input with px default, preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio, custom ratio input — no sign-up or download required.
What ratio should I use for web typography?
As a browser-based design tool, Type Scale Calculator addresses this by letting you choose your design settings and get results instantly. Generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values. It is free, private, and works on any device with a modern web browser. Tool input is handled locally where browser APIs support it, and FastTool does not require uploads for standard use.
Check out: Color Picker
How do I choose a base font size?
Type Scale Calculator makes it easy to choose a base font size. Open the tool, choose your design settings, configure options such as base font size input with px default, preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio, custom ratio input, and get your result immediately. Everything is processed client-side in your browser for maximum speed and privacy.
What is the Golden Ratio in typography?
Golden Ratio in typography is a key concept in design that Type Scale Calculator helps you work with. Generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values. Understanding Golden Ratio in typography is important because it affects how you approach this type of task. Type Scale Calculator on FastTool lets you explore and apply Golden Ratio in typography directly in your browser, with features like base font size input with px default, preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio, custom ratio input — no sign-up or download required.
You might also find useful: CSS Gradient Generator
How do line heights relate to font size?
Type Scale Calculator makes it easy to How do line heights relate to font size. Open the tool, choose your design settings, configure options such as base font size input with px default, preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio, custom ratio input, and get your result immediately. Everything is processed client-side in your browser for maximum speed and privacy.
What is Type Scale Calculator and who is it for?
Type Scale Calculator helps designers and creatives by providing a browser-based solution for web design, graphic design, and creative projects. Generate a harmonious typographic scale for h1–h6 headings with line heights, margins, and letter spacing. Choose from popular ratios like Minor Third, Perfect Fourth, or Golden Ratio. Preview rendered hierarchy and copy CSS with rem/px values. Features like base font size input with px default, preset ratios: Minor Second Major Second Minor Third Major Third Perfect Fourth Augmented Fourth Perfect Fifth Golden Ratio, custom ratio input make it useful for both quick tasks and more involved workflows. Everything runs client-side, so you do not need to create an account or install anything.
Check out: CSS Gradient Generator
Does Type Scale Calculator work offline?
Type Scale Calculator operates independently of an internet connection once the page has loaded. Since it uses client-side JavaScript for all processing, your browser handles everything locally without needing to contact any server. This makes it reliable in situations with unstable or limited connectivity, such as working from a cafe with poor Wi-Fi, commuting on a train, or using a metered mobile data connection where you want to minimize bandwidth usage.
What makes Type Scale Calculator stand out from similar tools?
Three things set Type Scale Calculator apart: it is free with no limits, it keeps standard processing in the browser, and it works on any device without installation. Most competing tools require accounts, charge for advanced features, or require project uploads for processing. Type Scale Calculator avoids all three of these issues by running everything client-side. Additionally, the interface is available in 21 languages and works offline after the initial page load, which most alternatives do not offer.
You might also find useful: Color Converter (HEX/RGB/HSL/HSV/CMYK)
What languages does Type Scale Calculator support?
Type Scale Calculator offers multilingual support with 21 languages including English, Turkish, Hindi, Japanese, Korean, and more. Whether you prefer French, German, Spanish, Portuguese, or another supported language, the entire interface translates instantly using a client-side translation system. Right-to-left scripts like Arabic and Urdu are handled natively with full layout mirroring. This makes Type Scale Calculator accessible to users worldwide regardless of their primary language.
Do I need to create an account to use Type Scale Calculator?
Zero registration needed. Type Scale Calculator lets you jump straight into your task without any onboarding steps, account creation forms, or email verification processes. No email address, no password, no social login — just the tool, ready to use the moment the page loads. This makes it especially convenient when you need a quick result and do not want to commit to yet another online account.
Check out: Color Palette Generator
Who Benefits from Type Scale Calculator
Responsive Design Testing
Test how your design values translate across screen sizes by using Type Scale Calculator to calculate responsive breakpoints, font scales, and spacing systems. The browser-based approach means you can start immediately without any installation, making it practical for time-sensitive situations where setting up dedicated software is not an option.
Design Handoff to Developers
Use Type Scale Calculator to generate precise design specifications and tokens that developers can copy directly into code during the handoff process. Since there are no usage limits, you can repeat this workflow as many times as needed, experimenting with different inputs and settings until you achieve the exact result you want.
Accessibility Audits
Ensure your designs meet accessibility standards by using Type Scale Calculator to check contrast ratios, font sizes, and other WCAG-related parameters. This is a scenario where having a reliable, always-available tool in your browser saves meaningful time compared to launching a desktop application or searching for an alternative.
Design Portfolio Updates
Keep your portfolio fresh by using Type Scale Calculator to quickly process and prepare design samples for your personal website or Behance profile. The instant results and copy-to-clipboard functionality make this workflow fast and efficient, letting you move from task to finished output in a matter of seconds.
MOST POPULAR
Trending tools on FastTool
The most frequently used tools by our community.
All Design Tools (40)
- 🎯 Color Picker
- 🌈 CSS Gradient Generator
- 🌈 CSS Gradient Generator
- 🌈 Color Converter (HEX/RGB/HSL/HSV/CMYK)
- 🎨 Color Palette Generator
- 🎭 CSS Box Shadow Generator
- 🎨 Color Palette from Image
- ⬜ CSS Border Radius Generator
- ✍️ Font Style Generator
- 🎨 RGB to Hex Converter
- 📐 Aspect Ratio Calculator
- ✨ Favicon Generator
- View all 40 Design tools →
BROWSE BY CATEGORY
Explore all tool categories
Find the right tool for your task across 17 specialized categories.
References & Further Reading
Authoritative sources and official specifications that back the information on this page.
- Modular scale - A List Apart — A List Apart
Seminal article on type scales
- Point (typography) - Wikipedia — Wikipedia
Historical typographic units
- CSS Fonts Module Level 4 — W3C
CSS font-size specification