ఎంటి లక్షణాలు టెక్‌స్ట్ మరియు ఫాంట్‌లను నియంత్రిస్తాయి?

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 యొక్క ఎక్కువ భాగం.