تایپوگرافی وب: راهنمای کامل برای طراحان

در صفحه معرفی یک خدمت، کاربر باید عنوان را پیدا کند، توضیح را بخواند و شرط‌های اصلی را بفهمد. اگر متن ریز، سطرها طولانی یا تفاوت عنوان و بدنه نامشخص باشد، انتخاب فونت زیبا این مشکل را حل نمی‌کند. Typography وب مجموعه‌ای از تصمیم‌ها درباره شکل حروف، اندازه، وزن، طول سطر، فاصله و رفتار متن در شرایط مختلف است. این تصمیم‌ها باید با محتوا و وظیفه کاربر هماهنگ باشند.

عبارت‌هایی مانند «تایپوگرافی ۹۵ درصد طراحی وب است» یا معرفی یک فونت به‌عنوان بهترین گزینه همه سایت‌ها، معیار عملی نمی‌دهند. یک صفحه مقاله با داشبورد مالی نیاز یکسانی ندارد. حتی یک فونت در عنوان کوتاه و متن طولانی رفتار متفاوتی نشان می‌دهد. برای انتخاب، نمونه واقعی پروژه را کنار تنظیمات قرار دهید و توضیح دهید چرا این ترکیب برای همین محتوا مناسب است؛ نام فونت به‌تنهایی دلیل نیست.

از نقش متن و سلسله‌مراتب شروع کنید

ابتدا انواع متن را مشخص کنید: عنوان صفحه، عنوان بخش، بدنه، توضیح کمکی، Label، عدد و پیام خطا. سپس برای هر نقش یک تنظیم پایه در نظر بگیرید. اگر برای هر کارت اندازه و وزن تازه‌ای بسازید، تفاوت‌ها دیگر معنای روشنی ندارند. برعکس، اگر همه متن‌ها یکسان باشند، مرور سریع صفحه دشوار می‌شود. هدف این است که تفاوت بصری با اهمیت و نقش محتوا ارتباط داشته باشد.

ترتیب Headingهای HTML را هم حفظ کنید. یک جمله فقط برای بزرگ‌شدن نباید h2 شود و یک عنوان بخش نباید صرفاً با Bold داخل پاراگراف نمایش داده شود. ساختار معنایی برای پیمایش ابزار کمکی و نگهداری محتوا مفید است. طراح می‌تواند اندازه بصری را مستقل از نام Tag تنظیم کند؛ استفاده از h1 الزاماً به معنی بزرگ‌ترین متن ممکن نیست. هر دو لایه، ساختار و ظاهر، باید آگاهانه طراحی شوند.

اندازه پایه قانون ثابت برای همه فونت‌ها ندارد

عدد 16px نقطه شروع رایجی است، اما تضمین خوانایی یا یک الزام عمومی همه متن‌های وب نیست. شکل حروف و فضای داخلی فونت، وزن، تراکم محتوا و شرایط نمایش نتیجه را تغییر می‌دهند. دو فونت با اندازه اسمی یکسان ممکن است از نظر بصری متفاوت دیده شوند. اندازه را روی پاراگراف واقعی انتخاب کنید، نه فقط یک عنوان نمونه. Labelهای کوتاه را نیز در کنار Input واقعی ببینید.

راهنمای Typography در web.dev رابطه اندازه، طول سطر و طراحی Responsive را توضیح می‌دهد. برای پروژه خود، با یک اندازه پایه قابل استفاده شروع کنید و چند نقش محدود بسازید. اگر هر بار مسئله را با افزودن یک اندازه تازه حل کنید، سیستم متن به‌سرعت پراکنده می‌شود. قواعد را در Design Tokens مشترک طراحی و توسعه ثبت کنید تا تغییرهای بعدی قابل پیگیری باشند.

طول سطر با زبان و محتوا ارتباط دارد

سطر بسیار بلند دنبال‌کردن متن و برگشت به ابتدای سطر بعدی را دشوار می‌کند. سطر بسیار کوتاه هم متن را تکه‌تکه می‌کند و تعداد شکست‌ها را بالا می‌برد. یک عدد واحد برای همه پاراگراف‌های فارسی و انگلیسی کافی نیست. واحد ch برای کنترل تقریبی عرض مفید است، اما به عرض کاراکتر صفر در فونت مربوط وابسته است و تعداد دقیق حروف فارسی در یک خط را تضمین نمی‌کند.

برای مقاله، Container متن را محدود کنید و فضای بزرگ نمایشگر را لزوماً به کشیدن پاراگراف اختصاص ندهید. جدول، کد و تصویر ممکن است عرض دیگری لازم داشته باشند؛ این تفاوت را در Layout تعریف کنید. در کارت کوچک، عنوان بلند و چند کلمه لاتین را هم در نظر بگیرید. شکستن متن در هر نقطه برای URL طولانی با شکستن جمله معمولی فارسی یک نیاز یکسان نیست؛ رفتار Wrap را بر اساس نوع محتوا انتخاب کنید.

Line-height و فاصله پاراگراف را جدا تنظیم کنید

