سلسله‌مراتب متن در طراحی سایت؛ از تیتر تا دکمه

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

اول نقش متن‌ها را مشخص کنید

برای یک صفحهٔ خدمات، چهار نقش کافی است: تیتر اصلی که می‌گوید خدمت چیست، زیرتیتر که نتیجه را روشن می‌کند، عنوان بخش‌ها که پرسش‌های کاربر را جدا می‌کند، و متن بدنه که جزئیات را می‌دهد. برچسب دکمه نقش پنجم است؛ باید یک فعل و نتیجهٔ قابل فهم داشته باشد، مثل «دیدن نمونه‌کارها» به‌جای «بیشتر». تا زمانی که نقش‌ها معلوم نیستند، انتخاب فونت مشکل را حل نمی‌کند.

مقیاس ساده بسازید

برای شروع، اندازهٔ بدنه را طوری انتخاب کنید که روی گوشی بدون زوم خوانده شود؛ در بسیاری از طرح‌ها حدود ۱۶ تا ۱۸ پیکسل CSS نقطهٔ شروع است، نه نسخهٔ قطعی. تیتر اصلی می‌تواند حدود دو برابر متن بدنه باشد و عنوان بخش‌ها میان این دو قرار بگیرد. تفاوت را فقط با اندازه نسازید: وزن، فاصله و رنگ هم نقش دارند. اگر پنج اندازهٔ نزدیک به هم دارید، احتمالاً می‌توانید آن‌ها را به سه سطح کاهش دهید.

طول سطر و فاصلهٔ خطوط را با متن واقعی بسنجید

متن فارسی با حروف متصل و علائم، و متن انگلیسی با واژه‌های بلند، هر دو می‌توانند چیدمان نمایشی کوتاه را به هم بزنند. یک پاراگراف واقعی را در عرض موبایل و دسکتاپ قرار دهید. اگر چشم در پایان هر سطر جای سطر بعدی را گم می‌کند، عرض ستون یا فاصلهٔ خطوط را تغییر دهید. برای بدنهٔ فارسی معمولاً فاصلهٔ خطوط سخاوتمندانه‌تر از تیتر مفید است. عرض متن را در دسکتاپ تا لبهٔ کامل صفحه باز نکنید.

نمونهٔ تصمیم برای صفحهٔ خدمات

فرض کنید تیتر «طراحی سایت شرکتی برای معرفی روشن خدمات» است. زیر آن یک جمله بگویید مخاطب چه چیزی دریافت می‌کند. سپس بخش‌هایی با عنوان‌های «چه مسئله‌ای حل می‌شود؟»، «چه تحویل می‌گیرید؟» و «چطور شروع کنیم؟» بچینید. دکمهٔ پایانی «درخواست بررسی پروژه» باشد. با این ترتیب، حتی بدون خواندن پاراگراف‌ها مسیر صفحه روشن می‌ماند.

آزمون پنج‌ثانیه‌ای

صفحه را پنج ثانیه به فردی تازه نشان دهید و بپرسید: «موضوع صفحه چیست و قدم بعدی کدام است؟» اگر پاسخ نمی‌دهد، پیش از عوض‌کردن فونت، تیتر و ترتیب بخش‌ها را اصلاح کنید. سپس نسخهٔ موبایل، کنتراست متن و حالت دکمه‌ها را بررسی کنید. به‌ویژه از قرار دادن متن مهم روی عکس شلوغ بدون زمینهٔ خوانا پرهیز کنید.

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