فونت های ایمن در وب (Web-Safe Fonts)

فونت های ایمن در وب (Web-Safe Fonts)

در این مقاله می خوانید:

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

آشنایی با طراحی فونت

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

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

در ادامه فونت هایی که در وب قابل دسترس هستند را نام خواهیم برد. با این حال : منابع آنلاین دیگری نیز وجود دارد که می توانید از آن ها استفاده کنید. در سایت Ampsoft.net فونت هایی که در ویندوز و مکینتاش مشترک هستند را می توانید ببینید. همچنین سایت Codestyle.org فونت های Monospace موجود در سیستم های مختلف را به تفضيل شرح داده است.

البته در ایران معمولا از فونت های ایران سنس و B Yekan استفاده می شود.

فونت های موجود بر بستر وب

فونت های بر بستر وب فونت هایی هستند که طراحان آن ها را بصورت Local یا بر روی Host به صفحه پیوست می کنند و کاربران دیگر نیازی به دانلود فونت ندارند. استفاده از این فونت ها ساده است. برای پیوست کردن فونت باید در CSS دستور زیر را اضافه کنید:

مرورگرها برای این فونت ها از فرمت های گوناگونی استفاده می کنند. به همین جهت شما باید فرمت را اضافه کنید تا اطمینان حاصل کنید که فونت موردنظر شما به درستی در تمام مرورگرها نمایش داده می شود. این فرمتها عبارتند از: Embedded Open OpenType ،TrueType Web Open Font Format ،Type و SVG. کد زیر نحوه استفاده از این فرمت ها را نشان می دهد.

برای اضافه کردن فونت با دستور font-face@ باید فایل فونت خود را با فرمت های مناسب بر روی Server خود قرار دهید تا مرورگرهای مختلف بتوانند آن را دریافت کنند. در سایت های www.webfonts.info و www.google.com/webfonts می توانید فونت های رایگان را جهت قرار دادن در سایت خود دریافت کنید.

فونت های ایمن در وب

فونت های ایمن در وب

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

فونت های Sans-serif در وب

فونت Arial به دلیل اینکه در تمام ويندوزها وجود دارد، یکی از متداولترین فونت های ایمن در وب محسوب می شود. اما این فونت در متونی که اندازه قلم آن ها کوچک باشد قابل خواندن نیست و برای بدنه اصلی صفحه انتخاب مناسبی نمی باشد.

اما می تواند برای تیترها گزینه خوبی باشد. کاربران مکینتاش از فونت Helvetica استفاده می کنند این فونت فونت خوبی است اما در فونت های ویندوز وجود ندارد. با اینکه شما در CSS می توانید فونت های دلخواه خود را انتخاب کنید. اما احتمال اینکه اکثر کاربران شما نتوانند صفحات را با فونت مطلوب شما ببينند زیاد است.

فونت Helvetica با اینکه در محیط ویندوز وجود ندارد اما به عنوان بهترین فونت Sans – serif شناخته شده است. به خصوص در Linux کاربرد زیادی دارد.

فونت های Verdana و Trebuchet ms برای بدنهی صفحه، گزینه های بهتری هستند اما به دلیل نوع طرحشان برای تیترها مناسب نیستند. خوانایی فونت Trebuchet ms كمتر است اما گاهی نسبت به سایر فونت ها گزینه بهتری می باشد، شاید دلیل آن این است که در صفحه وب زیاد از آن استفاده نمی شود.

برای متون فارسی بهترین فونت ها در سیستم عامل Windows عبارتند از: Arial ،Tahoma ،Times New Roman.

در سال های اخیر، استفاده از انواع مختلف فونت Lucida متداول شده است. دلیل آن این است که شرکت Apple نه تنها در مکینتاش بلکه در سایت خودش نیز آن را به عنوان فونت پیش فرض در نظر گرفته است. با اینکه فونت Lucida Grande در محیط ویندوز وجود ندارد اما Lucida Sans Unicode به اندازه ای متداول است که به عنوان اولین گزینه در فونت ها در نظر گرفته می شود.

