Using Web Safe Fonts

web safe fonts

The font-family property hold multiple font names as a “fallback” system, to ensure maximum compatibility between browsers and operating systems. If the browser does not support the first font, it tries the next one.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:

Bike Typography

Example


p{
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

There are some mostly used font combination, organized by generic family.

Sans-serif Fonts

Arial, Helvetica, sans-serif
"Arial Black", Gadget, sans-serif
"Comic Sans MS", cursive, sans-serif
Impact, Charcoal, sans-serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Tahoma, Geneva, sans-serif
Verdana, Geneva, sans-serif

"Trebuchet MS", Helvetica, sans-serif

Serif Fonts

Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Times New Roman", Times, serif

Monospace Fonts

"Courier New", Courier, monospace
"Lucida Console", Monaco, monospace

Cursive and Fantasy Fonts

There is only one cursive font on Windows and Macintosh, but not on Linux and that is:

Comic Sans MS

Smart Phones and Mobile Devices

If you are gonna designing web application for mobile devices, you have less choice. Actually, no common fonts are available for Android devices – instead you should use @font-face method to import the fonts. And for iPhone, iPod, and iPad devices, the following common fonts include:

Arial
Courier
Courier New
Georgia
Helvetica
Palatino
Times New Roman
Trebuchet MS
Verdana

Leave a Reply

Your email address will not be published. Required fields are marked *

CSS measuring Units
CSS Web Design

Measurement Units in CSS

CSS offers a number of different units for expressing length. It includes absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You required these values while specifying various measurements in your stylesheet. It supports various measurement units which are listed below: Using em This measurement […]

Read More
Web Design
Web Design

Upcoming Web Design Trends of 2023

It’s better to stay with time means it’s good idea to update your site to modern web design trends. Every internet folks like responsive design and beautiful themes. If any website was created some years ago i hope it’s probably looking very bad and i say it “Plastic Design” but in present time flat design […]

Read More
gravatar
Tutorials Web Design

Integrating Gravatar with PHP

Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Gravatar was started by Tom Preston-Werner but it is now owned by “Automattic” which is the company behind WordPress. Today, there are a many of people using this service. Because […]

Read More