When designing for the web, it is recommended to make sure that the web site will look good on most, if not all, of the computers that will access it. Most of the web users use either Windows or Mac OS to surf the web. Both operating systems come with pre-installed fonts out of the box.
The table below lists web-safe fonts that are common for both Windows and Macintosh. The Windows fonts are included with Windows XP and later, and the Mac fonts are included with Mac OS X. I am not going to mention Windows 98/95 or Mac OS 8/9 as these are legacy systems and the number of users using them for web is shrinking on a daily basis.
Sans-serif Fonts
| Font | Sample | Recommended CSS Stack |
|---|---|---|
| Arial | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Arial, “Helvetica Neue”, Helvetica, sans-serif |
| Arial Black | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Arial Black, sans-serif |
| Impact | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Impact, sans-serif |
| Lucida | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Lucida Sans Unicode, Lucida Grande, sans-serif |
| Tahoma | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Tahoma, Geneva, sans-serif |
| Trebuchet MS | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Trebuchet MS, Helvetica, sans-serif |
| Verdana | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Verdana, Geneva, sans-serif |
| MS Sans Serif | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
MS Sans Serif, Geneva, sans-serif |
Serif Fonts
| Font | Sample | Recommended CSS Stack |
|---|---|---|
| Georgia | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Georgia, serif |
| Palatino | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Palatino Linotype, Palatino, serif |
| Times New Roman | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Times New Roman, Times, serif |
| MS Serif | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
MS Serif, New York, serif |
Special and monospaced fonts
| Font | Sample | Recommended CSS Stack |
|---|---|---|
| Comic Sans MS | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Comic Sans MS, cursive |
| Courier | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Courier New, Courier, monospace |
| Lucida Console | Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Lucida Console, Monaco, monospace |
Symbol fonts
| Font | Sample | Recommended CSS Stack |
|---|---|---|
| Symbol | Lorem |
Symbol |
| Webdings | Lorem |
Webdings |
| Zapf Dingbats | Lorem |
Zapf Dingbats |
Web Development has always been a passion of mine. I’m always trying to learn more and get better. Thanks.
Thanks for creating this great informational resource.
Cheers for the great article – I loved reading it! I always love this blog.
Superb article, Saved to bookmarks – need to link it to my friends
Pingback: How to make killer email designs