Font Size Calculator
Generate accessible, responsive CSS clamp() fluid typography equations and modular font scales. Preview live text scaling across any viewport width from mobile screens to 4K displays with 100% client-side privacy.
Viewport Width Range (px)
Font Size Bounds (px & rem)
font-size: clamp(1.0000rem, 0.8239rem + 0.7512vw, 1.5000rem);Modular Scale Typography Hierarchy Table
Scale Ratio: 1.25 (Major Third (1.250))| Element | Min (Mobile 375px) | Current (768px) | Max (Desktop 1440px) | REM Value |
|---|---|---|---|---|
| H1 (Heading 1) | 39.1px | 46.3px | 58.6px | 2.892rem |
| H2 (Heading 2) | 31.3px | 37.0px | 46.9px | 2.313rem |
| H3 (Heading 3) | 25.0px | 29.6px | 37.5px | 1.851rem |
| H4 (Heading 4) | 20.0px | 23.7px | 30.0px | 1.481rem |
| Body Base | 16.0px | 19.0px | 24.0px | 1.185rem |
| Small Text | 12.8px | 15.2px | 19.2px | 0.948rem |
| Caption / Micro | 10.2px | 12.1px | 15.4px | 0.758rem |
What is Fluid Typography & Why Use CSS clamp()?
Traditional web design relied on static CSS breakpoint media queries (e.g., @media (min-width: 768px)) to step-up font sizes between mobile and desktop screens. While functional, media queries cause text to stay rigid until an exact pixel threshold is hit, producing sudden layout jumps.
Fluid typography solves this by using CSS clamp(minimum, preferred, maximum). The font size scales smoothly along a continuous linear slope relative to the browser viewport width (vw), ensuring text looks perfectly proportioned at 414px, 810px, 1180px, or 2560px.
The Mathematics of CSS clamp()
A standard CSS clamp() rule takes three parameters:
font-size: clamp(min-size, preferred-value, max-size);To calculate the preferred value in REM and VW units:
- Slope:
(maxFontSize - minFontSize) / (maxViewport - minViewport) - Viewport Width Component (vw):
slope * 100 - Y-Axis Intercept (rem):
(-minViewport * slope + minFontSize) / rootFontSize
Modular Scale Ratios Comparison Table
A modular scale uses a fixed mathematical ratio to derive proportional heading hierarchy sizes from a single base body size:
| Scale Ratio Name | Multiplier Ratio | H1 Size (Base 16px) | Best Design Personality |
|---|---|---|---|
| Minor Third | 1.200 | 33.2px (2.07rem) | Compact mobile apps, dense web dashboards |
| Major Third | 1.250 | 39.1px (2.44rem) | Standard web applications, blogs, documentation |
| Perfect Fourth | 1.333 | 50.5px (3.16rem) | High contrast marketing sites, SaaS landing pages |
| Golden Ratio | 1.618 | 110.0px (6.87rem) | Editorial magazine displays, portfolio hero headers |
Explore Related Design Tools
- Find matching headline and body fonts with our Font Pairings Generator.
- Build harmonious color systems using the Color Palette Generator.
- Generate browser icons with the Favicon Generator.
Frequently Asked Questions
Common questions and answers about the Font Size Calculator.
What is fluid typography and how does CSS clamp() work?
Fluid typography scales font sizes smoothly between a minimum size (for mobile screens) and a maximum size (for desktop screens) based on the browser viewport width. CSS clamp(min, preferred, max) defines these boundaries without requiring multiple CSS media queries.
Why should I use REM units instead of pixels for font sizes?
REM (Root EM) units scale relative to the user's browser default root font size (typically 16px). Using REM units ensures your website respects browser accessibility settings, allowing users with visual impairments to enlarge text effortlessly.
What is a modular scale in typography?
A modular scale is a sequence of numbers created by multiplying a base font size by a consistent mathematical ratio (such as 1.25 for Major Third or 1.618 for the Golden Ratio). It creates harmonious, proportional text sizes across headlines and body copy.
What is the recommended minimum font size for mobile devices?
For mobile screens (320px - 480px), a minimum body text size of 16px (1rem) is recommended to prevent iOS Safari from automatically auto-zooming on form fields and to maintain WCAG Level AA readability.
How do I calculate the linear slope for CSS clamp()?
The slope is calculated as (maxFontSize - minFontSize) / (maxViewport - minViewport). This slope is multiplied by 100 to get the viewport width percentage (vw), combined with a calculated Y-axis intercept in REM.