فونت Lucida در سیستم های Unix نیز مورد استفاده قرار می گیرد. این بدان معناست كه سایت هایی که از انواع مختلف فونت Lucida استفاده می کنند تا حدودی در هر سه محیط های ويندوزی یكسان نمایش داده می شوند. دو فونت دیگری که در وب مورد استفاده قرار می گیرند، . Tahoma و Geneva است اما آن ها را با دقت به کار ببرید.

فونت های ایمن در وب

فونت های Serif در وب

فونت های Serif با اینکه در چاپ بیشتر مورد استفاده قرار می گیرند، اما در وب نیز تاحدی کاربرد دارند. اگر از فونت های Serif استفاده می کنید توجه داشته باشید که سایز آن ها را به اندازه کافی بزرگ در نظر بگیرید تا شکستگی ایجاد نشود و قابل خواندن باشد. فونت Georgia به خصوص در اندازه ۱۲ پیکسل و بالاتر، یکی از بهترین فونت های ایمن در وب می باشد. زمانی که روی متون قدیمی کار می کنید یا می خواهید از مقالات چاپ شده کپی کنید، می توانید از این فونت استفاده کنید.

یکی دیگر از فونت های متداول Serif فونت Time New Roman است. این فونت نسبت به فونت Georgia اهمیت کمتری دارد، اما مانند Arial می توان آن را به عنوان اولین انتخاب در نظر گرفت. شهرت این فونت به دلیل گستردگی آن در سیستم های مختلف است.

یکی دیگر از فونت های متداول، فونت Palatino است. این فونت نسبت به سایر فونت ها از اهمیت کمتری برخوردار است اما به صورت پیش فرض در سیستم عامل ویندوز (با نام Platino Linotype) نصب شده است و در سیستم مکینتاش نیز به صورت Classic با Iwork در دسترس است.

فونت های مناسب برای تیترها

سایر فونت های ایمن در وب معمولا یا برای تیترها مناسب هستند و با فونت های Monospace هستند و زمانی که عرض تمام کاراکترها باید يكسان باشد مورد استفاده قرار می گیرند. مثلا برای اضافه کردن کدها به صفحه خود، می توانید این نوع فونت ها را انتخاب کنید. فونت های Arial Black و Impact برای تیترها مناسب هستند با این حال باید در استفاده از آن ها دقت کنید. شكل توپر Bold فونت impact بسیار نامناسب است و در تمام مرورگرها نمایش داده نمی شود.

بعضی از مرورگرها به طور پیش فرض تیترها را به صورت Bold نمایش می دهند که با استفاده از css می توان آن ها را کنترل کرد. فونت هایی که در بالا نام برده شد، بهتر است که در اندازه های بزرگ مورد استفاده قرار گیرند. یکی از فونت های خوب Monospace فونت Courier است. توصیه می شود برای Linux از Courier استفاده کنید. اگر به فونت های Monospace نیاز دارید که کمتر حالت «کامپیوتری داشته باشند، دو فونت (Lucida Console در ویندوز) و (Lucida Sans Typewriter یا Monaco در مکینتاش) فونت های مناسبی هستند.

فونت دیگری که در اینجا ارزش ذکر کردن دارد، فونت Comic Sans Ms است که برای طراحان تازه کار انتخاب خوبی است. این فونت خواناست اما ظاهر نامتعارف و عجیبی که دارد باعث شده زیاد از آن استفاده نشود.

ویژگی Anti-Aliasing

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

هموار بودن یا نبودن لبه فونت ها در قسمت body مشكل زیادی ایجاد نمی کند. بعضی از افراد فونت هایی با لبه های صاف و برخی فونتهایی با لبه های ناصاف را ترجیح می دهند. هر دوی این فونت ها خوب هستند اما تا زمانی که سایز قلمها زیاد بزرگ نباشند. زمانی که با متون درشت تر مواجه می شویم (به خصوص در تیترها) متون ناهموار زیبایی کمتری دارند.

متون aliased با همواره شکل ساده شده فونت های اصلی هستند که به صورت Bitmap سیاه و سفید در آمده اند. در متون ناهموار (Antialiased) سعی بر اینست که خمیدگی ها و یا برآمدگی های نرمی که در فونت اصلی وجود دارد. با استفاده از پیکسل های خاکستری رنگ و یا رنگی در لبه فونت از بین برده شود.

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

