तरल typography

Fluid typography महत्वपूर्ण क्यों है

Fixed breakpoints (mobile पर 14px, desktop पर 18px) abrupt text jumps cause करते हैं। Fluid typography सभी widths पर smoothly scale होता है, better user experience provide करता है।

Fluid sizing के लिए CSS clamp()

clamp(min, preferred, max) function font size को bounds के बीच रखता है जबकि viewport width के साथ smoothly scale होता है।

/* 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;
}

calc() के साथ fluid scale

बेहतर control के लिए, viewport width के आधार पर sizing derive करने के लिए calc() का उपयोग करें।

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

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