টাইপোগ্রাফি আর ওয়েব ফন্ট — পড়তে আরামদায়ক লেখা

১ · টাইপোগ্রাফি মানে পড়ার আরাম — কেন লেখার নকশাই ওয়েবের নকশা

একটি খবরের সাইট, bKash-এর সাহায্যের পাতা, অনলাইন দোকানের পণ্যের বিবরণ, সরকারি নোটিশ — সবখানে আসল জিনিস হলো লেখা। লেখাকে কোন ফন্টে, কত বড়, কতটা ফাঁক রেখে, কত লম্বা লাইনে সাজাবেন — এই কারিগরির নাম typography (টাইপোগ্রাফি)। ২০০৬ সালে ডিজাইনার Oliver Reichenstein একটি প্রবন্ধে লিখেছিলেন, “Web design is 95% typography” — ওয়েব ডিজাইনের প্রায় পুরোটাই আসলে লেখার নকশা। সংখ্যাটা মাপা নয়, কিন্তু মূল কথাটা আজও সত্য।

ভালো টাইপোগ্রাফির তিনটি কাজ: পড়া যায় (legibility — প্রতিটি অক্ষর আলাদা করে চেনা যায়), পড়তে আরাম (readability — অনেকক্ষণ পড়লেও চোখ ক্লান্ত হয় না) আর গুরুত্ব বোঝায় (hierarchy — কোনটা শিরোনাম, কোনটা মূল কথা, কোনটা পাদটীকা, এক নজরে বোঝা যায়)। চতুর্থ একটি কাজও আছে — সবার জন্য। চোখে কম দেখেন এমন পাঠক ব্রাউজারে লেখা বড় করেন, ডিসলেক্সিয়া আছে এমন পাঠক লাইনের ফাঁক বাড়ান। আপনার CSS যেন এসব বদল সামলাতে পারে, সেটা accessibility-র অংশ, আর WCAG 2.2-এর কয়েকটি নিয়ম সরাসরি এ নিয়েই (অংশ ৫-এ দেখবেন)।

বাংলার নিজস্ব বিষয়গুলো — যুক্তাক্ষর, বাংলা ওয়েব ফন্টের তালিকা, বাংলায় কেন বেশি line-height লাগে, কেন বাংলায় italic আর letter-spacing নয় — পর্ব ১৪-এ (ওয়েবে বাংলা) বিস্তারিত আছে। এখানে আমরা সাধারণ টাইপোগ্রাফির নিয়ম দেখব, বাংলা আর ইংরেজি দুই লেখা পাশাপাশি রেখে।

২ · font-family — ফন্টের তালিকা আর পাঁচটি generic family

font-family বলে লেখা কোন ফন্টে দেখাবে। কিন্তু আপনি জানেন না পাঠকের যন্ত্রে কোন ফন্ট আছে — কারও Windows, কারও পুরোনো Android, কারও iPhone. তাই এখানে একটি নাম নয়, একটি তালিকা দেওয়া হয়, যাকে বলে font stack. ব্রাউজার বাঁ থেকে ডানে চেষ্টা করে; প্রথমটি না পেলে বা তাতে কোনো অক্ষর না থাকলে পরেরটি (পর্ব ১৪-এর font fallback).

body {
  /* নির্দিষ্ট ফন্ট আগে, generic family সবার শেষে */
  font-family: "Hind Siliguri", "Segoe UI", Roboto, sans-serif;
}
code, pre {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
}

নিয়ম দুটি: নামের মধ্যে ফাঁকা জায়গা থাকলে উদ্ধৃতিচিহ্ন দিন ("Segoe UI"); আর তালিকার শেষে সবসময় একটি generic family. generic family কোনো নির্দিষ্ট ফন্ট নয়, একটি ধরন — “যেকোনো একটি sans-serif ফন্ট দাও”। কোন আসল ফন্ট আসবে, তা ব্রাউজার আর অপারেটিং সিস্টেম ঠিক করে। প্রধানগুলো:

