تایپوگرافی و تجربه کاربری با متن در بیکرانه ای به نام وب

تایپوگرافی و تجربه کاربری با متن

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

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

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

یک سری قوانین رو که از سطح وب جمع آوری کرده ایم را در یک جا مستند سازی میکنیم که همیشه رعایت کنیم.

نوع فونت ها:

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

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

· کرنینگ ها(فواصل بین حروف) می بایست در هر دو یا سه فونت یکسان تنظیم شود برای مثال فونت با فاصله حروف نیم پوینت طراحی شده و فونت دیگری با فاصله حروف 1 پوینت طراحی شده ما در هنگام طراحی می بایست هماهنگی کرنینگ را تصحیح کنیم.

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

سریف یا سنس سریف! مسئله این است:

چون فونت های سریف خوندنش راحت تر است برای هدینگ ها در نظر میگیریم و فونت های سنس سریف رو برای متن ها غیر از هدینگ (بدنه محتوا، پاراگراف ها و...)

بد نیست بدانیم: (درصد استفاده از فونت ها: 60 درصد سنس سریف استفاده میکنند و 40 درصد از سریف)

اندازه فونت هدینگ ها:

میانگین سایز هدینگ از 18 پیکسل تا 30 پیکسل متغیر است. از هدینگ اول تا هدینگ ششم باتوجه به فونت و مقیاس فونت سایز ها را تقسیم کنید.

بد نیست بدانیم: (میتونیم از نسب طلایی برای بدست آوردن اندازه هدینگ ها استفاده کنیم)

اندازه فونت متن بدنه اصلی:

به طور معمول اندازه فونت ها از 13 تا 16 متغیر است، با توجه به فونت استفاده شده سایزی واحد انتخاب شود.

بد نیست بدونیم: (در سایت های انگلیسی این سایز ها از 12 تا 14 بیان شده است)

فاصله خطوط از یکدیگر:

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

رنگ فونت:

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

آنتی آلیاسنگ:

مشکل بد شکل شدن فونت ها همیشه آزار دهنده است ولی این مشکل بیشتر بروی مروگر کروم در سیستم عامل ویندوز اشاره کرد که با خوصیات که کروم در اختیار قرار میدهد این مشکل ها تقریبا از بین می روند البته نمیتوان کامل آن ها را از بین برد خصوصیات مثل text-stroke و antialiasing  این اعمال را برای ما  انجام میدهند

رنگ فونت (متن و بدنه اصلی):

برای پشت زمینه متن یا رنگ متن در حالت لایت(تیره) بهتر است رنگ از 255,255,255 تا 220,220,200 باشد.

برای پشت زمینه متن یا رنگ متن در حالت دارک(تیره) بهتر است رنگ از 0,0,0 تا 60,60,60 باشد.

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

فونت استاندارد:

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

جهت متن:

شاید احساس کنید که جهت متن نکته ای ندارد و متن فارسی در راست و متن انگلیسی در چپ.اما!!! "متون را هرگز در وب فارسی جاستیفای نکنید"

اما چرا؟؟؟

هم‌ترازی متون به این شکل صورت می‌گیرد که بین کلمات داخل خط فاصله‌های اضافی قرار می‌گیرد تا انتهای خط با خط‌های دیگه در یک راستا قرار بگیرند. برای چاپ معمولا متون با نرم‌افزارهایی مثل Microsoft Word, Pages یا Adobe InDesign آماده می‌شن که امکانات زیادی برای هم‌تراز کردن متن دارند و لازم نیست که حتما فاصله‌های زیادی بین کلمات اضافه بشه که خوندن اون‌ها رو مشکل کند، و از تکنیک‌هایی مثل Hyphenation (خط تیره گذاری) برای هم‌تراز کردن استفاده می‌کنن که در بیشترشون در وب قابل استفاده نیستن.ولی مرورگرها برای هم‌تراز کردن متن بین حروف کلمات فاصله‌های اضافی قرار می‌دهند.

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

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

شاید این چند نکته به کاربرد پذیری و بهبود تجربه کاربری سایت طراحی شده توسط شما کمک بکند.