سلسله مراتب تایپوگرافیک (Typographic Hierarchy) یکی از مهم ترین عناصر طراحی محتوای نوشتاری است. بدون سلسله مراتب، اثری از “دیوارنوشته” را دریافت می کنید که خواندن را دشوار می کند. ایجاد یک سلسله مراتب تایپوگرافیک موثر شامل چند عنصر است که در صورت ترکیب، ساختار بصری جذابی برای محتوای نوشتاری ایجاد می کند و خواندن آن را لذت بخش می سازد. این نشان می‌دهد که کدام محتوا از همه مهم تر است، و به خواننده نشان می دهد که به چه چیزی باید توجه کند. عناصر بنیادی سلسله مراتب تایپوگرافیک شامل اندازه ی نوشتار ، انتخاب حروف و مواردی مانند وزن، رنگ، حروف بزرگ و سبک است. هر کدام نقش مهمی در ایجاد محتوای بسیار خوانا و کاربرپسند دارند.
سلسله مراتب تایپوگرافیک چیست؟
آیا تا به حال سعی کرده اید مقاله یا سندی را بخوانید که شبیه یک دیوارنوشت باشد؟ بدون عنوان، بدون سر تیتر، بدون شرح، فقط متن. خواندن آن سخت است، درست است؟ من شرط می بندم که در اکثر مواقع حتی از خواندن مطالب در آن قالب خودداری کرده اید. این اتفاق به چشمان شما فشار می آورد و درک و فهم آنچه مهم است را دشوار می کند.
اندازه ی حروف در سلسله مراتب تایپوگرافیک
واضح ترین راه برای ایجاد سلسله مراتب تایپوگرافیک استفاده از اندازه های مختلف فونت برای عناصر مختلف است. متون بزرگ تر معمولا برای مواردی مانند عناوین و سرفصل ها استفاده می شود، در حالی که متون کوچک تر برای کپی متن، زیر نویس ها و اطلاعات بیش تر استفاده می شود. اما صرفا بزرگ تر کردن فونت لزوما سلسله مراتب خوبی ایجاد نمی کند. پیروی از قوانین اندازه گیری مانند نسبت طلایی یا دنباله ی فیبوناچی، ظاهری زیباتر ایجاد می کند.
همچنین یک مقیاس تایپوگرافی کلاسیک وجود دارد که قرن هاست در طراحی تایپوگرافی استفاده می شود. ممکن است از طریق گزینه های اندازه های فونت پیش فرض استفاده شده در بسیاری از برنامه های پردازش کلمه، با آن آشنا باشید که شامل: 6، 7، 8، 9، 10، 11، 12، 14، 16، 18، 21، 24، 30، 36، 48، 60، 72 است. همچنین گاهی اوقات به میزان های 96 و 144 بسط داده می شود. یکی از اشتباهاتی که طراحان دیجیتال به طور مکرر مرتکب می شوند این است که از کپی بدنه ی بسیار کوچک استفاده می کنند. اندازه ی استاندارد بدنه ی متن در مواد چاپی مدت هاست 12 است. اما در صفحه نمایش، فونت های 12 پیکسلی برای مدت طولانی، برای خواندن راحت نیستند. در عوض، از انواع بین 14 تا 24 پیکسل برای کپی بدنه استفاده کنید و بقیه ی سلسله مراتب خود را بر اساس آن اندازه ی پایه قرار دهید.
به عنوان مثال، اگر با اندازه ی متن 18 پیکسلی شروع کنید، ممکن است بخواهید از فونت 36 پیکسل برای عنوان یا سرفصل های H1، 30 پیکسل برای H2 و 24 پیکسل برای H3 استفاده کنید. نقطه ضعف استفاده از اندازه ی حروف برای ایجاد سلسله مراتب؛ این است که تعداد هدر هایی را که می توانید بدون استفاده از حرف بزرگ داشته باشید محدود می کند (که می تواند یک انتخاب طراحی معتبر نیز باشد).
اندازه های حروف چندگانه در سلسله مراتب تایپوگرافیک
می توانید سلسله مراتب تایپوگرافیک را با استفاده از فونت های مختلف برای عناصر مختلف افزایش دهید. ترکیب اندازه های حروف برای بسیاری از نوطراحان می تواند چالش برانگیز باشد، اما چند نکته برای به خاطرسپاری وجود دارد که این کار را آسان تر می کند.
از تضاد بین طرح حروف (TypeFace) آگاه باشید. فونت های خیلی بزرگ و تکی، می توانند دیگری را از بین ببرند. فونت های خیلی کوچک و برخی فونت ها با هم برخورد می کنند. به عنوان مثال، اگر فونتی را با خطوط بسیار ضخیم و فونت دیگری را با خطوط بسیار نازک، جفت کنید، احتمالا فونت اول بر دومی غالب خواهد شد. به ساختار حروف نیز توجه کنید. اگر یکی از فونت ها دارای حروف فشرده و دیگری دارای حروف کشیده باشد، کنتراست؛ بیش از حد خواهد بود و در نهایت از نظر بصری متزلزل می‌شود.
اساس شکل حروف نیز مهم است. برای مثال، انتخاب دو طرح حرف (TypeFace) با حروف هندسی، اغلب بهتر از حروف با اشکال ضمنی بسیار متفاوت است.
یکی از تکنیک هایی که مبتدیان می توانند برای ترکیب موثر طرح حروف (TypeFace) استفاده کنند؛ انتخاب فونت از دو طبقه بندی مختلف است. به عنوان مثال، جفت کردن یک طرح حرف سرکش دار با حروف بدون سرکش یا طرح حرف های نمایشی. طرح حرف های (TypeFace) مختلف به تنهایی برای ایجاد سلسله مراتب بصری موثر کافی نیستند. اما این یک عنصر مهم در ایجاد سلسله مراتب تایپوگرافیک است، به خصوص زمانی که اندازه ی هدر و اندازه ی بدنه؛ آن قدرها متفاوت نیست. در صورت استفاده از هدرهای سطوح پایین تر، مانند H4 و H5، این امر در محتوا رایج است.
مزیت استفاده از فونت های متعدد در سلسله مراتب تایپوگرافیک این است که طرح حرف های (TypeFace) مختلف نسبت به تفاوت های ظریف در اندازه ها، به راحتی قابل تشخیص هستند. به خصوص زمانی که هدرهای مختلف در کنار هم دیده نمی شوند.
بزرگ نویسی حروف، رنگ، وزن و سبک در Typographic Hierarchy
روش نهایی برای ایجاد سلسله مراتب تایپوگرافی؛ با تغییر حروف بزرگ، رنگ، وزن یا سبک (کج یا مورب) نوشتار است. هر یک از این عناصر یک هدر یا عنصری دیگر را در مقابل عناصر دیگر متمایز می‌کند. استفاده از تمام حروف برای هدر، آن را از متن اطراف متمایز می کند. در حالی که خواندن تمام حروف در بلوک های بزرگ تر بدنه ی متن دشوار است، در اندازه های بزرگ تر قابل خواندن است؛ همانطور که در هدر نیز اینگونه است.
تغییر رنگ طرح حرف (TypeFace) می تواند تاثیر چشمگیری بر اهمیت متن داشته باشد. برای مثال، ایجاد یک متن با سایه ی روشن خاکستری، می‌تواند آن را در طرح کاهش دهد. این معمولا برای مواردی مانند اطلاعات بیش تر یا شرح تصاویر استفاده می شود و به خواننده نشان می دهد که خود متن از فضای اطراف متن، اهمیت کمتری دارد.
در مقابل، استفاده از یک رنگ زنده برای حروف، می تواند آن را در مقابل فضای اطراف متن متمایز کند. به همین دلیل است که لینک ها، از مدت ها قبل، آبی روشن بوده اند – این باعث می شود که به عنوان یک رابط، قابل تشخیص باشند و از محتوای اطراف متمایز شوند. همین کار را می توان با هدرها انجام داد تا بتوان آن ها را از بدنه ی متن متمایز کرد. این کار به طور ویژه برای هدرهای سطوح پایین تر که ممکن است به طور قابل توجهی بزرگ تر از نسخه ی اصلی نباشند، مفید است.
وزن نیز یک راه مفید برای ایجاد سلسله مراتب است. وزن های سنگین تر (وزن های پر رنگ یا سیاه) باعث برجسته تر شدن متن می شوند در حالی که وزن های سبک تر باعث عقب نشینی متن می‌شوند. با این حال، در مورد استفاده از طرح حرف هایی که بطور ویژه سنگین یا سبک هستند، مراقب ساختار‌های بزرگ متن باشید، زیرا می تواند بر خوانایی تاثیر بگذارد. سبک، روش نهایی برای ایجاد سلسله مراتب تایپوگرافیک است. از حروف کج می‌توان در هدرها استفاده کرد تا آنها را از سطوح هدرهای دیگر متمایز کند، یا برای مواردی مانند کپشن ها، آن ها را از کپی بدنه جدا کند.
نتیجه گیری
سلسله مراتب تایپوگرافیک یک راه حل یکسان برای همه ندارد. گزینه های زیادی برای طراحان وجود دارد که می توانند برای ایجاد ظاهر بصری متناسب با پروژه ی خود در نظر بگیرند و در عین حال خوانایی محتوای متن را نیز بهبود بخشند. ایده ی خوبی است که با اندازه و سبک متن اصلی شروع کنید. این یک پایه ی خوب برای بقیه ی تایپوگرافی در طراحی است. از آنجا، باید اندازه های هدر مورد نیاز (H1-H6) و همچنین سایر عناصر متنی را که صفحه شامل می شود، مشخص کنید.
فرض کنید تصمیم گرفته اید از یک بدنه ی متن 16 پیکسلی استفاده کنید. در این صورت چهار سطح هدر (H1-H4) ، به علاوه ی کپشن تصاویر و متن متا برای تاریخ و سطر امضای نویسنده را خواهید داشت و برای جالب تر کردن برخی موارد، نقل قول هایی نیز در متن گنجانده شده است.
مثال بالا نشان می دهد که چگونه می توان عناصر تایپوگرافی ذکر شده در سراسر این مقاله را در یک سلسله مراتب، به طوری موثر ترکیب کرد. از دو فونت استفاده می شود – Evolve Sans برای هدرها و اطلاعات متا و Cardo برای بدنه ی متن.
Evolve Sans و Cardo عملکرد خوبی یا یکدیگر دارند، زیرا بدون اینکه هر یک از طرح حرف ها (TypeFace) بر دیگری غلبه کند، کنتراست کافی وجود دارد. آن ها اشکال حروف مشابهی دارند، اما با این حال از دو طبقه بندی طرح حرف مختلف (به ترتیب سرکش دار و بدون سرکش) هستند. استفاده از اندازه های حروف مختلف و حروف بزرگ برای هدر های سطح اول و دوم بلافاصله آن ها را از متن اصلی متمایز می کند. آن ها از مقیاس تایپوگرافی کلاسیک پیروی می کنند، با 16 پیکسل کپی بدنه، 24 پیکسل هدر 2، و 48 پیکسل هدر 1. فرمت متا و کپشن نیز از نظر اندازه، در 10 پیکسل مشخص شده است.
هدر سطح دوم نیز از طریق تغییر رنگ، جذابیت بصری را دو چندان می کند. برعکس این کار، برای متن متا و کپشن انجام می‌شود و به رنگ خاکستری روشن تر ظاهر می شود تا کم تر به چشم بیاید.
هدر سطح سوم به اندازه ی کپی بدنه است، اما به علت پر رنگ بودن از هم جدا می شود. هدر سطح اول نیز پررنگ است و اهمیت آن را در سلسله مراتب افزایش می دهد.
از این مثال ساده می توانید ببینید که چگونه ترکیب تکنیک های توضیح داده شده در بالا منجر به یک سلسله مراتب تایپوگرافیک می شود که انتخاب مهم ترین عناصر در طراحی گرافیک را آسان می کند و متن را نیز راحت تر اسکن می‌کند (خوانندگان می توانند به راحتی نکات اصلی هر بخش که توسط هدر نشان داده شده است را ببینند تا بخش هایی را که اطلاعات مربوط به آن ها را دارند پیدا کنند). ایجاد سلسله مراتب تایپوگرافیک موثر؛ مستلزم آگاهی از این اصول، به علاوه ی کمی آزمایش است. این اصول به طراحان چارچوب مشخصی می دهد و در عین حال آزادی زیادی را در نحوه ی اجرای آن چارچوب ها؛ فراهم می آورد.
