# Fluid typography — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/fluid-typography

> Scale text smoothly from mobile to desktop using clamp() or calc(), avoiding jarring size jumps at breakpoints.

## Why fluid typography matters

Fixed breakpoints (14px on mobile, 18px on desktop) cause abrupt text jumps. Fluid typography scales smoothly across all widths, providing a better user experience.

## CSS clamp() for fluid sizing

The clamp(min, preferred, max) function ensures font size stays between bounds while scaling smoothly with viewport width.

```css
/* Font scales from 16px to 32px as viewport grows from 320px to 1200px */
h1 { font-size: clamp(1rem, 4vw, 2rem); }

/* Container width smoothly scales */
.container {
  width: clamp(320px, 100%, 1200px);
  margin: 0 auto;
}
```

## Fluid scale with calc()

For finer control, use calc() to derive sizing based on viewport width.

```css
/* Font grows 1px per 10px of viewport width */
body { font-size: calc(0.875rem + 1vw); }

/* Padding grows proportionally */
.section { padding: calc(1rem + 3vw); }
```