تایپوگرافی در UI

تایپوگرافی در ui یکی از اساسی‌ترین موضوعاتی است که در موفقیت یک پروژه طراحی رابط کاربری موثر است. در جلسه رنگ‌ها در ui دیدید که اصول ui اگر خوب طراحی شوند، چه کمک بزرگی به مقوله دسترسی‌پذیری می‌کند. این خصصیه شامل تایپوگرافی نیز می‌شود. تایپوگرافی در طراحی رابط کاربری شامل انتخاب فونت، وزن فونت، تراز فونت، فاصله خطوط، اندازه‌ها و… می‌شود. عناوین، زیرعنوان، پاراگراف‌ها و کپشن‌ها با توجه به پروژه تنظیم شود. در این قسمت از دوره طراحی رابط و تجربه کاربری (ui/ux) آژانس نوآوری رسام قصد داریم اصول تایپوگرافی را در این مقاله به صورت کاربردی شرح دهیم. پس از شما همراهان عزیز دعوت می‌کنیم تا پایان مقاله ما را همراهی کنید.

تفاوت فونت و تایپ فیس

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

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

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

فونت‌ها می‌توانند از نظر ظاهر، دسته‌بندی مشابه تصویر مقابل را داشته باشند. در فونت‌های لاتین، از serif عمدتا برای متون رسمی‌تر استفاده می‌کنند. همچنین از Sans-Serif بیشتر از محصولات دیجیتال، مانند سایت و اپ استفاده می‌شود. دلیل آن هم این است که خوانایی آسان‌تر و بهتری نسبت به Serif دارد.

• فونت‌های serif که دارای شکستگی و انحنا هستند.
• فونت‌های sans-serif که طراحی ساده‌تری دارند.
• فونت‌های monospace برای برنامه‌نویسی استفاده می‌شوند.
• فونت‌های دست‌نویس و cursive

وزن فونت – Font Weight

به تصویر مقابل دقت کنید. فونت‌ها صرف‌نظر از اینکه اندازه متفاوتی دارند، وزن‌ آن‌ها از نظر ضخامت نیز یکسان نیست. در تایپوگرافی، صرفا با رنگ و اندازه فونت، سلسله مراتب را نشان نمی‌دهیم. وزن و فاصله‌گذاری فونت نیز بسیار مهم و تاثیرگذار است.
معمولا عناوین به صورت Bold نشان داده می‌شوند. متن Body یا بدنه سایت به صورت Normal یا همان Regular نشان داده می‌شود. کپشن‌ها نیز اغلب به صورت Light هستند. انتخاب فونت باید متناسب با نیاز کاربران و پرسونای محصول باشد. بهتر است صرفا از یک نوع فونت در پروژه استفاده شود. باید توجه داشت که برخی فونت‌ها ممکن است صرفا مناسب عناوین باشند و برای متن بدنه سایت، گزینه خوبی نباشند.حال، به تصویر زیر دقت کنید.

تمامی 9 متن بالا، اندازه فونت یکسانی دارند. اما وزن آن‌ها با هم متفاوت است. وزن فونت از مقدار 100 تا 900 است. اغلب به صورت پله‌ای، وجود دارد و با اعداد مختلف، وزن‌های مختلفی نیز وجود دارد. در محصولات دیجیتال، 4 وزن لایت با عدد 300، رگولار با عدد 400، مدیوم با عدد 500 و بُلد با عدد 700، بسیار پر استفاده‌تر هستند. تعداد وزن‌ها بستگی به فونت دارد و اغلب، فونت‌های پولی، تنوع بیشتری در این موضوع دارند.

فونت‌های متغیر – Variable Fonts

متغیر بودن فونت، یک خصوصیت حرفه‌ای در تایپوگرافی امروزی است. حتی اگر تعداد وزن‌های فونت زیاد باشد، باز این قابلیت وجود ندارد که شما بتوانید بین عدد 100 تا 900 که وزن فونت تعریف می‌شود، مثلا عدد 354 را انتخاب کنید. اما با Variable بودن فونت، این قابلیت را خواهید داشت.

معرفی فونت، وب‌سایت و پلاگین برای تایپوگرافی

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

فونت‌های Google

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

در این سایت، فونت‌های کاملا ایرانی مانند وزیرمتن و لاله‌زار نیز وجود دارند. توجه داشته باشید که فونت‌های عربی لزوما برای فارسی مناسب نیستند. همانطور که می‌دانید، نوشتار اعداد و برخی کاراکترها در فارسی و عربی یکسان نیست. مانند اعداد 4 و 5 و 6 که در فارسی و عربی کمی متفاوت نوشته می‌شود. بنابراین بهتر است برای فونت‌های فارسی، از ابزارهای دیگری استفاده کنید که آن‌ها را معرفی خواهیم کرد.

سایت فونت‌ایران، بهترین مرجع فونت فارسی

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

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

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

