Home › Developer Tools › Typography Scale Generator
Typography Scale Generator
Choose a base font size and a musical ratio to build a harmonious set of heading and text sizes. Preview every step at its real size, then copy ready-made CSS custom properties, a Tailwind fontSize config or a Sass map.
Last updated:
px
Your body text size (step 0)
Any number greater than 1, e.g. 1.3
1–10 larger sizes (headings)
0–5 smaller sizes (captions, labels)
px
Browser default is 16px; used to convert px to rem/em
Enter your values to see the result.
Advertisement
Advertisement
How to use the Typography Scale Generator
- Enter your base size, usually your body text size such as 16px.
- Pick a ratio: smaller ratios suit apps and dense UIs, larger ones suit editorial pages.
- Set how many steps you need above and below the base.
- Choose the unit and naming that match your codebase.
- Copy the CSS, Tailwind or Sass code and paste it into your project.
Type scale ratios compared
Sizes for a 16px base. Each column multiplies by the ratio once per step.
| Ratio | Name | Step +1 | Step +2 | Step +3 | Step +4 | Step +5 | Best for |
|---|---|---|---|---|---|---|---|
| 1.125 | Major second | 18.00px | 20.25px | 22.78px | 25.63px | 28.83px | Dense app UIs |
| 1.2 | Minor third | 19.20px | 23.04px | 27.65px | 33.18px | 39.81px | Dashboards, docs |
| 1.25 | Major third | 20.00px | 25.00px | 31.25px | 39.06px | 48.83px | Blogs, marketing |
| 1.333 | Perfect fourth | 21.33px | 28.43px | 37.90px | 50.52px | 67.34px | Articles |
| 1.5 | Perfect fifth | 24.00px | 36.00px | 54.00px | 81.00px | 121.50px | Landing pages |
| 1.618 | Golden ratio | 25.89px | 41.89px | 67.77px | 109.66px | 177.42px | Posters, hero text |
How to apply a type scale
- Map steps to roles, not to tags. Use the variables for body text, lead paragraphs, card titles and page titles, then assign them to h1-h6 as your content needs.
- Tighten line height as size grows. Body text reads well around 1.5; large headings usually look better near 1.1-1.25. The suggested line heights in this tool follow that pattern.
- Keep small sizes readable. Avoid going much below 12px for captions and labels.
- Limit the number of sizes. Five to eight steps cover most sites; more steps make the design harder to keep consistent.
- Round for the grid if you need to. Values such as 31.25px are fine in browsers, but you can round them in your design tool for pixel-perfect mockups.
Frequently asked questions
What is a modular type scale?
It is a set of font sizes where each size is the previous one multiplied by the same ratio. With a 16px base and a 1.25 ratio you get 16, 20, 25, 31.25, 39.06px and so on. The fixed ratio makes headings feel related to each other.
Which type scale ratio should I use?
For interfaces and dashboards with many headings, 1.125 to 1.2 keeps sizes compact. Blogs and documentation often use 1.25 or 1.333. Landing pages and editorial designs with few, large headings can use 1.5 or the golden ratio 1.618.
What is the formula for a type scale?
size(n) = base × ratio^n, where n is the step number. Positive steps give larger sizes and negative steps give smaller ones: step −1 is base ÷ ratio.
Why are the ratios named after musical intervals?
The idea comes from music, where intervals like a perfect fourth (4:3 = 1.333) or a perfect fifth (3:2 = 1.5) describe frequency ratios. Designers borrowed the names because the same proportions sound and look balanced.
Should I use rem or px for font sizes?
rem is recommended for font sizes because it scales with the text size a visitor sets in their browser. 1rem equals the root font size, 16px by default, so 20px is 1.25rem.
How do I use the scale with Tailwind CSS?
Copy the Tailwind config block into the theme.extend.fontSize section of tailwind.config.js. You can then use classes like text-lg or text-3xl, which will use your scale values and line heights.
Can a type scale be responsive?
Yes. A common approach is a smaller ratio on phones and a larger one on desktops, switched with a media query, or fluid sizes using CSS clamp(). The CSS Clamp Generator on this site can turn two scales into fluid values.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.
Related tools
CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Font Size ConverterConvert font sizes between px, pt, em, rem, % and vw, with a 6–72px chart and CSS.Hex Opacity CalculatorConvert opacity percent to a 2-digit HEX alpha code and full #RRGGBBAA color, with a 0-100% table.QR Code GeneratorMake QR codes for links, Wi-Fi, email and more.Barcode GeneratorCreate Code 128, EAN-13, UPC-A, EAN-8, Code 39 and ITF-14 barcodes as PNG or SVG.UUID GeneratorGenerate UUID v4 and v7 / GUIDs in bulk and copy or download them.Schema Markup Generator (JSON-LD)Create JSON-LD structured data for FAQ, Product, Article and more.Htaccess & Nginx Redirect GeneratorBuild 301 redirects for .htaccess, Nginx and Netlify or Cloudflare _redirects.Fake Data GeneratorGenerate mock data as JSON, CSV or SQL.Random String GeneratorGenerate secure random strings and tokens in bulk with any length and character set.API Key GeneratorCreate secure API keys and secrets with prefixes, checksums and SHA-256 hashes for storage.MIME Type LookupFind the MIME type for any file extension, or the extensions for a MIME type, in 400+ entries.Cron Expression GeneratorBuild crontab schedules visually, read them in plain English and see the next run times.URL Slug GeneratorTurn titles into clean, SEO-friendly URL slugs: accents, stop words, separators and bulk lines.JSON Schema GeneratorTurn sample JSON into a draft 2020-12 JSON Schema with types, required fields and formats.Gitignore GeneratorBuild a .gitignore from 50+ templates for languages, frameworks, IDEs and OS, merged and deduped.License GeneratorCreate a LICENSE file for MIT, Apache, GPL, BSD, ISC, MPL or Unlicense with your name and year.ULID GeneratorGenerate sortable ULIDs and UUID v7 in bulk, monotonic option, and decode their timestamps.Htpasswd GeneratorCreate .htpasswd entries with bcrypt, APR1-MD5 or SHA-1 for Apache and Nginx basic auth.Placeholder Image GeneratorCreate placeholder images in any size, color and text as PNG, JPG, WebP, SVG or data URI.Ads.txt GeneratorCreate or validate ads.txt and app-ads.txt files: seller lines, cert IDs and variables.Docker Run to Compose ConverterConvert docker run commands to docker-compose.yml, or a compose file back to docker run.Dockerfile GeneratorGenerate a production Dockerfile and .dockerignore for Node, Python, Go or a static nginx site.HTML Boilerplate GeneratorTick the options you need and get a clean HTML5 starter template with meta, OG tags and CSS reset.JSON to Zod SchemaInfer a Zod (or Yup) schema from sample JSON with optional, nullable and z.infer types.Linux Commands Cheat SheetSearchable Linux and bash command reference with flags explained, examples and copy buttons.LLMs.txt GeneratorBuild an llms.txt file for AI crawlers: summary and link sections, import from your sitemap.Nano ID GeneratorGenerate secure Nano IDs with custom alphabet, length and count, plus a collision calculator.Nginx Config GeneratorBuild an nginx server block: static site, SPA, reverse proxy or PHP, with SSL, gzip and redirects.OpenAPI / Swagger ViewerView OpenAPI 2/3 JSON or YAML as interactive API docs with validation and an endpoint list.package.json GeneratorFill a form and get a valid, npm-ready package.json with scripts, dependencies and checks.PKCE Code Challenge GeneratorGenerate an OAuth 2.0 PKCE code_verifier and S256 code_challenge, build auth URLs, verify pairs.README GeneratorFill in a form and get a polished README.md with badges, install, usage and license, live preview.Regex GeneratorBuild regular expressions visually from blocks or presets (email, date, phone) and test them live.Commit Message GeneratorBuild Conventional Commit messages with type, scope, body, breaking change and issue refs.Database Schema DesignerDesign tables and relationships visually, then export SQL for MySQL, PostgreSQL or SQLite.Docker Compose GeneratorBuild a docker-compose.yml with a form: services, ports, volumes, env, healthchecks and presets.Recipe Schema GeneratorCreate Recipe JSON-LD with ingredients, steps, prep and cook times, nutrition and ratings.Security Headers GeneratorPick HSTS, CSP, frame, referrer and permissions options and get Apache, Nginx, Netlify or Cloudflare config.SKU GeneratorBuild consistent SKUs from brand, category, size and color, then export every variant as CSV.WordPress Salt GeneratorGenerate fresh WordPress security keys and salts for wp-config.php, .env or Docker in one click.ANSI Color Code GeneratorStyle terminal text with 16, 256 or RGB colors and get escape codes for bash, Python, JS and C.Apache Virtual Host GeneratorCreate an Apache VirtualHost config with SSL, redirects, reverse proxy or PHP-FPM in seconds.Bash Prompt GeneratorDrag and drop a custom PS1 prompt for bash or zsh with colors, git branch and a live preview.Changelog GeneratorTurn Conventional Commit messages into a grouped Keep a Changelog Markdown file per version.cURL Command BuilderBuild curl commands from a form: method, headers, query, JSON or form body, auth and flags.Docker Compose to KubernetesConvert docker-compose.yml into Kubernetes Deployment, Service, ConfigMap and PVC manifests.Docker Compose ValidatorCheck a docker-compose.yml for YAML errors, schema mistakes, broken references and deprecated keys.Dockerfile LinterLint a Dockerfile for best practices: pinned tags, apt cleanup, non-root USER and layer count.Dockerignore GeneratorBuild a .dockerignore from Node, Python, Go and Java templates, plus your own entries.ESLint Config GeneratorGenerate a flat eslint.config.js for JavaScript, TypeScript, React or Node with rule presets.Git Branch Name GeneratorTurn a ticket ID and title into a clean, valid git branch name like feature/PROJ-12-add-login.GitLab CI Config GeneratorGenerate a .gitlab-ci.yml with stages, jobs, images, cache, artifacts and rules from templates.Jinja2 Template TesterRender Jinja2 templates with YAML or JSON variables using real Jinja2, with clear error lines.JSON Schema Mock Data GeneratorGenerate realistic sample JSON from a JSON Schema: formats, patterns, $ref, seeds and counts.Kubernetes Secret GeneratorCreate Kubernetes Secret YAML from key/value pairs or .env with auto base64, or decode one.Kubernetes YAML ValidatorValidate Kubernetes manifests against the API schema of a chosen version, with error paths.Prettier Config GeneratorToggle Prettier options, preview formatted code live and copy your .prettierrc file.Quartz Cron GeneratorBuild and explain Quartz and Spring cron expressions with seconds, ?, L, W and #, plus next fire times.README Badge GeneratorCreate Shields.io-style README badges for license, version, build and custom labels.Systemd Service File GeneratorCreate a systemd .service unit with ExecStart, user, restart policy, environment and hardening.tsconfig.json GeneratorBuild a tsconfig.json with target, module, strict checks and path aliases, each option explained.Access Log AnalyzerAnalyze Apache and Nginx access logs: top URLs, IPs, status codes, bots and traffic charts.Regex String GeneratorGenerate random test strings that match any regular expression, checked against the real regex.ASCII Table GeneratorTurn CSV or pasted cells into plain-text tables: MySQL, Markdown, Unicode box and reST styles.Dummy File GeneratorCreate test files of an exact size in KB, MB or GB with zeros, random bytes or text.FFmpeg Command GeneratorPick a task and options, get the exact ffmpeg command with every flag explained.