اصول تایپوگرافی رو یاد بگیریم

 

(زمان مورد نیاز برای مطالعه: ۱۰ دقیقه)

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

 

تایپوگرافی چیه؟

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

 

فونت و Typeface

خیلی از ما ممکنه که فرق بین فونت و Typeface رو ندونیم. به شکل و طراحی بصری یک نوشته یا Type، که بر اساس الفبا، اعداد و علامت‌ها شکل می‌گیره، اصطلاحا Typeface گفته میشه؛ بعنوان مثال،‌ سری B و سری Times جزء Typefaceها هستند. فونت، یک Typeface هست که اندازه و وزن داشته باشه؛ یعنی از Typeface سری B، دو دسته با سایز ۱۲ و ۱۴، و استایل ساده و ایتالیک، دو نوع فونت محسوب میشن. مقایسه Typeface و فونت، مثل مقایسه موسیقی و فرمت MP3 هست.

به‌طور کلی، دو دسته Typeface وجود داره: Serif یا با زائده، و San Serif یا بدون زائده. Typefaceهای نوع Serif، خط‌ها یا زائده‌های کوچکی در انتهای کاراکترهاشون دارند و عرض حروف، اغلب در قسمت‌های مختلف متغیره. مثل Times و Caslon در انگلیسی، نازنین و لوتوس در فارسی. Typefaceهای San Serif، این زائده‌ها رو ندارند و تقریبا در همه قسمت‌ها، کاراکترها عرض یکسان دارند. مثل Helvetica و Open sans در انگلیسی، یکان و ایران سنس در فارسی.

فونت و Typeface

اندازه فونت

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

برای انتخاب اندازه مناسب، روش‌های محتلفی وجود داره. یکی از رایج‌ترین روش‌ها در کتاب The Elements of Typography توضیح داده شده که از گام‌های مینور و ماژور در موسیقی کلاسیک الهام گرفته شده. این سایز‌بندی رو در شکل زیر می‌بینیم.

مقیاس‌بندی فونت‌ها

یک راه حل ساده برای انتخاب اندازه فونت در طراحی، مقیاس‌بندی هست. برای مقیاس‌بندی، میتونید از نسبت طلایی ۱.۶۱۸ استفاده کنید (نسبت‌های ۱.۴ و ۱.۳۳۳ هم معروف هستند)؛ بعنوان مثال، اگه اندازه فونت متن ۱۶pt در نظر گرفته بشه، اندازه‌های زیر رو می‌تونید استفاده کنید.

 

۴۱٫۸۸۶ = ۱٫۶۱۸ * ۲۵٫۸۸۸

۲۵٫۸۸۸ = ۱٫۶۱۸ * ۱۶

 ۱۶

۹٫۸۸۸ = ۱٫۶۱۸ / ۱۶

۶٫۱۱۱ = ۱٫۶۱۸ / ۹٫۸۸۸

 

می‌تونید ارقام اعشار رو گرد کنید؛ یعنی با نسبت ۱.۶۱۸، اندازه‌های ۴۲، ۲۶، ۱۶، ۱۰ و ۶ به‌دست میاد. برای سادگی، می‌تونید از وب‌سایت ModularScale برای محاسبه اندازه فونت‌هاتون استفاده کنید. در مثال زیر با استفاده از نسبت ۱.۳۳۳، سایز پایه ۱۴pt و Typeface ایران سنس، Type system زیر رو ایجاد کردیم که می‌تونید توی طرح‌هاتون ازش استفاده کنید.

مقیاس‌بندی فونت

فاصله بین سطرها و طول سطرها

فاصله مناسب بین سطرها، به درک بهتر مطلب کمک می‌کنه. برقرار کردن تعادل بین اندازه فونت و فاصله بین سطرها، یکی از فاکتورهای مهم در بالا بردن خوانایی است. فاصله توصیه شده بین سطرها، در فونت انگلیسی، عمدتا بین ۳۰٪ تا ۵۰٪، و برای فونت‌های فارسی بین ۵۰٪ تا ۹۰٪ بیشتر از اندازه فونت هست.

وقتی که طول سطرها طولانی باشه، چشم کاربر خسته می‌شه و هر بار که از انتهای خط بخواد سر خط بعد رو بخونه، احتمال گم کردن خط وجود داره. استفاده از سطرهای کوتاه هم باعث میشه که چشم مدام در حال پرش باشه. تعداد استاندارد کاراکترها برای سطرهای طولانی بین ۴۰ تا ۸۵، و برای سطرهای کوتاه بین ۲۰ تا ۴۰ هست. البته در صفحات وب و مانیتورهای عریض، تعداد کاراکترها می‌تونه تا ۱۲۰ هم باشه، اما خیلی توصیه نمیشه.

اندازه و فاصله سطر

 

ترازبندی

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

ترازبندی وسط‌چین

 

سلسله مراتب

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

سلسله مراتب در تایپوگرافی

رنگ و کنتراست

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

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

 

جمع‌بندی

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

امیر گردکانه، دارای مدرک کاشناسی مهندسی کامپیوتر است. او کار خود را با برنامه‌نویسی Front-end شروع کرد و مدت دو سال است که در زمینه طراحی بصری، به‌صورت حرفه‌ای فعالیت می‌کند.

ارسال نظر