سلسلهمراتب تایپوگرافی: چطور سیستمی بسازیم که واقعاً خوانده شود
چطور یک سلسلهمراتب تایپوگرافی را از صفر بسازیم: نسبت‌های واقعی مقیاس، تضاد وزن، فاصله خطوط و فاصله حروف. به‌اضافه خطاهایی که بیشتر سلسله‌مراتب‌ها را پیش از انتشار از بین می‌برند.
بیشتر مقاله‌های مربوط به سلسلهمراتب تایپوگرافی آن را توصیف می‌کنند، نه اینکه بسازند. می‌گویند عنوان‌ها باید مهم به نظر برسند و متن اصلی باید آرام. وقتی کار این است که «پنج اندازه، سه وزن و فاصله خطی را انتخاب کن که در صفحه اصلی، یک مقاله و یک پنل تنظیمات دوام بیاورد»، این حرف‌ها به درد نمی‌خورد. توصیف، سیستم نیست. سیستم چیزی است که منتشر می‌شود.
این مطلب خودِ ساخت است. نسبت‌های واقعی، عددهای واقعی، ترتیب تصمیم‌ها و الگوهای شکستی که بیشتر سلسله‌مراتب‌ها را پیش از انتشار از بین می‌برند.
سلسلهمراتب تایپوگرافی واقعاً چیست
سلسلهمراتب تایپوگرافی رتبهبندی ساختاری همه عناصر متنی است تا چشم پیش از خواندن هر چیزی بداند اول چه بخواند، دوم چه و سوم چه. این همان لایه مخصوص نوشتار در سلسلهمراتب بصری و ستون فقرات هر سیستم تایپوگرافی کارآمد است.
یک سلسلهمراتب واقعی چهار سؤال را مکتوب جواب می‌دهد. چند سطح داریم. اندازه هر سطح چقدر است. وزن هر سطح چقدر است. چه فاصله‌ای بین سطح‌ها و درون هر سطح قرار دارد. اگر این جواب‌ها روی یک صفحه مستندات وجود ندارند، سیستم بداهه است، نه طراحی‌شده.
پنج سطحی که تقریباً هر سیستمی لازم دارد
بیشتر سیستم‌های کارآمد روی پنج سطح می‌نشینند: H1، H2، H3، متن اصلی و کوچک. بیشتر از این نویز میسازد. کمتر از این صفحه را تخت میکند.
دام این است که دکمه‌ها، زیرنویس‌ها و برچسب فرم‌ها را سطح جداگانه حساب کنیم. آن‌ها متن اصلی یا کوچک هستند با نقشی متفاوت. دکمه همان متن اصلی با وزن متوسط است. زیرنویس متن کوچک با وزن معمولی است. برچسب متن کوچک با وزن متوسط است. اندازه‌ها یکی، کارها متفاوت.
یک نسبت مقیاس انتخاب کنید و به آن وفادار بمانید
اندازه هر سطح از یک نسبت واحد روی یک پایه به دست می‌آید. اول نسبت را انتخاب کنید، بعد همه اندازه‌ها را از آن بگیرید. پایه تقریباً همیشه 16px است، پیشفرض مرورگر و اندازه‌ای که متن اصلی روی صفحه‌نمایش در آن بهتر از همه خوانده می‌شود. سه نسبت تقریباً همه پروژه‌ها را پوشش می‌دهند.
Major third (نسبت 1.25). فشرده و متراکم. بهترین گزینه برای رابط‌های داده‌محور و ابزارهای مدیریتی. از پایه 16px: 16، 20، 25، 31، 39، 49، 61. دیده می‌شود ولی هرگز نمایشی نیست.
Perfect fourth (نسبت 1.333). اسب بارکش. برای محتوای نشریهای قوی است و برای محصول به‌اندازه کافی مهارشده. از پایه 16px: 16، 21، 28، 37، 50، 67. پیشفرض بیشتر سایت‌های بازاریابی.
Golden ratio (نسبت 1.618). نشریهای، بیانگر و تقریباً تئاتری. بهترین گزینه برای لندینگ‌پیج‌ها و چیدمان مجله‌ای. از پایه 16px: 16، 26، 42، 68، 110. H1 بالای سر متن اصلی قد می‌کشد و دقیقاً همین هدف است.
ابزارهایی مثل type-scale.com جدول هر پایه و نسبتی را در یک ثانیه می‌سازند. یکی را انتخاب کنید، عددها را بنویسید، منتشر کنید. عوض کردن نسبت وسط پروژه یک بازنویسی است که به همه صفحه‌ها دست می‌زند.
وزن محور دوم است، نه اول
طراح‌ها فقط سراغ اندازه می‌روند و بعد تعجب می‌کنند چرا صفحه تخت به نظر می‌رسد. وزن نصف کار را به دوش می‌کشد، مخصوصاً روی موبایل که دامنه اندازه محدود است.
یک سیستم کارآمد سه وزن لازم دارد. معمولی برای متن اصلی، متوسط برای تأکید و برچسب‌ها، ضخیم یا نیمه‌ضخیم برای عنوان‌ها. وزن چهارم تصمیم برند است، نه نیاز سیستم.
قاعده‌ای که بیشتر صفحه‌های تخت را درست میکند: هرگز برای دو سطح مجاور یک وزن استفاده نکنید. اگر H2 ضخیم است، H3 باید نیمه‌ضخیم یا متوسط باشد. مجاورت هم‌وزن، سلسلهمراتب را بدون توجه به اندازه فرو می‌ریزد. دام برعکس آن «همه‌چیز ضخیم» است که وزن را کلاً از اهرم بودن می‌اندازد.
فاصله خطوط اهرم خاموش سلسلهمراتب است
Leading فاصله عمودی بین خطوط است، از خط پایه تا خط پایه. CSS اسمش را line-height گذاشته. کم‌قدرترین اهرم سلسلهمراتب تایپوگرافی.
فاصله خطی کم روی تیتر، مطمئن و متراکم خوانده می‌شود. فاصله خطی زیاد روی متن اصلی، آرام و روان. برعکسش، سلسلهمراتب را وارونه میکند. متن اصلی با 1.2 مثل دیوار خوانده می‌شود. تیتر 64px با 1.6 مثل تزئین دیده می‌شود.
پیش‌فرض‌های کارآمد. تیترها (H1 و H2): 1.1 تا 1.2. زیرعنوان‌ها (H3): 1.2 تا 1.3. متن اصلی: 1.5 تا 1.7. زیرنویس‌ها: 1.4 تا 1.5. متن بزرگ‌تر فاصله کمتر می‌خواهد، متن کوچک‌تر بیشتر. متن بلند نسبت به رابط کاربری فاصله بیشتری برای متن اصلی می‌خواهد. داشبوردی با 1.4 متراکم دیده می‌شود، که درست است.
Tracking برای متن نمایشی است، نه متن اصلی
Kerning فاصله بین جفت‌حرف‌های مشخص است که در مقیاس لوگو یا تیتر تنظیم می‌شود. Tracking فاصله بین همه حروف یک بخش است که یکنواخت تنظیم می‌شود. این دو یک اهرم نیستند.
Tracking فقط در دو سر طیف ابزار سلسلهمراتب است. Tracking فشرده روی تیتر بزرگ (از -0.02em تا -0.04em) آن را جاافتاده و قاطع نشان می‌دهد. Tracking باز روی برچسب‌های کوچک با حروف بزرگ (از +0.05em تا +0.1em) برچسب را عامدانه نشان می‌دهد. هر دو نقش متن را اعلام می‌کنند.
منطقه خطر متن اصلی است. Tracking دادن به متن اصلی به خوانایی آسیب می‌زند و هیچ سودی برای سلسلهمراتب ندارد. متن اصلی را روی صفر بگذارید. سریع‌ترین نشانه طراحی که tracking را نمی‌فهمد، تیتر هیرو با +0.1em است، چون «حس نشریهای دارد». ندارد. حس تزئین دارد.
فاصله بین سطح‌ها بخشی از سلسلهمراتب است
فضای عمودی دور هر سطح به‌اندازه اندازه و وزن آن را رتبهبندی میکند. H2 با 80px بالا و 24px پایین، شروع یک بخش جدید خوانده می‌شود. همان H2 با 24px بالا و پایین، مثل شکستن پاراگراف دیده می‌شود.
قاعده: فضای بالا باید تقریباً دو برابر فضای پایین باشد. عنصر به محتوای زیرِ خودش تعلق دارد. مشخصات شروع: بالای H2: 64 تا 96px، پایین H2: 16 تا 24px. بالای H3: 32 تا 48px، پایین H3: 8 تا 16px. انضباط فضای خالی به اندازه خود تایپ اهمیت دارد. مقیاس عالی با فاصلهگذاری شلخته، تخت خوانده می‌شود.
ترتیب تصمیم‌ها برای ساخت سلسلهمراتب از صفر
اگر مرحله‌ای را رد کنید، سلسلهمراتب در انزوا خوب به نظر می‌رسد اما داخل یک محصول واقعی از هم می‌پاشد.
- اندازه پایه را انتخاب کنید. 16px برای صفحه‌نمایش. 18px برای سایت‌های سنگین از نظر محتوا. هرگز زیر 16px برای متن اصلی.
- نسبت مقیاس را انتخاب کنید. Major third برای رابط متراکم، perfect fourth برای استفاده عمومی، golden ratio برای محتوای نشریهای.
- جدول اندازه‌ها را بسازید. هر سطح را از نسبت بگیرید. به پیکسل کامل گرد کنید. بنویسید.
- سه وزن انتخاب کنید. معمولی، متوسط، ضخیم یا نیمه‌ضخیم. نه بیشتر.
- فاصله خطی هر سطح را تعیین کنید. کم برای تیترها، زیاد برای متن اصلی.
- فاصلهگذاری هر سطح را تعیین کنید. نسبت 2 به 1 بالا به پایین برای هر عنوان.
- Tracking را فقط برای دو سر طیف تنظیم کنید. فشرده برای نمایشی، باز برای حروف بزرگ کوچک. صفر برای متن اصلی.
- روی سه صفحه واقعی اعتبارسنجی کنید. هیروی صفحه اصلی، یک مقاله بلند، یک پنل متراکم رابط. اگر در هر سه دوام آورد، منتشر کنید.
سریع‌ترین راه برای انتشار یک سلسلهمراتب خراب این است که اندازه‌ها را از شهود بگیرید، نه از نسبت، و بعد فاصله خطی و فاصلهگذاری را صفحه به صفحه وصله کنید.
سلسله‌مراتب‌ها کجا شکست می‌خورند
شش الگوی شکست بیش از هر چیز دیگری سلسله‌مراتب‌ها را از بین می‌برند.
همه‌چیز ضخیم است. وزن دیگر اهرم نیست و صفحه فقط به اندازه تکیه میکند. H3 و هر عنوان سطح سوم را به متوسط یا نیمه‌ضخیم برگردانید.
فقط دو سطح وجود دارد. H1 و متن اصلی بدون هیچ چیز میانی، مثل سندی تخت با یک عنوان بالا خوانده می‌شود. هر 150 تا 300 کلمه یک H2 اضافه کنید.
زیرعنوان شناور. فاصله برابر بالا و پایین باعث می‌شود زیرعنوان به هیچ‌کدام از دو بخش تعلق نداشته باشد. فاصله پایین را کم کنید تا به متنی که بعد می‌آید بچسبد.
H1 فراری. H1 هیروی دسکتاپ که در هر صفحه محتوایی هم به کار می‌رود ریتم را می‌شکند. یک توکن H1 دسکتاپ و یک توکن H1 صفحه محتوا تعریف کنید. یک اسم، دو مقدار.
متن اصلی با 14px. زیر 16px خوانایی می‌شکند و سطح‌های کوچک‌تر را در بازه 2px فشرده میکند. حداقل 16px. 13 تا 14px را فقط برای زیرنویس‌ها و برچسب‌ها به کار ببرید.
سلسله‌مراتبی که فقط برای دسکتاپ طراحی شده. موبایل همه سطح‌ها را فشرده میکند و سلسلهمراتب را به یک لکه تبدیل میکند. اول موبایل طراحی کنید، بعد بزرگ کنید.
سلسلهمراتب در شرایط 2026
فونت‌های متغیر حالا پیشفرض درست هستند. یک فایل 80KB وزن‌های معمولی، متوسط، نیمه‌ضخیم و ضخیم را از یک محور تحویل می‌دهد. دو فونت متغیر کل سیستم را پوشش می‌دهند. راهنمای جفت‌کردن فونت توضیح می‌دهد چطور آن‌ها را انتخاب کنید.
خلاصه‌های هوش مصنوعی نشانه‌گذاری معنایی را می‌خوانند، نه ظاهر بصری را. صفحه‌ای با یک H1، بعد یک div که شبیه H2 استایل شده، بعد یک H3، اشتباه تحلیل می‌شود. سلسلهمراتب بصری و HTML معنایی باید با هم بخوانند. یک H1 در هر صفحه، بدون پرش از سطح‌ها. بررسی اصول طراحی وب سمت معنایی را پوشش می‌دهد.
چک‌لیست ممیزی سلسلهمراتب
این را ذخیره کنید. پیش از انتشار اجرایش کنید. هر «نه» باید قبل از انتشار درست شود.
| # | بررسی | قبولی |
|---|---|---|
| 1 | اندازه پایه و نسبت مقیاس مستند شده | یک نسبت برای کل سیستم، مکتوب |
| 2 | هر سطح از نسبت به دست می‌آید | بدون اندازه دلبخواهی |
| 3 | حداقل سه سطح متنی در هر صفحه محتوایی | حداقل H1، H2 و متن اصلی |
| 4 | هیچ دو سطح مجاور وزن یکسان ندارند | تضاد وزن در هر پله |
| 5 | متن اصلی 16px یا بزرگ‌تر | کف 16px برای متن اصلی صفحه‌نمایش |
| 6 | فاصله خطی تیترها کمتر، متن اصلی بیشتر | تیترها 1.1 تا 1.2، متن اصلی 1.5 تا 1.7 |
| 7 | فضای بالای هر عنوان تقریباً 2 برابر فضای پایین | نسبت 2 به 1 برای H2 و H3 |
| 8 | Tracking صفر روی متن اصلی، فقط در دو سر طیف تنظیم شده | متن اصلی دست‌نخورده |
| 9 | سلسلهمراتب در ویوپورت 375px دوام می‌آورد | روی موبایل اعتبارسنجی شده |
| 10 | HTML معنایی با سلسلهمراتب بصری می‌خواند | یک H1، بدون پرش از سطح‌ها |
ده از ده روی هر دستگاهی خودش را می‌خواند. هفت از ده طراحی‌شده به نظر می‌رسد. زیر هفت بدون توجه به فونت، تخت خوانده می‌شود.
سوالات متداول
تفاوت سلسلهمراتب بصری و سلسلهمراتب تایپوگرافی چیست؟
سلسلهمراتب بصری سیستم گستردهتری است که هر عنصر را با اندازه، وزن، رنگ، موقعیت، فضا، تراز و تصویر رتبهبندی میکند. سلسلهمراتب تایپوگرافی لایه مخصوص نوشتار است که با اندازه، وزن، فاصله خطی، tracking و فاصلهگذاری متن را رتبهبندی میکند. سلسلهمراتب تایپوگرافی یکی از ورودیهای سلسلهمراتب بصری است.
بهترین نسبت برای مقیاس تایپ چیست؟
Perfect fourth (1.333) امنترین پیشفرض است. تضاد روشن میسازد بدون اینکه تئاتری شود. Major third (1.25) را برای رابط متراکم و ابزارهای مدیریتی به کار ببرید. Golden ratio (1.618) را برای محتوای نشریهای و لندینگپیجهایی که هیرو باید بر صفحه مسلط باشد استفاده کنید.
چطور سلسله‌مراتبی را که تخت به نظر می‌رسد درست کنم؟
سه حرکت به ترتیب. اول تضاد اندازه را زیاد کنید. H1 حداقل 2 برابر H2، H2 حداقل 1.5 برابر متن اصلی. دوم تضاد وزن اضافه کنید. هیچ دو سطح مجاوری وزن یکسان نداشته باشند. سوم ریتم فاصلهگذاری را با نسبت 2 به 1 بالا به پایین روی هر عنوان محکم کنید. اگر صفحه هنوز تخت است، چیدمان بیش از حد کار میکند و پیش از کار بیشتر روی تایپوگرافی باید دامنه‌اش کوچک شود.
سلسلهمراتب را بسازید، بعد به آن اعتماد کنید
یک سلسلهمراتب کارآمد ارزان‌ترین راه به صفحه‌ای است که خودش را می‌خواند. خواننده سطح‌ها، نسبت‌ها یا مقدارهای فاصله خطی را نمی‌بیند. او صفحه‌ای می‌بیند که معنا دارد. ریاضی در وضوح محو می‌شود.
دام این است که سلسلهمراتب را مرحله صیقل نهایی بدانیم. آن ستون فقرات است. اول بسازیدش، روی صفحه‌های واقعی اعتبارسنجی کنید، به‌شکل توکن مستند کنید و بگذارید هر تصمیم دیگری روی آن بنا شود. اگر تیمی می‌خواهید که سیستم تایپ، سلسلهمراتب و رابط محصول را یک پروژه بسازد نه سه تا، Brainy را استخدام کنید. ما نسبت را انتخاب می‌کنیم، توکن‌ها را می‌نویسیم و سیستم را روی یک محصول واقعی منتشر می‌کنیم.
Want a type system with a hierarchy that survives a real product instead of a Figma file? Brainy ships brand and product typography end to end.
Get Started
