وقتی همه متن‌ها اندازه و وزن یکسان دارند، خواننده باید خودش رابطه میان عنوان، توضیح و جزئیات را کشف کند. Typography Hierarchy این رابطه را قابل مشاهده می‌کند. اندازه تنها ابزار نیست؛ وزن، فاصله، جایگاه، طول خط و رنگ هم نقش دارند. هدف این است که مخاطب بداند از کجا شروع کند، چه چیزهایی به هم مربوط‌اند و برای ادامه چه چیزی را بخواند. بلندترین یا تیره‌ترین متن الزاماً مهم‌ترین متن درست نیست.
پیش از انتخاب عددها، ساختار محتوا را بنویسید. عنوان صفحه، عنوان بخش، متن بدنه، توضیح کمکی و برچسب کنترل نقش متفاوت دارند. اگر نقش روشن نیست، بزرگ‌کردن فونت مشکل را کامل حل نمی‌کند. این مقاله درباره تصمیم و رابطه بصری است، نه یک مقیاس عددی اجباری برای همه پروژه‌ها. فارسی، نوع قلم، مقصد چاپ یا وب و شرایط مخاطب باید در انتخاب حضور داشته باشند.
از نقش محتوا به سبک برسید
یک صفحه واقعی را بدون تزئین بخوانید و نقش هر قطعه را مشخص کنید. چه چیزی موضوع کل صفحه است؟ کدام عنوان چند پاراگراف را پوشش می‌دهد؟ چه چیزی توضیح یک ورودی است و چه چیزی پیام نتیجه؟ اگر همه را «متن کوچک» و «متن بزرگ» بنامید، قرارداد محصول مبهم می‌شود. نام نقش باید در طراحی و پیاده‌سازی قابل استفاده باشد، حتی اگر چند نقش ظاهر نزدیک داشته باشند.
برای شروع، تعداد کمی نقش تعریف کنید و با محتوای واقعی بسنجید. یک خانواده قلم با وزن‌های مناسب ممکن است برای همه آن‌ها کافی باشد. افزودن فونت‌های متعدد فقط برای ایجاد تفاوت، انسجام را کم می‌کند. راهنمای انتخاب قلم فارسی به پوشش، خوانایی و کاربرد کمک می‌کند. کیفیت Hierarchy از رابطه نقش‌ها می‌آید، نه از تعداد سبک‌هایی که در فایل ساخته‌اید.
یک نمونه مفهومی از نقش‌ها
جدول زیر یک قرارداد پیشنهادی برای مقاله آموزشی است، نه اندازه نهایی فونت. متن‌ها ساختگی‌اند و برای نشان‌دادن تفاوت مسئولیت آمده‌اند. عنوان اصلی موضوع را معرفی می‌کند؛ عنوان بخش مسیر خواندن را می‌سازد؛ بدنه توضیح می‌دهد و یادداشت محدودیت را نگه می‌دارد. اگر یادداشت برای تصمیم ضروری است، نباید آن را آن‌قدر کم‌رنگ کنید که دیده نشود. اهمیت معنایی باید در ظاهر هم منعکس باشد.
| نقش | نمونه متن | کارکرد |
|---|---|---|
| عنوان اصلی | راهنمای انتخاب قلم | معرفی موضوع صفحه |
| عنوان بخش | پوشش زبان و ارقام | گروه‌بندی توضیح‌ها |
| بدنه | پیش از انتخاب، متن واقعی را بخوانید. | انتقال توضیح اصلی |
| یادداشت | مجوز همان نسخه را بررسی کنید. | بیان قید مرتبط |
بعد از تعیین نقش، اندازه و وزن و فاصله را برای قلم و مقصد انتخاب کنید. عدد یکسان در دو قلم ممکن است ارتفاع و تراکم بصری متفاوت داشته باشد. برای همین کپی مقیاس از یک نمونه لاتین به فارسی همیشه نتیجه برابر نمی‌دهد. جدول نقش‌ها کمک می‌کند حتی اگر عددها تغییر کنند، منطق صفحه حفظ شود. این قرارداد می‌تواند پایه Style یا Token مشترک تیم باشد.
اندازه و وزن را با هم بخوانید
عنوان بزرگ‌تر می‌تواند نقطه شروع بسازد، اما فاصله آن با بدنه باید متناسب باشد. اگر تفاوت خیلی کم است، نقش‌ها مبهم می‌شوند؛ اگر بیش از حد است، عنوان ممکن است فضای زیادی بگیرد و مسیر خواندن را قطع کند. وزن نیز به خانواده قلم وابسته است. Bold یک قلم ممکن است بسیار تیره‌تر از قلم دیگر باشد. انتخاب را با نمونه واقعی و اندازه مصرف انجام دهید.
همه تأکیدها را هم‌زمان زیاد نکنید. بزرگ، ضخیم، رنگی و زیرخط‌دارکردن یک جمله ممکن است از نیازش بیشتر باشد. اگر چند سطح همگی پرقدرت‌اند، دوباره رقابت ایجاد می‌شود. برای هر نقش یک یا دو تفاوت روشن کافی می‌تواند باشد. راهنمای Typography در Material Design نمونه‌ای از سیستم نقش‌محور است؛ مقیاس آن را بدون توجه به زبان و محصول خود اجباری ندانید.
فاصله رابطه را نشان می‌دهد
فاصله عنوان با متن بعدی باید وابستگی آن‌ها را روشن کند. اگر عنوان به پاراگراف قبلی نزدیک‌تر از توضیح خودش باشد، گروه‌بندی مبهم می‌شود. فاصله میان بخش‌ها با فاصله سطرهای یک پاراگراف یکسان نیست. ریتم کلی باید امکان اسکن و ادامه خواندن بدهد. عدد ثابت برای همه قلم‌ها و اندازه‌ها مناسب نیست؛ شکل حروف و تراکم متن اثر دارند.
در فارسی، نقطه‌ها، اعراب و کشیدگی‌های عمودی می‌توانند فاصله سطر بیشتری بخواهند. فاصله بسیار کم برخورد بصری ایجاد می‌کند و فاصله بیش از حد پیوند سطرها را ضعیف می‌کند. از متن واقعی با واژه‌ها و نشانه‌های متنوع استفاده کنید. راهنمای فضای خالی رابطه فاصله و گروه‌بندی را توضیح می‌دهد. فضای سفید فقط باقیمانده صفحه نیست؛ بخشی از ساختار خواندن است.
طول خط و تراکم
خط بسیار بلند می‌تواند دنبال‌کردن سطر بعد را دشوار کند و خط بسیار کوتاه متن را با شکست‌های مکرر قطع کند. مقدار مناسب به اندازه قلم، زبان، محتوا و صفحه وابسته است. برای مقاله، توضیح کارت و جدول نیاز یکسانی ندارید. عرض را با متن واقعی و شرایط صفحه تنظیم کنید. یک قانون تعداد کاراکتر بدون دیدن قلم و مقصد، پاسخ کامل نیست.
اگر متن را برای جاگرفتن بیش از حد کوچک می‌کنید، شاید ساختار یا دامنه محتوا نیاز به اصلاح دارد. همه اطلاعات را نمی‌توان با همان اولویت در یک کارت نگه داشت. خلاصه، توضیح تکمیلی و مسیر دسترسی می‌توانند نقش‌های متفاوت داشته باشند. حذف قید ضروری برای کم‌شدن ارتفاع کارت مناسب نیست. طراحی باید تصمیم درباره اولویت را روشن کند، نه اینکه صرفاً همه متن را در قاب موجود فشار دهد.
رنگ و کنتراست
رنگ خنثی می‌تواند نقش ثانویه بسازد، اما متن کم‌اهمیت هم باید خوانده شود. خاکستری خیلی روشن روی زمینه روشن ممکن است اطلاعات را عملاً حذف کند. لینک باید قابل تشخیص باشد و فقط به رنگی نزدیک به بدنه تکیه نکند. راهنمای کنتراست معیارهای مرتبط را توضیح می‌دهد. Hierarchy نباید با کم‌کردن خوانایی ساخته شود؛ تفاوت نقش و قابل استفاده بودن باید هم‌زمان حفظ شوند.
برای پیام خطا یا موفقیت، متن و ساختار هم لازم‌اند. قرمزکردن یک جمله بدون توضیح محل و راه اصلاح کافی نیست. در نسخه چاپی تک‌رنگ نیز نقش‌ها باید تا حد ممکن قابل تشخیص بمانند. اگر همه رابطه‌ها به رنگ وابسته‌اند، وزن و فاصله را دوباره بررسی کنید. صفحه باید بدون تزئین اضافی هم منطق قابل فهمی داشته باشد و به شرایط نمایش خاص وابسته نماند.
ساختار معنایی و ظاهر
در وب، Headingها برای ساختار هستند و CSS برای ظاهر. انتخاب h3 فقط چون اندازه مناسبی دارد، ترتیب محتوایی را مخدوش می‌کند. عنوان‌های بخش باید رابطه منطقی داشته باشند و خواننده فناوری کمکی بتواند از آن‌ها برای حرکت استفاده کند. راهنمای WAI درباره Heading این نقش را توضیح می‌دهد. بزرگ‌بودن یک span آن را خودکار عنوان معنایی نمی‌کند.
در مقابل، هر متن Bold هم عنوان نیست. برچسب فرم، نام قیمت و پیام نتیجه می‌توانند ظاهر برجسته داشته باشند ولی نقش دیگری دارند. راهنمای دسترس‌پذیری React برای رابطه نام و کنترل مفید است. قرارداد طراحی باید نقش معنایی را به تیم توسعه منتقل کند، نه فقط عدد فونت را. ظاهر مشابه با مسئولیت متفاوت باید در مستندات قابل تشخیص باشد.
صفحه کوچک و بزرگ‌نمایی
در موبایل، عنوان بلند ممکن است چند سطر شود و فاصله‌ها نسبت دیگری پیدا کنند. فقط کوچک‌کردن همه اندازه‌ها کافی نیست. حد خوانایی، ترتیب و محل اقدام را حفظ کنید. اگر متن با بزرگ‌نمایی بریده می‌شود، ارتفاع ثابت یا محدودیت قاب ممکن است مشکل باشد. راهنمای Mobile First برای تصمیم محتوا و چیدمان کمک می‌کند. نسخه کوچک باید همان رابطه معنایی را حفظ کند، حتی اگر عددها متفاوت شوند.
Typography سیال می‌تواند تغییر تدریجی اندازه را ممکن کند، اما حداقل و حداکثر و رفتار Zoom باید دیده شوند. راهنمای CSS clamp موضوع فنی را توضیح می‌دهد. انتخاب تابع به تنهایی سیستم خوانا نمی‌سازد. برای عنوان، بدنه و کنترل‌ها نیاز متفاوت است. حرکت عدد در عرض صفحه نباید باعث شود متن در بعضی شرایط بیش از حد کوچک یا بزرگ شود.
ثبت و نگهداری سیستم
نقش، خانواده، وزن، اندازه، فاصله سطر و کاربرد را در Style یا Token ثبت کنید. اگر هر صفحه مقدار خودش را دارد، نگهداری دشوار می‌شود. راهنمای Design Token به اشتراک قرارداد کمک می‌کند. استثنا باید دلیل روشن داشته باشد، نه صرفاً نتیجه کپی یک طرح دیگر. در پایان، صفحه را با محتوای واقعی بخوانید: شروع، گروه‌بندی و مسیر ادامه باید بدون توضیح شفاهی طراح قابل فهم باشند.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!