JackaL
友一人
- Joined
- Sep 3, 2026
- Messages
- 341
- Reaction score
- 61
[UI/UX] The Golden Ratio for SaaS Typography & Readability
Amateur designers guess their font sizes. Professional UI/UX developers use mathematical scales to ensure perfect visual hierarchy across desktop and mobile screens. Here is how to set up your typography system in Figma or CSS.
The 1.250 (Major Third) Type Scale
Instead of picking random sizes like 16px, 20px, and 24px, multiply your base font size by 1.250 to get the next perfect heading size.
Implementation in CSS:
Set this at the root level of your web application to ensure scalable and accessible text components.
Amateur designers guess their font sizes. Professional UI/UX developers use mathematical scales to ensure perfect visual hierarchy across desktop and mobile screens. Here is how to set up your typography system in Figma or CSS.
The 1.250 (Major Third) Type Scale
Instead of picking random sizes like 16px, 20px, and 24px, multiply your base font size by 1.250 to get the next perfect heading size.
- Base (Paragraph): 16px (1rem)
- H6 (Sub-labels): 20px (1.25rem)
- H3 (Section Headers): 31px (1.95rem)
- H1 (Hero Titles): 48px (3.05rem)
Implementation in CSS:
Set this at the root level of your web application to ensure scalable and accessible text components.
CSS:
:root {
--text-base-size: 1rem;
--text-scale-ratio: 1.250;
--text-sm: calc(var(--text-base-size) / var(--text-scale-ratio));
--text-md: var(--text-base-size);
--text-lg: calc(var(--text-base-size) * var(--text-scale-ratio));
--text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
}