دسته بندی فونتها و جایگاه هر کدام در طراحی وب

[طراحی سایت]

قبل از شروع این مقاله لازم است در مورد یکی از اشتباهات رایجی که در بین طراحان وب پیش می آید توضیحی بدهیم که مربوط می شود به استفاده از واژه Font بجای TypeFace .
تفاوت این دو کلمه که معمولا بجای هر کدام از واژه فونت میگویند به شرح های زیر است:

TypeFace: به خانواده ی یک فونت می گویند،بعنوان نمونه: Times یا Tahoma یا Arial

Font: به یک زیر شاخه از یک شاخه بزرگ گفته میشود، مثلاً " Tahoma 12px bold " یک فونت است و " Tahoma 12px normal " یک فونت جداگانه و اینکه هر دو را فونت Tahoma بخوانیم کاملاً غلط است.

هر TypeFace می تواند شامل پنج مدل مختلف فونت باشد که با واژه Generic Font Name شناخته می شوند:
فونت های Serif : این گونه فونت ها دارای گوشه در اطراف کاراکترهای خود شان میباشند. این گونه فونت ها معمولا برای نوشتن جملات طولانی به کار می رود، اما در صفحات وب که دارای متون طولانی می باشند، بدلیل اینکه وضوح تصویر مانیتور نسبتاً به صفحات چاپی از کیفیت پایین برخوردار است،به همین دلیل اینگونه فونت ها زود باعث خستگی چشم کاربران می شود.
مانند فونت Times.

فونت های Sans-Serif: این گونه از فونت ها دارای گوشه در اطراف کاراکترها نیستند و بلعکس دارای گوشه های صافی هستندو توصیه ما به شما این است که برای نمایش متن های طولانی مثل مقالات در صفحات وب، از این مدل فونت ها استفاده کنید ، زیرا بدلیل جزئیات کمتر در کاراکترها ،به ندرت باعث خستگی چشم کاربر می شوند.
مانند فونت Arial

فونت های MonoSpace : در این نوع فونت ها عرض یا width تمام خطوط کاراکتر ها با هم مساوی هستند. این مدل فونت ها برای جدا کردن بمنظور تاکید در قسمتی از کلمات که دارای متن طولانی هستند مناسب است
مانند فونت Courier

فونت های Cursive : این مدل فونت ها که بیشتر شبیه فونت های دست نویس یا HandWriting هستند و از این مدل فونت ها بیشتر بصورت سلیقه ای و برای جملات کوتاه بکار میرود
مانند فونت Comic Sans

فونت های Fantasy : این مدل فونت ها معمولا دارای کاراکترهای برجسته و عرض یکسان در خطوط مختلف کاراکترها هستند و معمولا برای تیترهای بخصوص بکار میرود.
مانند فونت Impact

وقتی که ما می خواهیم برای مشخص کردن Typeface متن در استایل از font-family استفاده می کنیم، می توانیم مشخص می کنیم که ترجیحا از چه نوع فونتی در Typeface استفاده شود و Browser در هنگام رندر کردن استایل سعی می کند ابتدا Generic Font Name که مشخص کرده ایم را لود کند، در صورتیکه فونت مورد نظر در Typeface مربوطه وجود نداشت، آنگاه فونت پیش فرض را برای Typeface لود می کند.

بعنوان نمونه:
p.one {font-family:arial, verdana, sans-serif;}

در این مثال برای Browser مشخص می کنیم که ابتدا در سیستم بدنبال خانواده arial بگردد و اگر وجود نداشت، بدنبال خانواده verdana بگردد و در هر دو خانواده از فونت در صورت وجود، از فونت های sans-serif استفاده نماید
p.two {font-family:times, “times new roman”, serif;}

در این مثال اولویت اول با خانواده times و در صورت عدم وجود این خانواده ازاین مدل فونت ها، اولویت بعدی با خانواده "times new roman" است و از هر دو TypeFace اولویت با فونت های serif است.