Tired of the same old fonts? So are we!
Tired of the Same Old Same Old Web Safe Fonts?
Google's Making the Web Beautiful!
Web Safe FontsThe art of web design follows certain standardly accepted rules or "best practices" - and one of the main ones is in regards to "Web Safe Fonts". These are the standard fonts that are likely to be present on a wide range of computer systems. If a visitor does not have the correct font on their website, the browser will substitute an alternative font. This is generally not acceptable to most web designers and the alternative solution is to use flash, which has the fonts embedded in the file, or to create graphics for use on the web.
Serif Fonts
In general, serif fonts are mainly used for headings on the web. They tend to lose readability at smaller sizes and usually do not look good in Windows unless the ClearType preference is turned on.
font-family: 'Bookman Old Style', serif; | Bookman Old Style |
font-family: Garamond, serif; | Garamond |
font-family: Georgia, serif; | Georgia |
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; | Palatino Linotype, Book Antiqua |
font-family: 'Times New Roman', Times, serif; | Times New Roman, Times |
Sans Serif fonts are generally selected for the majority of text content on a website. They generally look good at most sizes, have a contemporary feel and render neatly on most operating systems. Of course, that is not to say that serif font's cannot be used for larger blocks of text, but again, the general rule is sans serif.
font-family: Arial, Helvetica, sans-serif; | Arial, Helvetica |
font-family: 'Arial Black', Gadget, sans-serif; | Arial Black, Gadget |
font-family: Impact, Charcoal, sans-serif; | Impact, Charcoal |
font-family: 'MS Sans Serif', Geneva, sans-serif; | MS Sans Serif, Geneva |
font-family: 'MS Serif', 'New York', sans-serif; | MS Serif, New York |
font-family: 'Trebuchet MS', Helvetica, sans-serif; | Trebuchet MS, Helvetica |
font-family: Verdana, Geneva, sans-serif; | Verdana, Geneva |
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; | Lucida Sans Unicode, Lucida Grande |
font-family: Tahoma, Geneva, sans-serif; | Tahoma, Geneva |
If you need all of the characters to line up to the same width, monospace fonts are a good choice.
font-family: Courier, monospace; | Courier |
font-family: 'Courier New', Courier, monospace; | Courier New, Courier |
font-family: 'Lucida Console', Monaco, monospace; | Lucida Console, Monaco |
Cursive is generally avoided on the web; however, the "somewhat cursive" Comic Sans MS font can be used and in fact, is typically overused
font-family: 'Comic Sans MS', cursive; | Comic Sans MS |
The list of fonts for mobile devices is even smaller, limited to Arial/Helvetica, Courier New/Courier, Georgia, Times New Roman/Times, Trebuchet MS and Verdana.
Google Web Fonts to the Rescue!
Cost: FREE! With Google Web Fonts, web designers now have hundreds of web safe fonts to choose from! Google Web Fonts is a library that is continuously growing and the setup to use the fonts only requires one line of code in teh HTML for each font you use. It is easy to set up, compatible with most modern browsers and the vast majority of modern mobile operating systems, including Android 2.2 and iOS 4.2+ (iPhone, iPad, iPod). The fonts are hosted by Google; however you are allowed to download them for your design process and for use offline. Because they are hosted on another server, it can increase download time, but it is relatively minor and can be faster than serving images. The text is also now search engine friendly where images are not.
font-family: 'Tangerine', serif; | Making the Web Beautiful! |
Websketching's New Web Content Management (WCM) System 5 for Websites, Tablets & Mobile Devices - coming soon - will support Google Web Fonts! You will simply select the Google Fonts you would like to use in the Template Designer!
Thanks Google!
Labels: content management system, fonts, Google, mobile websites, type-face, WCM, web designer