ਪਾਠ ਅਤੇ ਫੋਂਟਾਂ ਨੂੰ ਕਿਹੜੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਿਯੰਤਰਿਤ ਕਰਦੀਆਂ ਹਨ?

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 fallback stacks

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

ਬ੍ਰਾਊਜ਼ਰ ਹਰੇਕ ਨੂੰ ਕ੍ਰਮ ਵਿੱਚ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇੱਕ ਉਪਲਬਧ ਨਹੀਂ ਹੁੰਦਾ। ਹਮੇਸ਼ਾ ਇੱਕ **ਜੈਨਰਿਕ ਪਰਿਵਾਰ** (`sans-serif`, `serif`, `monospace`) ਨਾਲ ਸਮਾਪਤ ਕਰੋ ਤਾਂ ਕਿ ਪਾਠ ਭਾਵੇਂ ਕਸਟਮ ਫੋਂਟ ਅਸਫਲ ਹੋਣ ਤਾਂ ਰੈਂਡਰ ਹੋ। `system-ui` OS ਦੇ ਨੇਟਿਵ ਫੋਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ (ਤੇਜ਼, ਕੋਈ ਡਾਊਨਲੋਡ ਨਹੀਂ)।

## Text layout properties

```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), ਭਰੋਸੇਯੋਗਤਾ ਲਈ fallback stacks, ਅਤੇ ਸਾਫ ਕੱਟ ਲਈ `text-overflow`।

ਚੰਗੀ ਟਾਈਪੋਗ੍ਰਾਫੀ ਚੰਗੀ ਦਿਖਣ ਵਾਲੇ UI ਦਾ ਬੁਲਕ ਹੈ।