Font Rendering:

Google Web Font

Monica Shukla | Sr. Consultant-Visual Design GlobalLogic Inc.

As web designers we always try to explore new dimension to present the web based visual content in graphical and simplest way. While doing a project I came along with a small yet significant subject of typography and Google web font use. It is said that web design without typography is like an orange without its peel. Often we overlook this important feature, whereas it covers effective web design and identity of the page. Typography leaves you with the option of bringing together creativity with effective communication when chosen wisely. While working on the visual and design aspect for my project, Client came-up with the idea of using Google web Lato san-serif typeface font. Lato consists of five weights plus corresponding italics including a beautiful hairline style. We went ahead using it as Google web font is becoming widely a phenomenon. Many designers are taking advantage of using these fonts mostly sans-serif fonts. But while designing the website I experienced the positive yet some downbeat side of it.

Advantages of using Google Web Font

Completely accessible: The encouraging part of it is that these fonts are free and it has their own Google Web Fonts API where one can choose fonts from their library. By clicking http://www.google.com/webfonts/and it shows font in different settings.

CSS: No JavaScript or Flash, its SEO friendly and provides variety of serif and sans serif fonts for headings and subheading. Google website makes it easy to generate the needed code for any number of fonts and styles and just by adding a line in CSS file.

(Using Lato as an example):

@import url(http://fonts.googleapis.com/css?family=Lato); CSS file need to be sure to define all the situations: For example. Strong, B{ Font-family: Lato, san serif; Font-weight: 400; } Different weights that Exo comes in (100, 200, 300, 400, 500, 600, 700, 800, 900)

Always need to add them in the comments and include the browsers default san-serif face as a backup, in case there is something wrong with Googles servers.

Shortcoming of Google Web Font

While viewing the result across the basic browsers i.e. Chrome, Firefox, Safari and Internet Explorer in Win7, WinXP, WinVista, IOS and MacOSX system noticed some interesting grey areas of Google web font. Web fonts can sometimes look great on one machine, but awful on another, due to differences in rendering not just between browsers, but also with the same browser between operating systems.

Rendering: The major concern which came into view is the rendering issue;
this includes font spacing, format weight and font size varying from browser to browser in operating system. As Lato is a True Type font and it appears neat and readable when used for header or as sub-header. But when used as running text it appears so thin and transparent appears dizzyingly blurry. It gives tough time in fixing content/paragraphs from browser to browser. Older versions of Internet Explorer is unable to handle this level of sanity, IE7 and IE8 ignore the weight and style assertion and simply display the regular version of the font. Also found that loading multiple fonts just slows down the loading of the page, so its better to use 2 for project.
Example: Win XP, Chrome

Perform differently on different Operating Systems:

In addition to issues with varied visual rendering in different browsers, it also important to consider how fonts are rendered across operating systems. Then we checked the same pages in high-definition & high resolution systems and found that the same content appearing much neat and crisp.

Mac OS and Windows basically behave differently when it comes to rendering text. Mac OS uses anti-aliasing to smooth text, while Windows Vista and 7 uses a technology called Clear-Type to render more detailed text. Example from Mac operating system rendering

Its difficult to completely account for all situations, when it comes to web fonts. The best we can do is to make
Operating System used in India Operating System WinXP Win7 WinVista Linux MacOSX Win2003 Samsung iOS Unknown Market Share % Dec 2011 to Jun 2012 50.07 42.19 3.41 1.3 1.06 0.42 0.39 0.39 0.34

sure we implement safeguards and fallback mechanisms for the lessthan-ideal web browsing scenario. PC running Windows XP has Clear Type disabled by default, across all browsers, not just IE. And since XP still has the largest usage stats of any OS worldwide, it cant be ignored. Many custom fonts look terrible when aliased and some

become downright illegible at smaller sizes. Like, it happened with Lato in my case.

As per StatCounter staticsGlobal Statistics

Recommendation
If using Google Web Fonts on your websites, then theres a very good chance that 1 out 5 visitors are seeing faux bold and italic versions of your fonts - even if you correctly selected and used all of the weights and styles. Thats because the implementation method recommended by Google Web Fonts doesnt work with Internet Explorer 7 or 8. Faux bold and italic fonts are stretched and slanted. USING A CONDITIONAL COMMENT WORKS ACROSS BROWSERS There is a better solution: adding a conditional comment. IE 7 and 8 are the only browsers that need the fonts to be served separately. And because conditional comments work only in IE, the solution is solid. The new syntax looks like this:
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400ital ic,700,700italic"rel="stylesheet" type="text/css">

2 <!--[if IE]> <link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">

7 <![endif]-->

Notice how all browsers except IE are instructed to use the usual method for accessing Google Web Fonts. This keeps bold and italic fonts loading correctly in Firefox, Opera, Chrome and Safari. Meanwhile, IE is instructed to access each weight and style separately.

This fixes the faux bold and italic problem in IE 7 and 8, and it doesnt create any new problems in more recent versions of the browser.

While selecting these fonts we should always keep the target user/audience there demographic and geographic segment in mind. Last but not the least; provide a 'help' page advising users how to change their settings for the more common OS systems/settings.

Reference:
http://techably.com/use-google-web-fonts/3900/ http://gs.statcounter.com/ https://developers.google.com/webfonts/faq