سلسله مراتب تایپوگرافی (Typographic Hierarchy) چیست؟

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

تایپوگرافی خوب، یک سلسله مراتب بصری قوی می‌سازد، اعتماد کاربران شما را شکل می‌دهد و به تقویت برند شما کمک می‌کند. به همین دلیل است که فورا فونت‌های مثال زدنی‌ای مانند Myriad Bold را به LinkedIn یا Didot را با Vogue ربط می‌دهیم. داشتن فونت‌های خوب و قوی که شخصیت برند شما را به صورت بصری تحریک کرده و منعکس می‌کنند، می‌تواند تفاوت بین افرادی باشد که برای دو دقیقه یا دو ساعت در وبسایت شما می‌مانند.

در ادامه این مقاله از تدریس24 همراه ما باشید.

بیایید به برخی از عناصر کلیدی تایپوگرافی نگاه کنیم:

فونت‌ها و تایپ فیس‌ها (Fonts and Typefaces)

اصطلاح‌های “فونت” و “تایپ فیس” اغلب به‌جای هم استفاده می‌شوند، اما در واقع به چیزهای مختلفی اشاره دارند. تایپ فیس، خانواده‌ای از فونت‌های مرتبط است، در حالی که فونت‌ها به وزن‌ها، ضخامت، و استایل‌هایی مربوط می‌شوند که در کنار یکدیگر یک فونت را تشکیل می‌دهند. به عنوان مثال، Ariel یک تایپ‌فیس است و Ariel Bold یک فونت است.

سلسله مراتب (Hierarchy)

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

کنتراست (Contrast)

همانند سلسله مراتب، کنتراست به انتقال ایده‌ها یا پیام‌هایی که می‌خواهید بر آن تاکید کنید، به خوانندگان کمک می‌کند. می‌توانید با حروف، رنگ‌ها، استایل‌ها و اندازه‌های مختلف بازی کنید و کنتراست تولید کنید تا تأثیر بصری ایجاد کنید و متن صفحه را تجزیه کنید.

هماهنگی (Consistency)

اگرچه ممکن است با نکاتی که بالا ذکر شد، مغایرت داشته باشد، اما اگر می‌خواهید از یک رابط کاربری گیج‌کننده و نامرتب جلوگیری کنید، “هماهنگی” کلید شماست. ایجاد یک سلسله مراتب باثبات از تایپ فیس‌ها (یک فونت هماهنگ برای headerها، دیگری برای زیرعنوان‌ها) و رعایت آن، عمل صحیحی است.

فضای سفید (White Space)

فضای سفید که به عنوان “فضای منفی(Negative Space)” نیز شناخته می‌شود، ناحیه‌ی خالی اطراف متن یا گرافیک است. اغلب مورد توجه کاربر قرار نمی‌گیرد، اما فضای سفید برای ایجاد سلسله مراتب و منظم نگه داشتن رابط ضروری است.

تراز (Alignment)

تراز کردن، فرایند یکسان‌سازی و ترکیب متن، گرافیک و تصاویر برای اطمینان از فضای برابر، اندازه و فاصله بین هر عنصر است. برای مثال، تراز کردن متن به سمت راست برای خوانندگانی که از چپ به راست می‌خوانند، غیرمعمول به نظر می‌رسد.

اهمیت هایرآرکی در تایپوگرافی و دیزاین چیه؟

این یک قانونه که وقتی همه چیز را مهم کنیم در واقع هیچ چیز مهم نیست. وقتی به همه دانشجویان کلاس نمره ۲۰ بدیم یعنی هیچکدوم بهترین نیستن.در دیزاین اگر چند آیتم روی صفحه دارید لازمه جذاب‌ترین قسمت را برجسته‌تر از بقیه نشون بدید. که در تایپوگرافی میشه جالب‌ترین جمله. با این کار ما یک دروازه زیبا برای ورود ساختیم. (شاید هم یک دام زیبا)

کاربر با دیدن این جملهٔ جذاب که شما طوری اون رو دیزاین کردید که زودتv از بقیه دیده بشه وارد ماجرا میشه. اما اگر فکر کردید کار تمومه اشتباه کردید. باز هم به همین ترتیب باید ادامه بدید. یعنی با ترفند‌های تایپوگرافیک کاری کنید که دومین جمله مورد نظرتون واقعاً دوم دیده بشه.

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

این مثال تصویری به خوبی موضوع سلسه مراتب در تایپوگرافی را نشون می‌ده.

در تایپوگرافی چندتا سلسله مرتبه داشته باشیم؟

در اغلب طراحی‌ها ۳ یا ۴ مرتبه وجود داره.

۱-عنوان اصلی (تیتر)

۲- عنوان فرعی (زیر تیتر)

۳- متن (بدنه مطلب)

۴- اطلاعات جزئی (توضیح عکس، ارجاع به منابع)

اگر آیتم‌های طراحی شما خیلی زیاد هست درست نیست که تعداد تقسیم بندی و سلسله مراتب را زیاد کنید. این کار باعث آشفتگی خواهد شد.

چطور هایرآرکی ایجاد کنیم؟

شاید این راه‌ حل در ذهن شماست که هرچه مهم‌تر و مقدم تر است را بزرگتر می‌نویسیم. اما باید بگویم که اینطور نیست. برای برجسته کردن یک متن از دیگری باید تضاد ایجاد کنیم و تضاد فقط با تغییر اندازه ایجاد نمی‌شود. مواردی از قبیل:

تغییر نوع فونت، وزن فونت، رنگ فونت، ایتالیک یا ایرانیک بودن، کشیدگی حروف و فضا همه مواردی هستند که به کمک آنها می‌توان تضاد ایجاد کرد.همینطور که در مثال بالا می‌بینید اولین جمله کوچکتر و نازک از جمله دوم است اما در مرتبه اول قرار دارد. در اینجا نوع رنگ و فضا باعث برجستگی جمله اول است.

در طراحی وب عمومی ترین روش برای انجام هایراکی در تایپوگرافی استفاده از برچسب های هدینگ در HTML است. از H1 تا H6 مهمترین عنوان‌ها تا کم اهمیت ترین نوشته‌ها را طبقه بندی کنید.قواعد هایراکی یا سلسله مراتب بجز تایپوگرافی در هر نوع دیزاین دیگر نیز وجود دارد و می‌توان با رعایت آن قدرت تاثیر گذاری بخش‌های مختلف را کنترل و نظم دهی کرد.