10 تکنیک برای تایپوگرافی در طراحی سایت

برای اینکه خوانایی متن بالا باشد چه کاری باید انجام بدهیم؟!

رابط ها نقش اساسی در طراحی سایت دارند-ایجاد رابط کاربری واضح بین کاربر و وبسایت شما برای اینکه کاربر به اهدافش برسد امری ضروری است . وقتی ما در مورد ارتباطات در حوزه طراحی سایت صحبت می کنیم، معمولا منظورمان متن ها هستند. تایپوگرافی در این فرایند نقش حیاتی دارند:

[dt_highlight color=”” text_color=”” E9967A=””]بیش از 95% اطلاعات در وب به صورت زبان نوشتاری و متن است.[/dt_highlight]

تایپوگرافی خوب در طراحی سایت، خوانایی سایت را بالا می برد، در حالی که تایپوگرافی ضعیف باعث نقص در صفحه می شود. همانطور که  آلیور ریچنستین در مقاله “95% طراحی سایت تایپوگرافیست” گفته است:

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

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

1. تعداد فونت ها را در کمترین حالت ممکن نگه دارید

استفاده بیشتر از 3 فونت مختلف باعث می شود سایت شما غیرحرفه ای و غیراستاندارد جلوه کند. فراموش نکنید که استفاده از استایل و اندازه های مختلف یک باره میتواند طرح و ایده اصلی شما را خراب کند.

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

   2.سعی کنید از فونت های استاندارد استفاده کنید.

سرویس های فونت های مختلف (google web font یا typekit) دارای فونت های جذاب زیادی هستند که می توانند به طرح شما چیزهای جدید و غیرمنتظره ای بدهد. فقط مشکلی که وجود دارد این است که ممکن است فونت های جالب ذهن کاربر را منحرف کند.

طراح سایت تنها در زمانی می تواند از این فونت های جدید استفاده کند که کاربران سفارشی داشته باشد مثلا برای اسم یک برند یا برای ایجاد طراحی ui تاثیر گذار.

[dt_highlight color=”” text_color=”” E9967A=””]به یاد داشته باشید که تایپوگرافی خوب است که خواننده را به سمت محتوا بکشاند، نه نوع فونت.[/dt_highlight]

3. طول خط رو محدود کنید

داشتن تعداد کارکترهای مناسب در یک خط اصل مهم در خوانایی متن است.این نباید طرح شما باشد که عرض متن رو مشخص می کند. توصیه ای از موسسه baymard در مورد خوانایی و طول خط را ببینید:

[dt_highlight color=”” text_color=”” E9967A=””]اگر می خواید که طراحی سایت شما خوانایی خوبی داشته باشد، در هر خط از 60 کارکتر استفاده کنید.[/dt_highlight]

برای تلفن همراه، باید از 30-40 کارکتر در هرخط استفاده کنید. تصاویر پایین نمونه های استاندارد و غیر استاندارد را می بینید. شما هم متوجه تغییر خواناییشان شدید؟

در طراحی سایت، شما می تونید با محدود کردن عرض بلوک های متنی  یا پیکسل یا em، به تعداد مطلوب برای کارکتر در هر خط برسید.

4. از فونتی استفاده کنید که در اندازه های مختلف هم واضح باشد.

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

[dt_highlight color=”” text_color=”” E9967A=””]مطمئن شوید نوع نوشتاری را انتخاب می کنید که در صفحه های کوچک هم خوانا باشد![/dt_highlight]

5. در استفاده از حروف بزرگ خودداری کنید.

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

6. فاصله بین خطوط رو به حداقل برسونید.

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

[dt_highlight color=”” text_color=”” E9967A=””]آمارها نشان داده اند که فضای سفید بین پاراگراف ها درک مطلب را 20% بیشتر می کند.[/dt_highlight]

7. مطمئن بشوید که متن های شما رنگ کنتراست(contrast) مناسبی داشته باشند

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

8. از رنگ متن سبز یا قرمز خودداری کنید.

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

نتیجه

تایپوگرافی یک مسئله کم اهمیتی نیستی، یک تایپوگرافی بد و نامناسب می تواند ذهن کاربر رو منحرف کند. این مهم است که تایپوگرافی خوانا، قابل فهم و روشن باشد.

امیدوارم که از مطالب لذت برده باشید.