Thursday, November 24, 2011

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 Fonts
The 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
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
Monospace Fonts
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" Fonts
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
Mobile Safe Fonts
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: , , , , , ,