May 7, 2011

Minnebar 2011

Today I am attending Minnebar to hear about what cool things other marketers, developers and designers are doing along with hearing about things I should be doing. So far today I listend to Mike Bollinger on Responsive Web Design and Garrick Van Buren on pairing fonts.

Mike Bollinger put on a solid presentation going over the why and how of Responsive Web Design. Mike was clear in what his presentation was about, provided valuable information, and could speak clearly to the audience on the topic. He did a good job of stepping through the how. While I did not find any of his information that ground breaking or new, I did find it useful for implementing these techniques in my own work. Thanks Mike!

Garrick Van Buren presented on how to pair fonts by looking at stroke contrast, serif type, shape, and terminal endings. The presentation focused on Garrick showing us a font then calling out these four features about it, and then showing us some good pairing options. His primary point when pairing fonts was to find a contrasting font on the four features, and also a complimenting font. The presentation was designed well and Garrick also knew typography well. The only short coming of the presentation was it went a too fast. Although his going short gave me time to compose this post before the next session :-) . It would have been great if he had dived into to a bit more of the theory as opposed to “giving us the answers” by showing us the pairs. Though he did explain the why of the pairing.

~Nathan Hein

May 19, 2010

Google’s Font API Released Today

Today Google released their Font API giving the web a free choice for high quality open source web-safe fonts. Not only are these fonts easy to use, they are also supported across most browsers including Internet Explorer 6. How easy? You call the Google Font API through a single line of code, and then reference the font-family to your heart’s desire in the style sheet.

How to use Google’s Font API

1. Insert linke to Google’s Font API in the HTML:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" >
2. Then just reference the font family as you normally would in the CSS:
elementName { font-family: 'Droid Sans', serif; }
3. That is it. You are done. I present to you Droid Sans:

Droid Sans in all of its glory

Further Documentation on Google’s Font API

Google’s Font API Directory: http://code.google.com/webfonts This is where you can preview all of the fonts available, a Font Book if you will, and read Google’s documentation regarding the api.

Google’s documentation on the browser specific behavior:
http://code.google.com/apis/webfonts/docs/technical_considerations.html#Browser_Behavior

Video demo from Net Tuts

~Nathan Hein