Learn Web designing
Web design Guidelines
Layout and Content Presentation
Using Web-Friendly Fonts
To be a user friendly Web Page, choosing the right typeface is very important, because the font you choose should be easily readable for your readers. Aside from this, there are also important usability concerns. For example, some font types are more easily readable than others, and some are more widely available.
Before Choosing the font you have to see that :
- It fit the character of your site,
- Easy to read on a computer screen, and
- Widely available across many browsers and operating systems.
What are Web safe fonts?
Practically every personal computer has a set of fonts installed. These fonts are usually put there by the computer manufacturer or are the default sets of fonts for the operating system that computer is using. It's possible to install additional fonts on your own.
However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference. When you are designing a Webpage, you need to keep this in mind. If you decide to use a font on your page that a visitor doesn't have, that font will render differently (and often unattractively) on the visitor's machine.
So, how do you make sure that your fonts will look good on the largest number of computers out there? Easy: use Web safe fonts. As computing evolves, considerations for the Web have taken effect for modern operating systems and Web browsers. Among these considerations is a list of Web safe fonts that Web designers can use to make sure their fonts render properly. Web safe fonts are a set of highly common fonts that come installed on just about every computer out there. Some (really) older computers may not have a few of the fonts that we consider Web safe today, but they are a minority.
Why to use Web Safe Fonts?
Using Web safe fonts is just one part of a larger set of design practices that keep your site user friendly. Don't strain a reader's eyes, don't make information difficult to find, and make sure they can progress through your site and content without having to think about it. (You can read a detailed article about building your typography here.) If at any point someone looks at your site and takes even a millisecond to think, "Ugh, that's some ugly text," you've jarred the experience. Ideally, the entire encounter with your site should be smooth as silk, and using a Web safe font is a big part of attaining that goal.
Who should use Web Safe Fonts?
Every Web designer should use Web safe fonts. There are some cases where you will want to use a special, non-Web-safe font, but these cases are rare (and we'll discuss cases like this in a bit). You want to make sure your fonts are always easily read by your users. By keeping your fonts readable with Web safe fonts, you retain readership and make your site more accessible to a wider range of people.
Type of Web Friendly Fonts.
There are basically two types of fonts: serif and sans serif. Serif fonts are those that have fine cross-lines at the extremities of the letter. Sans serif ("sans" being the French word for "without") are fonts that donít have serifs. The most common serif font is probably Times New Roman. Arial is an example of a common sans serif font.
Letís go briefly through the most popular font types and evaluate their availability, readibility and character:
- Availability: Thoroughly available. It is probably the most common sans serif font. It is the default font for Windows, and it first shipped as a standard font with Windows 3.1.
- Readability On Screen: Not the worse but definetely not the best, especially at small sizes, when it becomes too narrow and the spacing between characters too small.
- Character: Has a streamlined, modern look but can also be plain and boring.
*For Mac users, the equivalent of Arial is Helvetica.
Times New Roman:
- Availability: Thoroughly available. It is probably the most common serif font. It is the default font for web browsers. It was first shipped as a standard font with Windows 3.1
- Readability On Screen: Acceptable for font sizes of 12pt. and up, but terrible for smaller sizes.
- Character: Serious, formal and old fashioned.
* For Mac users, the equivalent of Times New Roman is Times.
- Availability: A widely available sans serif font, Verdana was first shipped with Internet Explorer version 3, when the exponential growth of the Internet demanded a new font that was easy to read on the screen.
- Readability On Screen: Exceptional. Itís wide body makes it the clearest font for on-screen reading, even at small sizes.
- Character: Modern, friendly and professional.
- Avaliability: Good. It is a serif font introduced by Microsoft with Internet Explorer version 4, when the need for a serif font which much better readability than Times New Roman became evident.
- Readibility On Screen: Very good. It is the best serif font for on-line reading, since it was specifically designed for that purpose.
- Character: Modern, friendly and professional.
Microsoft has also popularized two more fonts: Comic Sans Serif and Trebuchet.
Comic Sans Serif
Comic Sans Serifwas launched with Internet Explorer verion 3 and mimics the hand writing used in comics. It is easy to read and is informal and friendly, but it is not considered appropriate for more serious, professional sites.
Trebuchet is another sans serif font, similar to Arial but with more character, although it can be difficult to read in small sizes.
Finally, we can mention Courier New, a serif font that was widely popular with old, mechanical typewriters, and that is now used only to present simulated computer code (if you need to present snipets of sample HTML code in your web pages, this is the font to use).
Therefore, from a usability perspective, the clear winner is Verdana. If you are inclined to use a serif font, Georgia is the best option. Arial remains a good option for specific parts of text, like headlines and titles, where a different font must be used and you can use larger sizes.
Choosing the right page width