Last semester I learned some basic info about web design and coding in one of my design classes, including typography on the web. I found that typography can suffer sometimes on the web – like choosing a font for a site and finding out that on the web, it’s not that font at all. This is where web-safe fonts comes in.
I had learned about web-safe fonts in my class, and knew some of these fonts, but I never really had a “master list” of all of these fonts. So I did a little research and found that there’s quite a number of web-safe fonts I can choose from. Here’s a summary I wrote from an article by David Rodriguez on the web site Web Design for Designers discussing web-safe fonts:
Web safe fonts are a set of common fonts found on the majority of computers. This means that they will work on the maximum number of computers. These kind of fonts are particularly important to consider and use in web design.
Every computer comes with a set of fonts installed on it. These fonts are either installed by the computer manufacturer or they are an operating system’s default set of fonts.
However, not all fonts sets are the same or equal since different computers and operation systems can have different fonts installed on them. If a font used on a web page is a font that a visitor’s computer does not have, the font will appear different – and often look unflattering – on the visitor’s screen.
This is why the use of web safe fonts is important. Since they are a set of commonly found fonts on computers, using them will ensure that when the font appears on a visitor’s screen, it is that same font and not something else.
Web safe fonts also also important because if the font that appears on the screen is unattractive, and therefore, a pain to read, it won’t encourage people to read everything on the page. This will lead to the loss of visitors and/or potential customers. This is why it is important to keep your site user-friendly by making it easy for the visitor to read through it.
Here is a list of web safe fonts, listed according to their types or families.
Serif Web Safe Fonts
- Bookman
- Garamond
- Georgia
- Palatino Linotype
- Book Antiqua
- Times New Roman, Times
San-serif Web Safe Fonts
- Arial
- Helvetica
- Arial Black
- Impact
- MS Sans Serif, Geneva
- MS Serif, New York
- Verdana
- Lucida Sans Unicode, Lucida Grande
- Tahoma
Monospace Web Safe Fonts: These fonts have characters that all have the same width. They are mainly used for displaying code or to show data.
- Courier
- Courier New
- Lucida Console
- Monaco
I found it quite helpful to learn all the different web-safe fonts that are available from this bit of research. I hope to keep ‘em in mind next time I’m designing a web site.
Hey guys, long time no comment.
I was just wondering if you had looked into the ‘@font-face’ option that CSS provides to use more custom font faces that are still selectable text, and if so, how well has it worked? If you have tried it I would love to know your experience.