What is a typography scale?
A typography scale is a set of reusable text sizes, weights, and line heights. It gives your landing page, dashboard, and brand system a clear hierarchy.
Free branding tool
Free Typography 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 pages need to explain value fast. A clean type scale makes headlines, feature cards, CTAs, and proof sections easier to scan.
- Readable hero copy
- Clear section rhythm
- Consistent cards and buttons
- Better mobile hierarchy
Suggested scale for startup websites
Start with large, confident H1 type, compact H2 sections, readable body text, and small captions for labels and metadata.
Font pairing tips
Pair a strong heading font with a highly readable body font. Avoid pairing two decorative fonts or two fonts that feel almost the same.
Common typography mistakes
Weak startup pages often use too many sizes, cramped line heights, low contrast, or hero text that is too small on desktop and too large on mobile.
Example typography scale
H1 64/1.0, H2 36/1.1, H3 24/1.2, Body 17/1.55, Small 14/1.45, Caption 12/1.35, Button 14/1.0 with 700 weight.
How it works
- 1Describe the idea
- 2Review the generated direction
- 3Turn it into a complete 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
Related tools
Use these free Glyph tools to shape the rest of your startup brand system.
FAQ
What is a typography scale?
A typography scale defines reusable sizes and line heights for H1, H2, H3, body, small text, captions, and buttons.
Why does typography matter for SaaS websites?
Typography controls clarity. Better hierarchy helps visitors understand your product faster and makes your site feel more credible.
What is a good type scale for a landing page?
A practical startup scale uses a large H1, clear H2 sections, readable 16-18px body text, and compact labels for UI metadata.
Can I use this with Tailwind CSS?
Yes. Glyph Pro exports Tailwind and CSS token guidance, and the free tool can help you plan the scale before implementation.
Can Glyph generate colors and logo direction too?
Yes. Glyph can generate the complete brand system: logo direction, colors, typography, app icon direction, brand board, and AI Builder Prompt.
Ready to build the full brand system?
Generate logo direction, colors, typography, brand board, and AI Builder Prompt from one idea.
Start creating free