مشکلی که اکثر طراحهای رابط کاربری تازه کار باهاش سر و کله میزنن، انتخاب سایز مناسب برای متن بدنه یا پاراگراف، هدینگها و کلا انتخاب سایز مناسب برای نوشتههای توی طرحشون یا همون تایپوگرافی هستش. خب برای این مشکل راه حل وجود داره. راه حلی که طراحهای دیگه ازش استفاده میکنن و مثل یه قانون ازش پیروی میکنن.
برای خلاص شدن از این مشکل، باید اول به یه سوال جواب بدم تا بعدش برم سراغ اینکه چه سایز و وزنهایی برای تایپوگرافی رابط کاربری که طراحی میکنی مناسبه.
فونت یا تایپ فیس؟ مسئله اینست.
یکی از بزرگترین سردرگمیها که شاید برای تو هم پیش اومده باشه، تفاوت بین تایپ فیس و فونته. اصلا تا حالا چیزی درباره تایپ فیس شنیدی؟ طراحهای تازه کار همیشه از کلمه فونت استفاده می کنند ولی حرفهایها بهش تایپ فیس میگن.
حالا تایپ فیس چیه مگه؟
اجازه بده با مثال توضیح بدم. خیلیها میگن فونت ایران سنس در صورتی که این غلطه چون ایران سنس یه تایپ فیسه که مثلاً از ۱۰ تا فونت تشکیل شده. تصویر زیر رو نگاه کن تا بهتر متوجه بشی.
پس به عنوان مثال، ایران سنس Bold یه فونت از یه مجموعهست. در صورتی که خود ایران سنس یه تایپ فیس به حساب میاد. خوشبختانه چند سالی هست به لطف طراحهای ایرانی مثل صابر راستی کردار، رضا بختیاری فرد، مسلم ابراهیمی و خیلی از عزیزان دیگه تایپوگرافی فارسی هم از تایپ فیس با کلی فونت و وزن های مختلف برخوردار شده.
حالا که فرق بین فونت و تایپ فیس رو میدونی، به نظرت برای طراحی رابط کاربری که انجام میدی، از چندتا تایپ فیس باید استفاده کنی؟
از دوتا تایپ فیس بیشتر استفاده نکن!
مشکلی که تو طراحی رابط کاربری هست، اینه که اکثر طراحهای تازه کار از تعداد زیادی تایپ فیس یا فونت تو طرحهاشون استفاده میکنن و طرح رو واقعا خراب میکنن. در صورتی که پیش خودشون فکر میکنن طرحشون خیلی قشنگ و خفن شده.
تو باید نهایتا از دوتا تایپ فیس استفاده کنی و نه بیشتر. اگر میخوای از دوتا تایپ فیس استفاده کنی، یکی برای هدینگها و تایتلها و دیگری رو برای بدنه که باید خوانایی خیلی خوبی داشته باشه. البته بیشتر طراحهای رابط کاربری وب و اپلیکیشن، مخصوصا ایرانیها ترجیح میدن که از یکی استفاده کنن. این هم روش خیلی خوبیه، چرا که تو سرعت بارگذاری سایت یا اپ خیلی تاثیر گذاره.
برای اینکه طرحت حرفهای باشه و نه خسته کننده، میتونی از وزنهای مختلف تایپ فیس استفاده کنی، به جای اینکه از یه تایپ فیس دیگه استفاده کنی. با اینکار سرعت لود سایت و اپلیکیشن هم بیشتر میشه!
پس ترجیح من به کار بردن یه تایپ فیس با وزنهای مختلف در تایپوگرافی طراحی رابط کاربری.
استفاده از چندین فونت، ظاهر طراحیت رو بهم میریزه و باعث میشه کاربرها ناخواسته تلاش بیشتری برای فهم طرح مقابلشون بکنن. چون که چشم به همون قبلی عادت کرده و تا بیاد فونت جدید رو درک کنه و بخونه، زمان میبره. تا حالا دیدی که تو متن یه کتاب چندتا فونت مختلف رو بکار بگیرن؟ هر بخش کتاب با یه فونت باشه؟
این نکته رو هم در نظر داشته باش که بعضی از فونتها و تایپ فیسهای زیبایی که طراحی شدن، مخصوص تایتلها و هدینگها هستن و اصلا مناسب متن بدنه و پاراگرافهای سایت یا اپلیکیشن نیستن. چرا که خوانایی بسیار کمی دارن، مثل تایپ فیس مربع که برای هدینگ بدک نیست اما برای متن بدنه اصلا خوب نیست. کلا فونتهایی که ضخیم هستن یا مخصوص عناوین تبلیغاتی طراحی شدن، مناسب متن پاراگرافی نیستن.
در ادامه چندتا از بهترین تایپ فیسهای فارسی و انگلیسی رایگان و پریمیوم رو بهت معرفی میکنم تا بهترین تایپوگرافی رو تو طرحت پیاده کنی.
تایپ فیس وزیر (رایگان) ثبت شده در کتابخانه فونت گوگل
انگلیسی
Roboto
هر سه رایگان و در کتابخانه گوگل هم موجود هستن.
سایز مناسب برای فونت بدنه چیه؟
کاربرها قراره کلی متن رو توی سایت یا اپلیکیشنی که رابط کاربری اش رو طراحی میکنی بخونن. خب حالا چه سایزی رو باید برای متن بدنه یا پاراگراف انتخاب کنی؟
اینو بگم که روزهایی که متون با سایز ثابت بودن دیگه کم کم داره میگذره. چون خیلی از مرورگرها اجازه میدن با افراد فعال کردن Reading Mode سایز فونت نوشتهها رو تغییر بدن.
اما تو ایران خیلی این حالت مرسوم نیست. پس ضروریه که تنظیمات پیش فرض برای سایز رو اعمال کنی تا در نظر اول و بدون فعال کردن Reading mode نوشتهها خوانا باشن. یعنی انقدری بزرگ باشن که چشم اذیت نشه و البته خیلی هم بزرگ نباشن که تو ذوق بزنه و خیلی از فضای طراحی رو بگیره.
سایز متن بدنه با ۱۶ پیکسل بهترین انتخابه. هم خواناست و هم فضای مناسبی رو میگیره. هم تو صفحهی موبایل خواناست و هم تو صفحه دسکتاپ و تبلت. بعد از ۱۶ میتونی ۱۴ پیکسل رو هم انتخاب کنی. اون هم سایز مناسبیه.
مثال هایی که میتونی تو طراحی ببینی و با هم مقایسهشون کنی.
تایتل، هدینگ. سایز این رو چی انتخاب کنم؟
مرسومترین نامگذاری تایتل یا هدینگها شش مورد، از H1 تا H6 که بزرگترین اونها H1 و کوچکترین H6 هستن. باید این نکته رو گوشه ذهنت داشته باشی که برای طراحی رابط کاربری وب، حتما تو صفحه اصلی یا لندینگ، حداقل یه عنوان H1 و چندین H2 و H3 به کار ببری. پس مهمه که سایزی رو برای هدینگ اصلی که H1 هست و قراره توجه خواننده رو به خودش جلب کنه در نظر بگیری که نه خیلی بزرگ باشه که فضا رو بگیره و تو ذوق بزنه و نه خیلی کوچیک که گیرا نباشه. میتونی ۴۰ پیکسل برای H1 و به ترتیب ۳۶، ۳۲، ۲۸، ۲۴، ۲۰ رو به H2 تا H6 اختصاص بدی. این بازه مناسب سیستم گرید ۴ پوینتی هم هست و امتحان خودش رو پس داده.
الان دیگه وقت سایز فونت دکمههاست
برای تایپوگرافی دکمه هم میتونی همون سایز بدنه رو به کار ببری. یعنی ۱۶ و ۱۴ پیکسل رو. ولی باید حواست به وزن فونت باشه. برای CTA میشه وزن سنگینتر مثل Bold رو استفاده کنی و برای دکمههای معمولی، وزنهای Regular و Medium رو که برای اینکار مطمئن هستن.
حالا که حرف از وزن شد، برای تایتل و بدنه هم میگم که چکار کنی.
راستی اگر میخوای روش انتخاب رنگ رو هم تو طراحی رابط کاربری یاد بگیری، این مطلب رو هم یه نگاه بنداز.
وزن فونتها رو چکار کنم؟
خب الان وقت اونه که در مورد وزن فونتها تو طراحی صحبت کنم. برای تایتل و هدینگ بهتره بیشتر از وزنهای سنگین Bold، Semi Bold، Black استفاده کنی. چون با این وزنها میتونی نظر مخاطب رو به متن تایتل جلب کنی. البته که میشه برخی مواقع برای زیبایی بیشتر وزنهای سبک رو هم به کار بگیری. اما دقت کن که زیاد نباشه. چرا که تایتلها برای جذب نگاه کاربرها استفاده میشن و اگر گیرا نباشن، باختی!
برای بدنه، با توجه به سایزی که پیشنهاد دادم یعنی ۱۶ پیکسل که نسبت به سایز تایتل ۴۰ یا حتی ۳۲ پیکسلی خیلی کوچکتره، بهتره جهت حفظ خوانایی از وزنهای Medium و Regular و یا نهایتا از Bold استفاده کنی. حواست باشه که به هیچ عنوان از وزنهای خیلی سبک مثل Thin استفاده نکنی چون که به سختی دیده میشن. از وزنهای خیلی سنگین هم مثل Black استفاده نکن چون تو سایز ۱۶ و ۱۴ پیکسلی تفاوت آنچنانی با Bold نداره.
نسخه موبایل 👇
حالا که اطلاعاتت در مورد فونت و تایپ فیس، انتخاب سایز و وزن مناسب برای متن بدنه و تایتلها بیشتر شده، میتونی یه تایپوگرافی خوب پیاده کنی و طرحات رو زیباتر و خواناتر کنی. چون که تواناییاش رو داری، فقط باید وقت و انرژی بگذاری. به امید موفقیت تو و بقیه طراحهای رابط کاربری