Line-height فاصله خطوط داخل یک بلوک را کنترل می‌کند و Margin فاصله میان بلوک‌ها را. اگر هر دو را بدون رابطه افزایش دهید، صفحه ممکن است گسسته دیده شود. برای فارسی، حروف دارای نقاط و اتصال‌ها باید فضای کافی داشته باشند، ولی بازه ثابت 1.8 تا 2 برای همه فونت‌ها قانون نیست. نمونه خود را با چند پاراگراف، فهرست و عنوان بررسی کنید و اختلاف نقش‌ها را در نظر بگیرید.

مستند line-height در MDN تفاوت مقدار بدون واحد و مقدار طول را توضیح می‌دهد. مقدار بدون واحد اغلب برای ارث‌بری میان اندازه‌های مختلف مناسب‌تر است. ارتفاع ثابت برای کارت یا دکمه‌ای که متن آن می‌تواند بزرگ شود، احتمال بریدن محتوا را بالا می‌برد. ارتفاع حداقل و فضای داخلی معمولاً انعطاف بیشتری می‌دهند. این تصمیم برای ترجمه و تنظیمات بزرگ‌نمایی هم مفید است.

رنگ و وزن، جای اندازه مناسب را نمی‌گیرند

متن کمکی می‌تواند از نظر بصری آرام‌تر باشد، اما نباید آن‌قدر کم‌رنگ شود که اطلاعات لازم خوانده نشود. در معیار Contrast حداقل، نسبت 4.5:1 برای متن معمولی و 3:1 برای متن بزرگ با تعریف مشخص مطرح است. صرف اینکه متن کمی بزرگ‌تر است، آن را وارد استثنای متن بزرگ نمی‌کند. وزن و اندازه دقیق را همراه با تعریف معیار بررسی کنید.

رنگ تنها نشانه خطا یا انتخاب نباشد. پیام خطا را با متن روشن و ارتباط با فیلد نشان دهید؛ لینک را نیز از متن اطراف قابل تشخیص کنید. اگر یک لینک فقط کمی آبی‌تر است، ممکن است در شرایط مختلف شناخته نشود. Bold کردن همه عبارت‌های مهم هم سلسله‌مراتب را از بین می‌برد. ابتدا متن را دقیق‌تر و ساختار را روشن‌تر کنید، سپس میزان تأکید بصری را انتخاب کنید.

نمونه کامل: آزمایش اندازه و فاصله متن

