मजकूर आणि फॉन्ट्स कोणत्या गुणधर्मांद्वारे नियंत्रित केले जातात?

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` प्रत्येक घटकाच्या स्वतःच्या फॉन्ट-साईजला गुणाकार करते, म्हणून जेव्हा नेस्टेड घटकांचे आकार भिन्न असतात तेव्हा ते प्रमाणसर राहते — शिफारस केलेला दृष्टिकोन.

## मजकूर कापणे (एक सामान्य आवश्यकता)

```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 चा बहुतेक आहे.