فونت های ایمن در وب

استفاده از تصاویر برای متون

محدودیت هایی که در فونت های ایمن در وب (Web-Safe) وجود دارد، طراحان را وادار کرده است که به دنبال روشهای جایگزین برای ایجاد متن در صفحات وب باشند. استفاده از تصاویر به خصوص تصاویر GIF و گاهی فلش به دلیل وکتور بودن و ماهیت Scalable آن ها، بسیار مورد استفاده قرار گرفتند.

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

اما استفاده از تصاویر مشکل هایی را نیز ایجاد می کند. از جمله:

  • بعضی از مرورگرها اجازهی تغيير اندارهی متون گرافیکی را در مرورگرها نمی دهند.
  • به دلیل پایین بودن دقت تصویر در وب، تصاویر گرافیکی به صورت پیکسلی و باکیفیت پایین نمایش داده می شوند.
  • با اینکه متونی که به روش GIF ایجاد می شوند از نظر اندازه فایل کوچک هستند، اما باز هم نسبت به متونی که براساس HTML طراحی می شوند، بزرگتر هستند.
  • افرادی که به جای مرورگرها از صفحه خوان ها استفاده می کنند، نمی توانند متون گرافیکی را ببینند (هر چند که شما از ویژگی Alt برای رفع این مشکل استفاده کرده باشید).
  • متون گرافیکی قابلیت Copy و Paste شدن را ندارند.
  • متون گرافیکی توسط موتورهای جستجو خوانده نمی شوند.
  • ایجاد تغییر یا بروز رسانی متون گرافیکی دشوار است. اگر بخواهید یک کلمه را تغيير دهید باید تصویر اولیه را دوباره ایجاد کنید سپس آن را Export و آپلود کنید. اگر سایز تصویر نیز تغيير کند باید سند HTML را ویرایش کرده و دوباره آپلود کنید.

بیشتر بخوانید: ویژگی متن جایگزین یا ALT Text در تصاویر و تاثیر آن در سئو

بهتر است از تصاویر گرافیکی به عنوان آخرین راه چاره استفاده شود. برای لوگوی یک شرکت به جای فونت باید از تصویر استفاده کرد. اما هرگز، برای بدنهى (Body) صفحه از تصاویر استفاده نکنید. سایت های بسیاری در بدنه صفحه از تصویر استفاده می کنند، اما تمام آن ها کاربران را خسته می کنند.

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

بعضی ها معتقدند که این امر باعث «ایمن» بودن سایت است اما در حقیقت فاقد یکی از مهمترین مزایای وب است:

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

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

تیم تحریریه کلیک اول

نویسنده در بلاگ کلیک اول

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

0 دیدگاه ثبت شده است.

در بحث و گفتگوی مربوط به این مطلب شرکت کنید!

آکادمی کلیک اول

دریچه ای به سوی آموزش های رایگان در فضای دیجیتال مارکتینگ

آموزش پایه ای کار با ابزار گوگل سرچ کنسول

دوره آموزشی گوگل سرچ کنسول (Google Search Console)

سئو و بهینه سازی

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

02:21:00
آموزش پایه ای کار با گوگل آنالیتیکس

دوره آموزشی گوگل آنالیتیکس 4 (Google Analytics 4)

سئو و بهینه سازی

گوگل آنالیتیکس (Google Analytics) یکی از ابزارهای پرکاربرد گوگل بوده و وظیفه آن بررسی آمار سایت ها و تحلیل آن هاست..

02:43:00
آموزش کار با افزونه پرکاربرد یواست

آموزش کار با افزونه پرکاربرد یواست (Yoast)

دیجیتال مارکتینگ

یواست سئو (Yoast SEO) یک افزونه وردپرس است که به عملکرد بهتر سایت در موتورهای جستجو مانند گوگل کمک می کند. همچنین ابزارهایی را در اختیار شما قرار می دهد تا محتوای خود را به بهترین استانداردهای سئو و خوانایی برسانید.

00:22:06