Highlights of Week 46/2010
- 10 Intermediate and Advanced Tips from PHP Masters (by Jolie O'Dell) - experts offer their advise; nice compilation.
- Beautiful (Free) Fonts for Titles and Headlines (by bellefoong) - niiice.
- Ways to Horrify Website Designers (by Alexander Dawson) - right in time for Halloween
- Design is Choice (by Dmitry Fadeyev) - Dmitry's take on Google removing the "http://" portion in Chrome's address bar
- The Seven Deadly Sins of Design (by Rob Bowen) - a funny take on seven deadly sins.
- Google Chrome Extensions for Web Design Students (by Julia May ) - Ctrl/Cmd + Shift + J ... that's all I say...
- How to Design the Perfect Business Card (by Rob Bowen) - Great article that serves as categorization and motivation at the same time.
- jQuery 1.4.4 Released (by Addy Osmani) - may I introduce: .fadeToggle() - with 1.5 coming next year.
Anything I've missed?
Post it in the comments or drop me a note.
Highlights of Week 37/2010
- Using Power Structure and Gestalt for Visual Hierarchy (by Shawn Borsky) - ...success is more than just what you see: it’s in the planning, structure, approach, and execution.
- A Comprehensive Guide Inside Your (by Alexander Dawson) - talking about SEO... this is a fine summary useful for any website developer.
- 20+ New Apps and Websites for Designers Sep. 2010 (by Cameron Chapman) - is this really happening? Hard to keep up with all the good stuff...
- Picking the Right Tool for your Remote User Testing (by Matt Milosavljevic) - Matt mentions some really useful links in here.
- Helvetica Joins the Web Font Revolution (by Christina Warren) - get 2000 fonts and 25k page views for free - nice for most smaller projects.
- 10 Usability Tips Based on Research Studies (by Cameron Chapman) - essential read!! Go and check it out, will help you argue in your next design discussion!
How to use the Google Font API
Google fonts available
If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's
- easy to implement (as I will show)
- well supported by IE, Firefox, Safari and obviously Chrome
- open-source
- free (I should have mentioned first huh?)
End Result
Code Example
<html> <head> <link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'> <style> body { font-family: 'Tangerine', arial, serif; font-size: 2em; } </style> </head> <body> This text is in <strong>Tangerine</strong>. </body> </html> |
Implementation
The important parts in above code are to embed the font into your page through the
Link
The link element referencing the google api and your desired font family.
<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'> |
In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible.
The variant parameter can be omitted for use of default.
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> |
One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.
<link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'> |
Style
Use the font within your style sheet by simply referencing the font-family:
body { font-family: 'Tangerine', arial, serif; } |
Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android).
Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.
Tools
Font previewer
Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.
WebFont Loader
Look into the WebFont Loader for getting more control over loading the right fonts at the right time.
The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.
UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.
What about you?
Post your link if you are using the Google Font API already. I'd like to see some really creative uses.
Are you using any other Font library?
About Me
Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.
He has been designing map application for over 10 years and can't stop thinking about improving them.
Categories
- Accessibility (16)
- Code Samples & Tips (15)
- Conclusions (6)
- Design Guidelines (12)
- Designing Map Interfaces (5)
- Go figure (9)
- Good News (25)
- Here and there (29)
- Map Applications (12)
- This Week's Highlights (53)
- Usability & UCD (27)
- Web Design (28)
Popular Posts
- 10 Webpage Design Lessons learned from a trip to Las Vegas… seriously!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
- Dashboard Design
