कौन सी प्रॉपर्टीज़ टेक्स्ट और फ़ॉन्ट्स को नियंत्रित करती हैं?

Question

Accepted Answer

टाइपोग्राफी `font-*` और `text-*` प्रॉपर्टीज़ के एक परिवार द्वारा नियंत्रित की जाती है। इन्हें सही तरीके से प्राप्त करना एक पृष्ठ को पॉलिश्ड और पठनीय बनाने का अधिकांश भाग है।

```css
.text {
  font-family: "Inter", system-ui, sans-serif; /* with fallbacks */
  font-size: 1rem;       /* size (use rem for accessibility) */
  font-weight: 600;      /* 100–900; 400 normal, 700 bold */
  font-style: italic;    /* normal | italic */
  line-height: 1.5;      /* spacing between lines — unitless is best */
  letter-spacing: 0.02em;/* tracking between characters */
}
```

## font-family फॉलबैक स्टैक्स

```css
font-family: "Inter", system-ui, -apple-system, sans-serif;
```

ब्राउज़र प्रत्येक को क्रम में तब तक आजमाता है जब तक एक उपलब्ध न हो। हमेशा एक **जेनेरिक फैमिली** (`sans-serif`, `serif`, `monospace`) के साथ समाप्त करें ताकि यदि कस्टम फ़ॉन्ट्स विफल हों तब भी टेक्स्ट रेंडर हो। `system-ui` OS के नेटिव फ़ॉन्ट का उपयोग करता है (तेज़, कोई डाउनलोड नहीं)।

## टेक्स्ट लेआउट प्रॉपर्टीज़

```css
.text {
  text-align: center;        /* left | right | center | justify */
  text-decoration: underline;/* underline | line-through | none */
  text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
  white-space: nowrap;       /* prevent wrapping */
  word-break: break-word;    /* break long words/URLs */
}
```

## line-height: यूनिटलेस वैल्यूज़ का उपयोग करें

```css
line-height: 1.5;    /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px;   /* ⚠️ fixed — doesn't adapt if font-size changes */
```

एक **यूनिटलेस** `line-height` प्रत्येक एलिमेंट के अपने font-size को गुणा करता है, इसलिए जब नेस्टेड एलिमेंट्स के अलग-अलग साइज़ होते हैं तो यह आनुपातिक रहता है — अनुशंसित दृष्टिकोण।

## टेक्स्ट को छोटा करना (एक सामान्य आवश्यकता)

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* shows "..." when text is cut off */
}
```

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

टेक्स्ट प्रॉपर्टीज़ पठनीयता और विज़ुअल हायरार्की को ड्राइव करती हैं — जोर देने के लिए `font-size`/`weight`, आरामदायक पढ़ने के लिए `line-height` (~1.5), विश्वसनीयता के लिए फॉलबैक स्टैक्स, और स्वच्छ छोटे करने के लिए `text-overflow`।

अच्छी टाइपोग्राफी अच्छे दिखने वाले UI का बड़ा हिस्सा है।