[UI/UX] The Golden Ratio for SaaS Typography & Readability

[JackaL]

[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.

• 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.

: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));
}