A predefined set of font sizes ensures consistency and clear hierarchy across the application.
A type scale prevents "magic numbers" and arbitrary font sizes. By using a mathematical ratio to define your font sizes, you create a harmonious rhythm that feels natural to the reader. It simplifies decision-making for developers and designers alike.
Experiment with different modular scales to find the right hierarchy for your project.
Large, impactful headings for landing pages and key sections. Use sparingly.
Structural hierarchy for content. H1 for page titles, H2 for sections, etc.
The workhorse of your UI. Usually 16px (1rem) for optimal readability.
Smaller text (12-14px) for metadata, hints, and secondary information.
Start with a comfortable reading size, typically 16px, as your base (1rem).
Select a scale ratio (e.g., Major Third 1.250) to generate your sizes mathematically.
Consider using a tighter scale on mobile devices to preserve screen real estate.