یکی از وب‌سایت‌های ارزشمند دیگر در زمینه فونت فارسی، fontamin.com است. این وب‌سایت نیز فونت‌های جذاب و زیبایی مانند پینار، آذرمهر، عنوان، بدیع، ماهو، منشور و فونت رایگان استعداد را خواهید دید.

فونت‌های صابر راستی کردار

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

پلاگین‌ تایپوگرافی برای نرم افزار فیگما

با استفاده از پلاگین typescales در فیگما، می‌توانید اندازه‌های مختلف عناوین و پاراگراف‌ها را متناسب با نیاز پروژه خود بسازید. در این پلاگین، نسبت اندازه، فاصله خطوط، اندازه فونت و… قابل انتخاب است. در نهایت شما به تایپوگرافی مدنظر می‌رسید. برای این کار، از وب‌سایت typescale.com نیز می‌توانید استفاده کنید. البته پلاگین فیگما در دسترس‌تر است.

ایجاد تایپوگرافی بدون ابزار

عناوین H1 تا H6 و پاراگراف

به تصویر مقابل دقت کنید. عناوین در وب، 6 سطح دارند. از نظر سئو، هر صفحه یک عنوان اصلی یا همان H1 دارد. مانند یک کتاب که صرفا یک عنوان اصلی دارد. فرض کنید عنوان اصلی رشته های علوم پایه است. H2‌های شما، ریاضی، فیزیک و شیمی باشند. H3 شما فیزیک کاربردی و فیزیک محض و H4 شما هم نور و اپتیک باشد. همین روند تا 6 سطح وجود دارد و بین این عناوین ممکن است ویدئو، تصویر و متن نیز باشد.

به تصویر بالا دقت کنید. عناوین H1 تا H6 با یک نسبت مشخصی بزرگ می‌شوند. معمولا اگر سایز فونت بدنه 16 هست، بزرگترین عنوان، 2 برابر سایز بدنه یعنی 32 خواهد بود. البته ذکر این نکته ضروری است که فونت مانند سایز کفش هست. لزوما همیشه عدد و رقم شرط کافی نیست و این مقادیر ممکن است برای همه پروژه‌ها مناسب نباشد. اندازه پیشفرض فونت مرورگر، 16 پیکسل بوده که هر 16 پیکسل یک rem است. این مقدار قابل تغییر است. فونت همه Headingها معمولا Bold است. با این اوصاف، متن H2 که 32 پیکسل بود معادل 2rem خواهد بود.

فاصله خطوط و استفاده از مقادیر زوج

تلاش می‌کنیم که از اندازه‌های زوج استفاده کنیم. این موضوع شامل فاصله خطوط یا line-height هم می‌شود. در واقع فاصله خطوط هست که ارتفاع یک متن را مشخص می‌کند. پس با زوج بودن آن‌ها، فواصل بالا و پائین اعشاری نمی‌شود و این یک مزیت به حساب می‌آید. مقادیر کپشن که برای اطلاعات متا (مانند نام نویسنده، اسم دسته‌بندی مطلب، تاریخ ارسال مطلب و…) نیز با سایز کوچکتر و وزن کمتری طراحی می‌شود.

عناوین بسیار بزرگ یا Display

گاهی ممکن است از سایزهایی فراتر از H1 نیز استفاده کنیم. البته تگ آن‌ها در HTML همان H1 است. مثلا در کمپین‌های تبلیغاتی که ممکن است بخواهیم عناوین خیلی بزرگی را به کار ببریم. یا در برخی طرح‌های انگلیسی minimal این عناوین دیده می‌شوند. (تصویر پائین را ببینید).

ساخت اسلایل‌گاید تایپوگرافی و افزودن به فیگما

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

وقتی استایل‌گاید ساخته شد (مشابه تصویر مقابل و یا هر ظاهر دیگری که به خوبی توصیف‌کننده باشد) باید آن را به فیگما اضافه کنیم. برای اضافه کردن، دقیقا مشابه رنگ‌ها و افکت‌ها و گریدسیستم، می‌توانید آن‌ها را به لوکال استایل‌های فیگما اضافه کنید.

همانطور که با پلاگین chroma colors، رنگ‌های استایل‌گاید را سریع به فیگما اضافه می‌کردیم، در این بخش نیز با استفاده از افزونه Text Style Generator می‌توانیم تایپوگرافی‌های ایجاد شده را به لیست استایل‌های فیگما اضافه کنیم. با مشاهده آموزش رایگان نرم افزار فیگما می‌توانید به خوبی عملیات های مدنظر خود را انجام دهید.

ذکر این نکته ضروری است که پروژه‌ها مثل هم نیستند. این روند پیاده‌سازی شده، لزوما برای همه پروژه‌ها ممکن است مناسب نباشد و نیاز به تغییراتی داشته باشد. درباره تایپوگرافی باید کمی صبور باشیم. تمرین بیشتر ما را به نتایج خوبی می‌رساند.

طراحی حرفه‌ای با رعایت اصول تایپوگرافی در ui

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