কোন বৈশিষ্ট্যগুলি পাঠ্য এবং ফন্ট নিয়ন্ত্রণ করে?

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-এর বেশিরভাগ অংশ।