۲۰ بایدونباید در تایپوگرافی تأثیرگذار وب‌سایت

[ElmiPedia.com]

در این مقاله ۲۰ بایدونباید در مورد تایپوگرافی تأثیرگذار وب‌سایت به شما ارائه می‌شود. این موضوع بخش مهمی از طراحی وب‌سایت است که اغلب نادیده گرفته می‌شود.

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

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

بین فونت‌های serif و sans serif زیاد پرش نکنید

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

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

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

از فونت‌های سنس serif برای حجم زیادی از متن استفاده نکنید

فونت‌های سنس serif برای یک ظاهر تمیز و یکنواخت عالی هستند اما بهتر است وقتی متن زیادی (بیشتر از ۱۰ خط) را در کنار هم قرار می‌دهید، فونت خود را به یکی از فونت‌های serif تغییر دهید؛ این کار سبب افزایش خوانایی می‌شود، زیرا منحنی‌ها و اشکال این فونت‌ها، چشم را بهتر از خطوط مستقیم و یکنواخت فونت‌های sans serif هدایت می‌کنند.

از جایگزینی چندباره‌ی فونت‌هایی مانند Cufón و siFr بپرهیزید

فونت‌های Cufón و siFr تنها دو مورد از راه‌های مختلفی هستند که می‌توانید برای جذاب کردن ظاهر سایت، آن‌ها را در مرورگر جایگزین کنید، اما از آن‌ها عاقلانه استفاده کنید. جایگزینی فونت در تمام صفحه وب، موجب به‌هم‌ریختگی مطالب می‌شود، حواس بازدیدکننده را پرت کرده و به او امکان خواندن مطالب را نمی‌دهد. به شما پیشنهاد می‌کنم از تیترها و فراخوانی‌ها برای جایگزینی فونت استفاده کنید و در متن اصلی از فونت‌های رایج و مناسب برای وب استفاده کنید.

از تأکید زیاد روی مطالب بپرهیزید

یک نویسنده‌ی خوب بدون استفاده از Bold و Italic و Underline نیز می‌تواند روی مطالب تأکید کند. اگر در متن خود از این سه مورد زیاد استفاده کرده‌اید، بهتر است در کار خود تجدیدنظر کنید. اگر عاقلانه روی نکات مهم و خاص متن تأکید کنید، ظاهر و خوانایی مطالب چندین برابر بهبودمی یابد.

استفاده از پشته‌ی فونت در کدهای css خود را فراموش نکنید

در زمان ایجاد وب‌سایت ممکن است برخی برای مطالب خاص، تمایل داشته باشند از فونت Helvetica استفاده کنند؛ اما باکمی بررسی متوجه می‌شویم که این فونت زیاد رایج نیست؛ بنابراین متونی که با این فونت نوشته شوند برای افراد زیادی نمایش داده نمی‌شود، در این موارد بهتر است از پشته فونت استفاده شود. به زبان ساده این کار به شما امکان استفاده از هر نوع فونتی را که بخواهید، می‌دهد، حتی اگر بازدیدکننده فونت موردنظر را در رایانه خود نداشته باشد. برای مثال اگر در کد css خود داشته باشید “font: Helvetica, Arial, sans-serif”، درواقع شما می‌خواهید فونت Helvetica را برای متون نمایش داده شود. اگر نمایش آن در رایانه کاربر ممکن نباشد، فونت Arail و در غیر این صورت نیز فونت sans-serif برای کاربر نمایش داده می‌شود.

در تمام متن از حروف بزرگ استفاده نکنید، در صورت نیاز از تبدیل متن یا text-transform استفاده کنید

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

استفاده از جملات تأکیدی در مواقع لزوم را فراموش نکنید

نوشتن مطالب، برای مثال با فونت Cufón، به تعداد زیاد در یک صفحه بدون استفاده از جملات تأکیدی ممکن است شمارا نامرتب و بی‌سواد جلوه دهد. بله درست است، استفاده از جملات تأکیدی به نمایش درست و مناسب متون کمک می‌کند. این کار راحت‌تر از چیزی است که فکر می‌کنید. می‌توانید یک لیست از جملات تأکیدی را با مراجعه به آدرس w3.org دریافت کنید.

تأکید می‌کنم، هرگز از comic sans یا papyrus استفاده نکنید

برای تمامی اشکال طراحی مانند وب، چاپ که از تایپوگرافی استفاده می‌کنند، این‌یک قاعده کلی که هرگز از comic sans و papyrus استفاده نشود؛ زیرا همان‌طور که می‌دانید استفاده از IE6 قدیمی و منسوخ‌شده و کسی علاقه‌ای به استفاده از آن ندارد.

ارتفاع خط یا line heigh را به نفع خود بکار بگیرید

استفاده از ارتفاع خط پیش‌فرض متون برای شما مشکل ایجاد خواهد کرد زیرا فاصله کافی بین خطوط وجود نخواهد داشت و به شما اجازه نمی‌دهد با یک گرید سیستم مناسب کارکنید (مخصوصاً در پایین صفحه). بهتر است ارتفاع خطوط رابین ۶-۵ پیکسل بیشتر از سایز فونت انتخابی خود، قرار دهید. به‌طور مثال اگر سایز فونت خود را روی ۱۳px قرار می‌دهید، ارتفاع خطوط را ۱۸px قرار دهید.

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

در یک پس‌زمینه سیاه، مناسب‌ترین رنگ برای نوشته‌ها سفید (#F8F8F8) و در یک پس‌زمینه سفید، مناسب‌ترین رنگ خاکستری تیره (#۲۵۲۵۲۵) است. این باعث می‌شود کنتراست به حداقل برسد و به چشم خوانندگان فشار وارد نشود.

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

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

از یک سلسله‌مراتب مناسب برای صفحات خود استفاده کنید

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

از گرید سیستم استفاده کنید

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

تا حد امکان از فضای خالی استفاده کنید

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

تا حد امکان از وسط‌چین کردن متون خودداری کنید

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

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

در طراحی وب‌سایت این نکته را به خاطر داشته باشید، اگر بدنه‌ی متن سیاه و متون نوار کناری خاکستری باشند، مطلب شما بیشتر به چشم می‌آیند و راحت‌تر از متون نوار کناری خوانده می‌شوند. این مطلب برای مطالب مزاحم و سایر موارد غیرضروری که می‌خواهید کمتر از متن اصلی به چشم بیایند نیز مؤثر است.

مطمئن شوید در مورد فاصله‌گذاری مناسب حروف عناوین و استفاده از آن اطلاعات کافی دارید

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

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

استفاده از مهارت‌های مناسب تایپوگرافی، به بازدیدکنندگان کمک می‌کند مطالب سایت شمارا راحت‌تر بخوانند و به بحث سلسله‌مراتبی که پیش‌تر در مورد آن صحبت شد، کمک می‌کند؛ زیرا اگر از کد ۱٫۲۵em در css استفاده کنید و متن اصلی شما ۱۲px باشد، فونت موارد کم‌اهمیت و پاراگراف‌ها ۱۲۵% بزرگ‌تر خواهد بود. اگر مانند تصویر زیر به نحو مناسب از مهارت‌های تایپوگرافی استفاده کنید، گویی از موانع گذر کرده‌اید.

چیزی را فراموش کرده‌ام؟

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

منبع: علمی پدیا | آموزش طراحی و بهینه سازی سایت