পুরোনো cursive আর fantasy-তে কোন ফন্ট আসবে তার ঠিক নেই, তাই প্রায় ব্যবহার হয় না। নতুন ui-monospace, ui-sans-serif, ui-serif, ui-rounded সিস্টেমের নিজস্ব ধরন চায়; এগুলো এখনো সব ব্রাউজারে কাজ করে না (মূলত Apple-এর ব্রাউজারে), তাই এরপরে সবসময় একটি সাধারণ generic রাখুন। নিচের প্রিভিউতে নিজের যন্ত্রে দেখুন:

<style>
  p { font-size: 22px; margin: 6px 0; }
  small { display: block; font: 12px monospace; color: #666; }
</style>
<p style="font-family: serif"><small>serif</small>Typography 0O1l — পড়ার আরাম</p>
<p style="font-family: sans-serif"><small>sans-serif</small>Typography 0O1l — পড়ার আরাম</p>
<p style="font-family: monospace"><small>monospace</small>Typography 0O1l — পড়ার আরাম</p>
<p style="font-family: system-ui"><small>system-ui</small>Typography 0O1l — পড়ার আরাম</p>
<p style="font-family: cursive"><small>cursive</small>Typography 0O1l — পড়ার আরাম</p>
<p style="font-family: 'No Such Font'"><small>'No Such Font' (generic নেই)</small>Typography 0O1l — পড়ার আরাম</p>

ব্রাউজার আসলে কীভাবে ফন্ট বাছে — প্রতিটি অক্ষরের জন্য আলাদা

একটি লাইনে ইংরেজি, বাংলা, টাকার চিহ্ন আর একটি emoji থাকলে কী হয়? ব্রাউজার পুরো লাইনের জন্য একটি ফন্ট বাছে না — প্রতিটি অক্ষরের জন্য তালিকা ধরে খোঁজে। ধাপে ধাপে দেখুন:

System font stack — ডাউনলোড ছাড়া পরিষ্কার লেখা

GitHub-এর মতো অনেক বড় সাইট আর অ্যাপ মূল লেখার জন্য কোনো ওয়েব ফন্ট নামায় না; তারা পাঠকের নিজের সিস্টেম ফন্ট ব্যবহার করে। এতে পাতা দ্রুত খোলে, লেখা কখনো ফন্টের অপেক্ষায় আটকায় না, আর সিস্টেম ফন্টগুলো পর্দার জন্য যত্ন করে বানানো। আজকের সহজ রূপ: font-family: system-ui, sans-serif; — বাংলা লেখার জন্য সিস্টেম নিজেই নিজের বাংলা ফন্ট এনে দেয়। সীমাবদ্ধতা একটাই: চেহারা যন্ত্রভেদে আলাদা, ব্র্যান্ডের নির্দিষ্ট চেহারা পাবেন না।

৩ · আকার আর ওজন — font-size, rem, type scale, font-weight, font-style

font-size লেখার আকার। পর্ব ২০-এ একক দেখেছেন; লেখার জন্য সারকথা এই: ব্রাউজারের ডিফল্ট সাধারণত 16px, আর পাঠক চাইলে ব্রাউজারের সেটিংসে সেটি বড় করতে পারেন (চোখে কম দেখেন এমন অনেকেই করেন)। rem (root em) মানে মূল html element-এর font-size-এর গুণিতক — 1rem = সাধারণত 16px, কিন্তু পাঠক ডিফল্ট 20px করলে 1rem = 20px. তাই লেখার আকার rem-এ দিন, স্থির px-এ নয় — তাহলে পাঠকের পছন্দ মানা হয়। em হলো মা-element-এর font-size-এর গুণিতক; ভেতরে ভেতরে বসালে গুণ জমতে থাকে (0.8em-এর ভেতরে 0.8em = মূল আকারের 0.64 গুণ), তাই em কাজে লাগে মূলত padding বা আইকনের মতো “এই লেখার সাথে মিলিয়ে” মাপে।

Type scale — আকারগুলোর মধ্যে একটি ছন্দ

শিরোনাম কত বড় হবে, ইচ্ছেমতো 23px, 31px, 17px বসালে পাতা অগোছালো লাগে। ডিজাইনাররা তাই একটি type scale (বা modular scale) ব্যবহার করেন: মূল আকার থেকে প্রতিটি ধাপে একই অনুপাতে গুণ। অনুপাত 1.25 হলে: 1rem → 1.25rem → 1.563rem → 1.953rem → 2.441rem (16 → 20 → 25 → 31.25 → 39px). গানের সুরের মতো — স্বরগুলোর মধ্যে নির্দিষ্ট অনুপাত থাকলে কানে মিষ্টি লাগে। নিচে অনুপাতটি একটি CSS variable-এ রাখা আছে (CSS variable বিস্তারিত পর্ব ৩৩-এ), তাই একটি সংখ্যা বদলালেই পুরো স্কেল বদলায়:

:root { --ratio: 1.25; }

body { font: 1rem/1.6 system-ui, sans-serif; margin: 8px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0.4em 0 0.2em; }

h4 { font-size: calc(1rem * var(--ratio)); }
h3 { font-size: calc(1rem * var(--ratio) * var(--ratio)); }
h2 { font-size: calc(1rem * var(--ratio) * var(--ratio) * var(--ratio)); }
h1 { font-size: calc(1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); }
small { font-size: calc(1rem / var(--ratio)); }

font-weight — 100 থেকে 900

font-weight লেখার মোটা-চিকন ভাব। মান 100 (Thin) থেকে 900 (Black), ১০০-র ধাপে; normal = 400, bold = 700. bolder আর lighter মা-element-এর ওজনের তুলনায় লেখাকে একটু মোটা বা চিকন করে (স্পেসিফিকেশনের একটি নির্দিষ্ট সারণি ধরে)। কিন্তু একটি জিনিস মনে রাখুন: ফন্টে যে ওজনগুলো আছে, ব্রাউজার শুধু সেগুলোই দেখাতে পারে। কোনো ফন্টে শুধু 400 আর 700 থাকলে 300 চাইলে আসবে 400, 600 চাইলে 700 — CSS স্পেসিফিকেশনে কাছের ওজন বাছার নির্দিষ্ট নিয়ম আছে। আর ফন্টে কোনো bold-ই না থাকলে ব্রাউজার অক্ষর কৃত্রিমভাবে মোটা করে (একে বলে faux bold; font-synthesis property দিয়ে বন্ধ করা যায়) — দেখতে কিছুটা থ্যাবড়া।

<style>
  p { font-family: system-ui, sans-serif; font-size: 22px; margin: 2px 0; }
</style>
<p style="font-weight: 100">100 Thin — রিকশা</p>
<p style="font-weight: 300">300 Light — রিকশা</p>
<p style="font-weight: 400">400 Regular — রিকশা</p>
<p style="font-weight: 600">600 Semibold — রিকশা</p>
<p style="font-weight: 700">700 Bold — রিকশা</p>
<p style="font-weight: 900">900 Black — রিকশা</p>
<p style="font-style: italic">italic — Dhaka ঢাকা</p>

font-style-এর মান তিনটি: normal, italic (ফন্টের আলাদা করে আঁকা বাঁকা রূপ — ইংরেজিতে a, f-এর আকারই বদলে যায়) আর oblique (একই অক্ষর শুধু হেলানো)। মনে রাখুন, <em> বা <i> HTML-এ অর্থ দেয় (পর্ব ০৪), আর font-style শুধু চেহারা — বাংলা পাতায় em { font-style: normal; font-weight: 600; } লিখে অর্থ রেখে চেহারা বদলানো যায়।

৪ · font shorthand — এক লাইনে সব, কিন্তু ফাঁদসহ

ফন্টের কয়েকটি property একটি লাইনে লেখা যায় font shorthand দিয়ে। এর নিজস্ব কঠোর ক্রম আছে। নিচের লাইনটির প্রতিটি অংশ ধাপে ধাপে দেখুন:

কয়েকটি ভুল উদাহরণ চিনে রাখুন: font: bold 16px; (family নেই — অবৈধ), font: sans-serif 16px; (ক্রম উল্টো — অবৈধ), font: 16px/24px Arial; (বৈধ, কিন্তু line-height স্থির px — ভালো অভ্যাস নয়)।

৫ · line-height আর লাইনের দৈর্ঘ্য — চোখের যাত্রাপথ

line-height এক লাইন থেকে পরের লাইনের দূরত্ব ঠিক করে। পর্ব ১৪-এ দেখেছেন বাংলায় 1.6–1.8 আরামদায়ক, ইংরেজিতে প্রায়ই 1.4–1.6. কিন্তু কোন রূপে লিখবেন — 1.5, 1.5em, 150% নাকি 24px? চোখে একই দেখালেও উত্তরাধিকারে এদের আচরণ আলাদা। এককহীন সংখ্যা সন্তানের কাছে যায় গুণক হিসেবে — প্রতিটি সন্তান নিজের font-size দিয়ে গুণ করে। কিন্তু em, % বা px দিলে মা-element-এ হিসাব হয়ে যাওয়া সংখ্যাটি (যেমন 21px) সন্তানে যায় — সন্তানের লেখা যত বড়ই হোক:

div {
  width: 250px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  border: 1px dashed #999;
  padding: 4px 8px;
  margin-bottom: 10px;
}
.a { line-height: 1.5em; }  /* সন্তান পায় 21px */
.b { line-height: 1.5; }    /* সন্তান পায় "1.5 গুণ" */
.big { font-size: 28px; margin: 4px 0; }

লাইনের দৈর্ঘ্য — measure

লাইন খুব লম্বা হলে চোখ এক লাইনের শেষ থেকে পরের লাইনের শুরু খুঁজে পেতে হিমশিম খায়, ভুল করে একই লাইন আবার পড়ে। খুব ছোট হলে চোখকে বারবার লাফাতে হয়, শব্দ ভেঙে ভেঙে যায়। এক লাইনে কতটি অক্ষর, তাকে ছাপাখানার ভাষায় বলে measure. Robert Bringhurst-এর বিখ্যাত বই The Elements of Typographic Style বলে, ইংরেজির মতো লেখায় ৪৫–৭৫টি অক্ষর সন্তোষজনক, আর প্রায় ৬৬টি আদর্শ। WCAG-এর ১.৪.৮ (AAA স্তর) বলে ৮০টির বেশি নয়।

CSS-এ এর জন্য চমৎকার একক আছে — ch: বর্তমান ফন্টের “0” অঙ্কটির প্রস্থ। max-width: 65ch মানে মোটামুটি ৬৫টি অক্ষরের জায়গা (আসল অক্ষর আকারে আলাদা, তাই হিসাবটা আনুমানিক)। বাংলায় যুক্তাক্ষর আর কার মিলে অক্ষর গোনা ইংরেজির মতো সরল নয়, তাই বাংলা লেখায় সংখ্যাটা চোখে দেখে ঠিক করুন — প্রিভিউতে কয়েকটি মান (ch বা em-এ) চেষ্টা করে যেটিতে পড়তে আরাম, সেটি নিন।

p {
  font: 1rem/1.6 Georgia, serif;
  border-left: 3px solid #93c5fd;
  padding-left: 8px;
}
.narrow { max-width: 20ch; }
.ok     { max-width: 65ch; }
p:not([lang]) { line-height: 1.75; }  /* বাংলায় একটু বেশি */

৬ · লেখা সাজানো — align, spacing, transform, decoration আর shadow

text-align লাইনগুলোকে বাঁয়ে, ডানে, মাঝে বা দুই দিকে সমান (justify) করে। আধুনিক রূপ start আর end — লেখার দিক অনুযায়ী “শুরু” আর “শেষ”, তাই আরবি-উর্দুর মতো ডান থেকে বাঁয়ের পাতায় নিজে উল্টে যায়। লম্বা লেখায় বাঁয়ে সাজানো (start) সবচেয়ে নিরাপদ; মাঝে সাজানো শুধু ছোট শিরোনাম বা দুই-তিন লাইনে।

justify-এর ঝুঁকি: দুই দিক সমান রাখতে ব্রাউজার শব্দের মাঝের ফাঁক টেনে বড় করে। ছাপা বইয়ে কম্পোজিটর শব্দ ভেঙে হাইফেন দিয়ে আর অক্ষরের ফাঁক সূক্ষ্মভাবে বদলে এটা সামলান। ব্রাউজার সাধারণত শুধু শব্দের ফাঁক টানে, এক লাইন এক লাইন করে। ফলে সরু কলামে বিশাল ফাঁক তৈরি হয়, আর কয়েক লাইনের ফাঁক ওপর-নিচে মিলে লেখার ভেতর দিয়ে সাদা নদীর মতো রেখা দেখা দেয় — যাকে বলে river. ডিসলেক্সিয়া আছে এমন পাঠকদের জন্য এটি বিশেষ কষ্টের, তাই WCAG ১.৪.৮ (AAA) justify এড়াতে বলে। বাংলাদেশের ছাপা পত্রিকায় বাংলা justify খুব প্রচলিত, কিন্তু সেখানে দক্ষ হাতে সাজানো হয়; ওয়েবে বাংলায় ব্রাউজারের স্বয়ংক্রিয় হাইফেনও সাধারণত কাজ করে না, তাই ফোনের সরু পর্দায় বাংলা justify প্রায়ই ফাঁকে ভরা দেখায়। ওয়েবে বাঁয়ে সাজানোই ভালো।

লিংকের underline নিয়ে একটি কথা আলাদা করে বলা দরকার। অনেক ডিজাইনে a { text-decoration: none; } লিখে শুধু রং দিয়ে লিংক চেনানো হয়। কিন্তু রং-অন্ধ পাঠক বা রোদের নিচে ফোনে পড়া কেউ লিংকটি আলাদা করতে পারেন না। WCAG ১.৪.১ (Use of Color) বলে, শুধু রং দিয়ে তথ্য দেওয়া চলবে না। লেখার ভেতরের লিংকে underline রাখাই সবচেয়ে সহজ সমাধান — আর আধুনিক CSS দিয়ে underline-কেও সুন্দর করা যায়:

body { font: 1.125rem/1.7 system-ui, sans-serif; }

a {
  color: #1d4ed8;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: #93c5fd;
}
a:hover { text-decoration-color: currentColor; }

.label { text-transform: uppercase; letter-spacing: 0.08em;
         font-size: 0.8rem; font-weight: 600; color: #555; margin: 0; }

.hero { background: linear-gradient(135deg, #0ea5e9, #f59e0b); padding: 16px; }
.shadow { color: #fff; font-size: 1.6rem; margin: 0;
          text-shadow: 0 1px 3px rgb(0 0 0 / 0.5); }

৭ · লাইন কোথায় ভাঙবে — white-space, text-wrap, hyphens আর লম্বা URL

ব্রাউজার নিজে ঠিক করে কোথায় লাইন ভাঙবে — সাধারণত শব্দের মাঝের ফাঁকে। কিছু জায়গায় আপনি এই সিদ্ধান্তে হাত দিতে চাইবেন।

• white-space — HTML-এ একাধিক space আর নতুন লাইন এক হয়ে যায় (পর্ব ০৩-এর whitespace collapsing). nowrap লাইন ভাঙতে দেয় না (যেমন “৳ ১,২৫০” বা একটি ফোন নম্বর যেন দুই লাইনে না ভাঙে); pre লেখা যেমন আছে তেমন রাখে; pre-wrap space রাখে কিন্তু দরকারে লাইন ভাঙে (কবিতা, চ্যাটের বার্তা); pre-line শুধু নতুন লাইন রাখে।
• text-wrap: balance — শিরোনামের লাইনগুলো সমান দৈর্ঘ্যের করে, যাতে শেষ লাইনে একটি শব্দ একা ঝুলে না থাকে। খরচ বাঁচাতে ব্রাউজার কয়েক লাইনের বেশি লেখায় এটি করে না, তাই শুধু শিরোনাম আর ছোট লেখায় দিন। এটি Baseline Newly available (২০২৪ থেকে সব প্রধান ব্রাউজারে)।
• text-wrap: pretty — অনুচ্ছেদের শেষ লাইনে একা একটি শব্দ (orphan) এড়ায়, লাইন ভাঙার সময় পুরো অনুচ্ছেদের কিছুটা বিবেচনা করে। এটি সাম্প্রতিক ফিচার, এখনো Baseline নয় — কয়েকটি ব্রাউজারে আছে, বাকিগুলোতে আসছে; Can I use দেখে নিন। না চললে ক্ষতি নেই, সাধারণ ভাঙা হয় — তাই নির্ভয়ে লেখা যায় (progressive enhancement).
• hyphens: auto — দরকারে শব্দ ভেঙে হাইফেন দেয় (inter-national). কিন্তু ব্রাউজারকে ভাষা জানতে হবে — lang attribute ছাড়া কাজই করে না, আর সেই ভাষার হাইফেন-অভিধান ব্রাউজারে থাকতে হবে। ইংরেজিতে বেশিরভাগ ব্রাউজার পারে, তবে যন্ত্র আর ব্রাউজারভেদে পার্থক্য আছে; বাংলায় সাধারণত পারে না।
• overflow-wrap: anywhere — এমন লম্বা “শব্দ”, যার মাঝে কোনো ফাঁক নেই (URL, ইমেইল, লম্বা হ্যাশট্যাগ, লেনদেনের TrxID), সেটি বাক্স ছাপিয়ে বেরিয়ে যায় আর ফোনে পুরো পাতা পাশে সরে (horizontal scroll). এই property বলে, “দরকার হলে শব্দের মাঝেও ভাঙো”। পুরোনো break-word মানও আছে; পার্থক্য সূক্ষ্ম — anywhere flex বা grid-এ বাক্সের ন্যূনতম প্রস্থের হিসাবেও ভাঙার সুযোগ ধরে। word-break: break-all সব শব্দকেই যেকোনো অক্ষরে ভাঙে — সাধারণ লেখায় অসুন্দর; আর word-break: break-word পুরোনো, বাতিলের পথে।

.card {
  width: 220px;
  border: 1px solid #ccc;
  padding: 8px 10px;
  font: 1rem/1.6 system-ui, sans-serif;
}
.bal { text-wrap: balance; font-size: 1.2rem; line-height: 1.35; margin: 0 0 8px; }
.url { overflow-wrap: anywhere; color: #1d4ed8; font-size: 0.85rem; }
.nw  { white-space: nowrap; }
.hy  { hyphens: auto; max-width: 8em; }

৮ · ওয়েব ফন্ট — @font-face, woff2 আর font-display

পাঠকের যন্ত্রে নেই এমন ফন্ট দেখাতে চাইলে ফন্টের ফাইলটি পাতার সাথে নামাতে হয় — একে বলে web font. CSS-এ এর ঘোষণা @font-face: আপনি একটি নাম দেন, আর বলে দেন ফাইল কোথায়। নিজের সার্ভারে রাখা ফন্ট এভাবে ঘোষণা করা হয়:

/* নিজের সার্ভারে রাখা ফন্ট (self-hosting) */
@font-face {
  font-family: "Hind Siliguri";          /* CSS-এ এই নামে ডাকবেন */
  src: url("/fonts/hind-siliguri-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;                    /* লেখা কখনো অদৃশ্য নয় */
}
@font-face {
  font-family: "Hind Siliguri";          /* একই নাম, ভিন্ন ওজন */
  src: url("/fonts/hind-siliguri-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
body { font-family: "Hind Siliguri", system-ui, sans-serif; }

কয়েকটি বিষয় খেয়াল করুন। এক, একই font-family নামে কয়েকটি @font-face — প্রতিটি একটি ওজন বা style; ব্রাউজার font-weight: 600 দেখে ঠিক ফাইলটি বাছে। দুই, শুধু WOFF2 — এটি ওয়েবের জন্য বানানো সংকুচিত ফরম্যাট (ভেতরে Brotli সংকোচন), সব আধুনিক ব্রাউজারে চলে। পুরোনো টিউটোরিয়াল আর AI প্রায়ই .eot, .svg, .ttf, .woff মিলিয়ে লম্বা “bulletproof” তালিকা দেয় — সেটা Internet Explorer আর পুরোনো iPhone-এর যুগের অভ্যাস, আজ দরকার নেই। তিন, ব্রাউজার ফন্ট ফাইল নামায় অলসভাবে — শুধু ঘোষণা দেখে নয়, পাতায় সত্যিই সেই ফন্টে লেখা কোনো অক্ষর থাকলে তবেই।

ফন্ট আসার আগে কী দেখাবে — FOIT, FOUT আর font-display

ফন্ট নামতে সময় লাগে — ধীর মোবাইল ডেটায় কয়েক সেকেন্ডও। এই সময় লেখার কী হবে? দুই রকম অভিজ্ঞতা আছে: লেখা লুকিয়ে রাখা, যাকে বলে FOIT (Flash of Invisible Text), আর আগে বিকল্প ফন্টে দেখিয়ে পরে বদলানো, যাকে বলে FOUT (Flash of Unstyled Text). কোনটা হবে, ঠিক করে font-display. সময়রেখা ধরে দেখুন:

লাফ কমানোর আরেকটি উপায়: fallback ফন্টকে আসল ফন্টের মাপের কাছাকাছি আনা। @font-face-এ size-adjust, ascent-override, descent-override নামের descriptor দিয়ে একটি স্থানীয় ফন্ট (যেমন src: local("Arial")) একটু বড়-ছোট করে নেওয়া যায়, যাতে বদলের সময় লাইনগুলো প্রায় একই জায়গায় থাকে। সব descriptor সব ব্রাউজারে সমানভাবে কাজ করে না, তবে না চললে ক্ষতি নেই।

Google Fonts নাকি নিজের সার্ভার?

Google Fonts (২০১০ সালে শুরু) সবচেয়ে সহজ পথ: সাইট থেকে ফন্ট বেছে একটি <link> কপি করে head-এ বসান, সাথে preconnect. লিংকের URL-এ display=swap রাখুন আর শুধু যে ওজনগুলো লাগবে সেগুলো নিন (wght@400;600) — প্রতিটি ওজন আলাদা ফাইল। পর্ব ১৪-এ দেখেছেন, Google ফাইলগুলো ভাগ করে আর unicode-range দিয়ে শুধু দরকারি অংশ নামায়।

নিজের সার্ভারে রাখার আগে দুটি কাজ: ফন্টের লাইসেন্স দেখুন (Google Fonts-এর ফন্টগুলো সাধারণত SIL Open Font License-এ, নিজের সার্ভারে রাখা যায়), আর বাংলা ফন্ট হলে বাংলা ও ইংরেজি অক্ষর দুটোই আছে এমন woff2 নিন।

৯ · Variable font আর font-size-adjust — এক ফাইলে অনেক ফন্ট

সাধারণ ফন্টে প্রতিটি ওজন আর style আলাদা ফাইল: Regular, Bold, Light, Italic… চারটি ওজন মানে চারটি ডাউনলোড। ২০১৬ সালে OpenType 1.8 স্পেসিফিকেশনে Apple, Google, Microsoft আর Adobe একসাথে variable font আনে: একটি ফাইলের ভেতরে নকশার কয়েকটি “অক্ষ” (axis), আর অক্ষ ধরে যেকোনো মাঝামাঝি মান। নিবন্ধিত পাঁচটি অক্ষ — wght (ওজন), wdth (প্রস্থ), ital (italic), slnt (হেলানো), opsz (optical size — ছোট লেখায় একটু মোটা ও খোলা, বড় শিরোনামে সূক্ষ্ম)। ফন্ট-নির্মাতা নিজের অক্ষও বানাতে পারেন, যার নাম বড় হাতের অক্ষরে (যেমন GRAD).

@font-face {
  font-family: "Anek Bangla";
  src: url("/fonts/anek-bangla-variable.woff2") format("woff2");
  font-weight: 100 800;        /* একটি ফাইল, পুরো পরিসর */
  font-display: swap;
}
h1   { font-weight: 750; }     /* মাঝের যেকোনো মান */
p    { font-weight: 430; }
.ad  { font-variation-settings: "wdth" 80; }   /* নিচু স্তরের উপায় */

অক্ষ বদলানোর দুটি উপায়। ভালো উপায় — পরিচিত property: font-weight (wght), font-stretch (wdth), font-style (ital/slnt), font-optical-sizing: auto (opsz, ডিফল্টেই চালু)। নিচু স্তরের উপায় — font-variation-settings, যেখানে চার অক্ষরের ট্যাগ আর সংখ্যা সরাসরি লেখেন। এটি শুধু তখন লিখুন যখন কোনো সাধারণ property নেই (নিজস্ব অক্ষ)। কারণ এর একটি ফাঁদ আছে: এটি সব অক্ষ একসাথে একটি মান হিসেবে ধরে, তাই কোনো সন্তান element-এ শুধু একটি অক্ষ বদলাতে লিখলে মা-element-এর অন্য অক্ষগুলো হারিয়ে যায়। variable font-এর মূল সুবিধাগুলো (@font-face-এ ওজনের পরিসর, font-variation-settings) Baseline Widely available.

হিসাবটা মাথায় রাখুন: একটি variable font ফাইল একটি সাধারণ ফাইলের চেয়ে বড়, কিন্তু তিন-চারটি ওজনের মোট ফাইলের চেয়ে প্রায়ই ছোট — আর অনুরোধ একটি। শুধু একটি ওজন লাগলে সাধারণ ফাইলই হালকা।

font-size-adjust — দুই ফন্টের চোখে-দেখা আকার মেলানো

একই font-size-এ সব ফন্ট সমান বড় দেখায় না। কারণ font-size মাপে অক্ষরের পুরো “বাক্স”, আর চোখে আকার বোঝায় মূলত ছোট হাতের অক্ষরের উচ্চতা — x অক্ষরটির উচ্চতা, যাকে বলে x-height. Verdana-র x-height বড়, Times New Roman-এর ছোট। ফলে ওয়েব ফন্ট না আসা পর্যন্ত fallback ফন্টে লেখা হঠাৎ ছোট বা বড় দেখায়, বা এক বাক্যে দুই ফন্ট মেলালে অমিল চোখে পড়ে। font-size-adjust বলে, “x-height হবে font-size-এর এত ভাগ” — ব্রাউজার প্রতিটি ফন্টের আকার সেই অনুযায়ী বদলে নেয়। এটি Baseline Newly available (সব প্রধান ব্রাউজারে সম্প্রতি এসেছে); না চললে শুধু আকার একটু অমিল থাকে।

<style>
  p { font-size: 30px; margin: 4px 0; }
  .t { font-family: "Times New Roman", serif; }
  .v { font-family: Verdana, sans-serif; }
  .adj { font-size-adjust: 0.5; }
  small { font: 12px monospace; color: #666; }
</style>
<p><span class="t">xhgy Times</span> <span class="v">xhgy Verdana</span>
  <small>দুটিই 30px</small></p>
<p class="adj"><span class="t">xhgy Times</span> <span class="v">xhgy Verdana</span>
  <small>font-size-adjust: 0.5</small></p>

১০ · AI-এর যুগে — টাইপোগ্রাফির CSS AI-কে দিয়ে লেখালে কী দেখবেন

AI টুল চোখের পলকে সুন্দর দেখতে CSS দেয়। কিন্তু তাদের শেখার উপাদানে বহু বছরের পুরোনো ব্লগ আর টেমপ্লেট, তাই পুরোনো অভ্যাস প্রায়ই ফিরে আসে — আর টাইপোগ্রাফির ভুল সাধারণত চোখে পড়ে না, কারণ আপনার কম্পিউটারে, আপনার দ্রুত ইন্টারনেটে, আপনার ডিফল্ট লেখার আকারে সব ঠিক দেখায়:

AI-এর দেওয়া টাইপোগ্রাফি হাতে পেলে — যাচাইয়ের চেকলিস্ট

• ব্রাউজারের সেটিংসে ডিফল্ট লেখার আকার “খুব বড়” করে পাতা খুলেছি — লেখা বড় হয়েছে, কিছু কাটা বা একে অপরের ওপর ওঠেনি
• DevTools-এর Elements → Computed-এ “Rendered Fonts” দেখে নিশ্চিত হয়েছি বাংলা আর ইংরেজি আসলে কোন ফন্টে আঁকা হচ্ছে
• DevTools-এর Network প্যানেলে “Font” ফিল্টার দিয়ে গুনেছি কয়টি ফন্ট ফাইল নামছে, কত KB; throttling (Slow 4G) দিয়ে লোডের সময় লেখা অদৃশ্য থাকে কি না দেখেছি
• Lighthouse-এ ওয়েব ফন্ট লোডের সময় লেখা দেখা যায় কি না (font-display) আর contrast-এর পরীক্ষায় সমস্যা নেই
• CSS-টি W3C CSS Validator-এ দিয়েছি; HTML validator.w3.org-এ
• text-wrap, font-size-adjust-এর মতো নতুন ফিচার MDN আর Can I use-এ মিলিয়ে দেখেছি, না চললে পাতা ভাঙে না তা নিশ্চিত করেছি