What is a fonts scale?
A fonts scale is a structured sequence of font sizes, weights, and line heights calculated using mathematical ratios. It ensures all headings and paragraph layers adhere to W3C vertical rhythm guidelines and layout grids.
Free • No signup required • No design skills needed
Free fonts Scale Generator
Create a clear type scale for landing pages, dashboards, and brand systems.
Example output
Startup type scale
H1: 56-72px / 1.0 line height / 750-850 weight for landing page hero headlines.
H2: 32-40px / 1.1 line height / 700 weight for section titles and product storytelling.
Body: 16-18px / 1.55 line height / 400-500 weight for readable startup copy.
Caption and buttons: 12-14px with stronger weight and clear spacing.
Why SaaS landing pages need type hierarchy
SaaS layouts must convey value propositions instantly. Correctly scaled heading structures prevent readability fatigue, maintain visual hierarchy, and align with WCAG AA accessibility reading guidelines.
- Readable hero copy
- Clear section rhythm
- Consistent cards and buttons
- Better mobile hierarchy
Suggested scale for startup websites
Start with a base body size of 16px or 18px, then scale headers upward using a standard 1.25x (Major Third) or 1.333x (Perfect Fourth) multiplier for balanced contrast.
Font pairing tips
Combine a bold geometric header font with a highly legible sans or serif body font. Ensure the selected font styles are compatible with the Google Fonts API libraries.
Common fonts mistakes
Avoid layout issues like insufficient text-to-background contrast, missing line-height overrides, and responsive scaling that collapses on mobile viewports.
Example fonts scale
H1 60px/1.1 (Hero), H2 36px/1.2 (Sections), H3 24px/1.25 (Subheadings), Body 16px/1.55 (Reading copy), Small 14px/1.4 (Labels), Caption 12px/1.35.
How it works
- 1Enter your brand details
- 2Generate instantly with AI
- 3Use in your project or upgrade for full brand system
Why it matters
- Keeps your launch visuals consistent
- Helps founders make design decisions faster
- Creates a better starting point for product and landing pages
You might also like:
Check out these other free design resources and tools built to scale your startup style.
Frequently Asked Questions
What is a fonts scale?
A fonts scale defines a mathematical progression of font sizes and line heights (e.g. Major Third ratio). It ensures consistent spacing and fonts hierarchy that complies with W3C web accessibility guidelines.
Why does fonts matter for SaaS websites?
fonts controls reading speed and user comprehension. Proper scale contrast ensures readers digest copy comfortably and reduces user bounce rates.
What is a good type scale for a landing page?
A common standard uses a 1.25x progression: 16px (Body), 20px (H4), 25px (H3), 31px (H2), and 39px (H1). This offers solid visual contrast on small and large viewports.
Can I use this with Tailwind CSS?
Yes. The type scale values map directly to Tailwind configuration files or CSS variables, enabling clean token integration in your builder projects.
Can Glyph generate colors and logo direction too?
Yes. Glyph generates the complete visual style system: logo direction, brand colors, fonts, app icon direction, brand board, and direct styling prompts.
Ready to build the full brand system?
Generate logo ideas, brand colors, fonts, brand board, and a clean prompt to rebuild your layout.