اصول تایپوگرافی در طراحی رابط کاربری

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

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

تعیین مقیاس برای اندازه فونت در طراحی رابط کاربری

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

شروع طراحی بدون تعیین یک سیستم، ایده‌ی بسیار بدی است. به دو دلیل:

1. طرح را از منسجم‌بودن در می‌آورد.
2. سرعت طراحی را پایین می‌آورد.

حالا چطور باید یک سیستم برای اندازه فونت‌ها تعیین کنیم؟

اندازه فونت در تایپوگرافی طراحی رابط کاربری

در یک طرح با تایپوگرافی اصولی، معمولا اندازه فونت‌ها با یک نسبت تغییر می‌کنند. به طور مثال اگر شما با نسبت 4:3 بخواهید کار کنید، می‌توانید از اندازه‌های 12px، 16px، 21px و... استفاده کنید(این اعداد را رُند کرده‌ایم).

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

دوره تخصصی طراحی رابط کاربری در فیگما

این اندازه‌ها به گونه‌ای است که در سرعت تصمیم‌گیری به شما کمک می‌کند و اجازه نمی‌دهد از اندازه‌های غیر کاربردی استفاده کنید.

انتخاب فونت در تایپوگرافی

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

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

امن‌ترین انتخاب

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

وزن فونت

واژه "وزن" در فونت و تایپوگرافی چیست؟

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

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

هدف از انتخاب فونت در طراحی رابط کاربری

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

فونت‌های مختص متن معمولا ظریف‌تر، خواناتر و ساده‌تر هستند. وزن‌های پایین در فونت‌ها، برای نوشتن متون بسیار مناسب است.

از طرفی فونت مختص تیترها معمولا زمخت‌تر، فانتزی‌تر و بولدتر هستند.

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

به محبوبیت یک فونت اعتماد کنید

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

الگوبرداری از سایت‌های مطرح

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

توجه به طول یک خط در تایپوگرافی

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

نوشته شما باید طوری باشد که در یک نگاه بتوان کل یک خط را خواند. در واقع این موضوع یکی از عوامل خوانایی در تایپوگرافی است.

ترازبندی متون در کنار هم

اگر در حال طراحی یک قسمتی از سایت یا اپلیکیشن هستید که چند متن در کنار هم دارید، و هر کدام سایز و وزن‌های متفاوتی دارند، بهتر است برای ترازبندی از baseline استفاده کنید.

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

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

1. پایه برای کاراکترها: بیس لاین برای کاراکترهایی مانند حروف، اعداد و نشانه‌های نگارشی به مانند یک پایه عمل می‌کند. کاراکترها به طور معمول با این بیس لاین هماهنگ می‌شوند.
2. یکنواختی: بیس لاین به حفظ یکنواختی و ترازبندی در سراسر یک متن کمک می‌کند. این یکنواختی برای خوانایی و ایجاد یک ظاهر شیک در تایپوگرافی، بسیار حائز اهمیت است.
3. اندازه‌گیری فضای عمودی: تایپوگراف‌ها از بیس لاین به عنوان نقطه مرجع برای اندازه‌گیری فضای عمودی، از جمله فاصله بین خطوط متن (لیدینگ)، ارتفاع حروف و کاراکترهای دیگر مانند اعداد و همچنین ابعاد عمودی دیگر، در تایپوگرافی استفاده می‌کنند.
4. تراز: تراز عناصر متنی، مانند عناوین و زیرعناوین، اغلب به ارتباط با بیس لاین انجام می‌شود. این اطمینان حاصل می‌شود که عناصر مختلف در یک طراحی با هماهنگی تراز شوند.

Leading یا فاصله بین خطوط

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

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

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

Kerning و Tracking در تایپوگرافی طراحی رابط کاربری

برای جلوگیری از ادغام کلمات و حروف، باید بین کلمات و همچنین حروف، فاصله‌ای را در نظر گرفت. این موضوع در زبان انگلیسی بیش‌تر کاربرد دارد، ولی در زبان فارسی نیز به دلیل استاندارد نبودن بعضی از فونت‌ها و یا گاهی برای زیبایی و جذابیت بیش‌تر از kerning و tracking استفاده می‌کنیم.

Kerning: فاصله بین حروف را مشخص می‌کند.

Tracking: فاصله بین کلمات را مشخص می‌کند.

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

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

از وسط ترازبندی نکنید

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

ترازبندی اعداد

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

Hyphen و justify  در تایپوگرافی طراحی رابط کاربری

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

حالا چرا این خط ربط یا هایفن برای ما اهمیت دارد؟

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

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

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

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

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

در این‌ قسمت نمونه عکس‌هایی را از ترفندهای مختلف خوانا کردن متن روی تصویر، مشاهده می‌کنید.

روش اول: نوشتن متن با رنگ تیره روی یک پس‌زمینه با رنگ روشن

روش دوم: نوشتن متن با رنگ روشن روی یک پس‌زمینه تیره

روش سوم: برای نوشتن یک متن روی یک تصویر، بهتر است که شفافیت تصویر را کاهش داده و یک متن با رنگ تیره روی آن بنویسید.

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

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

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