Web Browsers and Font Types
As a web designer sometime my clients ask me to use certain font type in their web sites. I try to explain the difference between printed media to web. When they ask me to use a particular font type I ask them do they have that font, do they know the name of it and can they supply to me. They always surprise for these questions. Interesting enough most of them think I should have that font on my computer. Of course I have many fonts in my library (about more than 9000 windows type and mac fonts). When somebody needs a font I can look at my library, if I have it, sure I can use it.
If I do not have it, either clients need to supply to me or I buy the font for them online like fonts.com web site.
Fonts are very important in printed media. Sure if you have brochure, business card, letterhead, flyer, or a menu you should use it there.
Can we use the font same way in the web? Not really.
Here are the some reasons:
1. Web browsers do not display all fonts correctly.
2. Computers installed with different operating systems, or versions of OS's, have different fonts installed.
3. You can not install the font a web user's computer without permission.
4. Not every font display correctly on the web because of web typography.
5. Fonts may look odd on the screen in different sizes.
Let me explain these issues little bit more. When I say web browsers, there are so many choices that people use to surf on the net.
Even though many web users choose Internet Explorer, there are many other web browsers are using on the net such as Mozilla, Safari, Opera, Netscape, Camilo, Shiira and so on..
It is a wise thing to do is using a particular web safe font for minimal error.
This is the standard list of “Web-safe” fonts, with the exception of symbol and dingbats fonts.
* Arial
* Arial Black
* Comic Sans MS
* Courier New
* Georgia
* Impact
* Times New Roman
* Trebuchet MS
* Verdana
* Andale Mono
* Helvetica
This is the list of 12pt web safe fonts as an image below
Click here to see 16pt web safe fonts
When we specify the font name in the website, give a color and size even with CSS, still web users may decide to see different size, or if that font is not installed in that computer they will see the website with their default font. So that means I can spend hours choosing the perfect combination of typefaces that has a harmony with the design, if the web user want all text to be displayed in 18px Helvetica, there is absolutely nothing I can do about it.
The show to font type perfectly on the web can be done in couple ways.
1. Using flash, if the all text or entire site made with flash you can show the font more less correctly.
2. Using image, if the text are displaying as an image, all the web users can see correctly, but the pages can download more slowly.
3. Using pdf format pages. It is a common way to use detail informations, catalogs, brochures and flyers display as pdf files.
I can embed the your favorite font in it and the font can display as it is. Altough entire website can not be done as pdf pages, it is still good alternative to show more information with desirable fonts.
I suggest to my clients to choose from one of the font such as Arial in the list of common web safe fonts.
The most important thing is the web being readable. In my opinion readability is the critical issue. If the user can not read the text it is not really matter what color the font is, bold or italic and what type is.
You need to stick with a font that easy to read and at least 12pt size for a good viewing.
Here is the font chart
Never forget that web browsers don't display all the fonts same way.
I can use CSS, tell the browser what needs to show, but still browsers may behave slightly different.
Example CSS code:
.purple {
color: #481b72;
font-size:16px;
font-weight: 900;
font-family: Arial, Helvetica, sans-serif; }
This should like this on the web:
This is a bold written text example
here
When we buy or build computers, we use many fonts already installed in the machine. Also many programs install extra fonts in the computer.
Desktop Windows-based machines will also use fonts stored by such word processors as WordPerfect & Word.
Depending on operating system and softwares that you use, your computer may have hundreds of fonts in it. Viewing these fonts as it is still may have differences on the web. Do not expect print results on the web. It is totally different.
Many Windows fonts simply do not exist in Mac machines. Linux based computers show the fonts quite differently.
So stay with common based font types to reach more people on the web.
The Windows XP web browser, handles more fonts by itself than the browser in earlier versions of Windows.
You can read complete list of windows fonts below:
Click to read the common font TrueType list installed in PC windows 98, 2000, XP
Here is the Mac and Windows standard font names:
Standard Fonts installed by Windows XP and MAC 10.5
Microsoft Office 2003 font names:
Microsoft Office 2003 Professional Edition font list
Click the link below to see common web safe computer font names:
Common fonts used by Windows, Mac and Linux computers
Click to the link below to see common fonts in the web and print media:
Web safe fonts sample list
Copyright © Written by NUR KARLICA IVERSON , April 2008
Homepage
Site Map