કયા ગુણધર્મો ટેક્સ્ટ અને ફોન્ટ્સને નિયંત્રિત કરે છે?

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`.

katherોટો ટાઇપોગ્રાફી સારી દેખાતી UI નો મોટો ભાગ છે.