قبل از شروع مطلب لازم است در مورد یکی از اشتباهات محاوره ای در بین طراحان توضیحاتی بدهم که مربوط می شود به استفاده از واژه 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 است.


نکته: در TypeFace هایی که نام آنها شامل چند کلمه می شود، نام فونت الزاما باید بین دابل کوتیشن "" قرار بگیرد.