فایل زیر را با نام index.html ذخیره کنید و در مرورگر باز کنید. هیچ Build، فونت دانلودی، تصویر یا کتابخانه‌ای لازم ندارد. دو کنترل، اندازه بدنه و Line-height را تغییر می‌دهند تا رابطه آن‌ها را روی متن واقعی ببینید. خروجی کنترل‌ها با Label مشخص است و مقدارها به CSS Custom Properties منتقل می‌شوند. این نمونه ابزار انتخاب یک ترکیب اولیه است، نه بررسی کامل دسترس‌پذیری یا تعیین بهترین فونت.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>آزمایش تایپوگرافی متن</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; padding: 1.5rem; color: #172536; background: #f7f9fc; font-family: sans-serif; }
    main { max-inline-size: 48rem; margin-inline: auto; }
    h1 { font-size: 1.8rem; line-height: 1.4; }
    h2 { font-size: 1.3rem; line-height: 1.5; }
    .controls { display: grid; gap: 1rem; padding: 1rem; border: 1px solid #66788a; }
    label { display: block; }
    input { max-inline-size: 100%; }
    input:focus-visible { outline: 3px solid #154d88; outline-offset: 3px; }
    article { --body-size: 1.0625rem; --body-leading: 1.8; margin-block-start: 2rem;
      font-size: var(--body-size); line-height: var(--body-leading); overflow-wrap: anywhere; }
    article p { margin-block: 0 1.2em; }
    a { color: #164d89; text-decoration: underline; }
    code { font-family: monospace; }
  </style>
</head>
<body>
  <main>
    <h1>اندازه و فاصله متن را مقایسه کنید</h1>
    <div class="controls">
      <div><label for="size">اندازه بدنه، بر حسب rem</label>
        <input id="size" type="range" min="1" max="1.5" step="0.0625" value="1.0625">
        <output id="sizeValue" for="size">1.0625 rem</output></div>
      <div><label for="leading">ضریب فاصله خطوط</label>
        <input id="leading" type="range" min="1.4" max="2.2" step="0.1" value="1.8">
        <output id="leadingValue" for="leading">1.8</output></div>
    </div>
    <article id="sample">
      <h2>متن واقعی برای انتخاب Typography</h2>
      <p>کاربر در این صفحه توضیح یک خدمت را می‌خواند. جمله‌ها باید با اندازه مناسب و فاصله روشن نمایش داده شوند، حتی وقتی عرض صفحه کم است یا تنظیمات متن تغییر می‌کند.</p>
      <p>نام فنی <span lang="en" dir="ltr">font-display: swap</span> به شکل اصلی حفظ می‌شود. مقدار مبلغ نمونه <bdi>۱۲۳٬۴۵۰ تومان</bdi> است و نباید ترتیب داده برای اصلاح ظاهر دستکاری شود.</p>
      <p>برای مطالعه بیشتر، <a href="https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html">راهنمای افزایش اندازه متن</a> را بخوانید. این لینک منبع آموزشی است و اجرای فایل به بازکردن آن وابسته نیست.</p>
    </article>
  </main>
  <script>
    const sample = document.getElementById('sample');
    const size = document.getElementById('size');
    const leading = document.getElementById('leading');
    const sizeValue = document.getElementById('sizeValue');
    const leadingValue = document.getElementById('leadingValue');
    function updateTypography() {
      const sizeNumber = Number(size.value);
      const leadingNumber = Number(leading.value);
      sample.style.setProperty('--body-size', `${sizeNumber}rem`);
      sample.style.setProperty('--body-leading', String(leadingNumber));
      sizeValue.textContent = `${sizeNumber} rem`;
      leadingValue.textContent = String(leadingNumber);
    }
    size.addEventListener('input', updateTypography);
    leading.addEventListener('input', updateTypography);
    updateTypography();
  </script>
</body>
</html>

در این نمونه، متن بدنه از متغیر اندازه استفاده می‌کند، ولی عنوان‌ها نقش مستقل دارند. کنترل Line-height فقط فاصله خطوط را تغییر می‌دهد و فاصله پاراگراف جدا باقی می‌ماند. یک نشانی و عبارت لاتین داخل متن فارسی هم وجود دارد تا مسئله جهت را ببینید. نتیجه را با فونت و محتوای واقعی محصول جایگزین کنید؛ فونت پیش‌فرض سیستم ممکن است بین دو دستگاه متفاوت باشد و این تفاوت بخشی از شرایط نمایش است.

فارسی و لاتین را با Markup درست ترکیب کنید

dir و lang دو کار متفاوت دارند: جهت پایه متن و زبان محتوا. برای صفحه فارسی، lang="fa" و dir="rtl" نقطه شروع مناسبی‌اند. عبارت لاتین، URL، شماره نسخه و نشانه‌های خنثی مانند پرانتز ممکن است نیاز به محدوده جهت مستقل داشته باشند. راهنمای W3C درباره متن دوجهته استفاده از Markup برای این محدوده‌ها و bdi یا dir="auto" برای داده با جهت نامعلوم را توضیح می‌دهد.

ترتیب حروف و عدد را با دست تغییر ندهید تا ظاهر یک نمونه درست شود؛ داده بعدی ممکن است متفاوت باشد. فاصله‌گذاری میان حروف فارسی نیز نباید اتصال حروف و خوانایی را قربانی ظاهر کند. نام API و اصطلاح فنی را همان‌طور که در مستندات به کار می‌رود نگه دارید. برای انتخاب ویژگی‌های فونت، راهنمای تایپوگرافی و فونت فارسی مکمل این بحث است.

فونت دانلودی یک وابستگی واقعی است

وقتی فونت اختصاصی دارید، فایل، وزن‌ها، مجوز و Fallback را روشن کنید. @font-face قرارداد معرفی فونت را فراهم می‌کند، ولی یک URL فرضی فایل فونت ایجاد نمی‌کند. اگر نمونه آموزشی به فونت محلی نیاز دارد، نام فایل و مسیر تهیه باید مشخص باشد. برای نمونه مستقل بالا عمداً از فونت سیستم استفاده شده تا فایل ضروری جاافتاده‌ای وجود نداشته باشد.

font-display رفتار نمایش در زمان آماده‌نبودن فونت را تنظیم می‌کند. انتخاب swap می‌تواند نمایش متن با Fallback را ممکن کند، اما تغییر ابعاد پس از بارگذاری همچنان باید مدیریت شود. راهنمای بارگذاری WebFont برای بررسی این مسیر مفید است. تعداد وزن‌های دانلودی و حجم فایل‌ها را با مصرف واقعی مقایسه کنید؛ داشتن همه وزن‌ها الزام طراحی نیست.

تنظیمات کاربر را بخشی از طراحی بدانید

معیار Resize Text و معیار Text Spacing درباره حفظ محتوا و قابلیت استفاده در تغییر اندازه و فاصله‌ها هستند. مقادیر این معیارها را با دستور انتخاب فاصله پیش‌فرض همه سایت‌ها اشتباه نگیرید. کاربر باید بتواند تنظیمات لازم خود را اعمال کند بدون اینکه متن بریده یا کنترل مهم پنهان شود. این نیاز روی ارتفاع ثابت و Overflow اثر دارد.

برای تحویل، نقش‌ها، اندازه‌ها، وزن‌ها، Line-height، عرض بدنه، رفتار لینک و Fallback را در یک راهنمای کوتاه ثبت کنید. چند محتوای واقعی شامل پیام خطا، عدد، عنوان بلند و متن ترکیبی را کنار آن بگذارید. اگر یک تصمیم فقط روی جمله نمونه جواب می‌دهد، هنوز قاعده قابل استفاده‌ای نیست. آخرین معیار، خواندن و انجام کار کاربر است؛ یک صفحه منظم از نظر بصری باید در شرایط واقعی هم قابل استفاده بماند.