This year I have rediscovered my love of javascript (which should become more evident in 2012) and html5 as well as how I can integrate 3d ideas from maya into browser based media and have them look pretty good.

The hard stuff Ive learned this year includes; panda, never work for a content farm and always push yourself harder (especially in a tough economy like this one). Oh yeah, and despite what the government says about how well your country is doing, chances are they’re exaggerating.

These are tough times to find work and I created Meancouver out of my own frustration finding employment.

Lettering.js is an excellent jquery plugin to gain more control over your kerning on your headlines though I am finding it is overkill for body text. Lettering and kern.js is a great way to make kerning easy but it isn’t playing nicely with linked headers for me.

Thankfully, now we live in more civilized times and our typography has caught up. In previous posts I outlined how to use font-face and lettering.js to get the typography you want & deserve. Now, I’d love to point out another handy javascript to make kerning even easier: Kern.js.

This script is extremely easy to use: just drag the file from the site to your browser toolbar, click the link when you’re on the page that you want to edit and start adjusting your kerning. You have two options for letter spacing: em and percentage. Once, you’ve completed your editing you can click the ‘finish editing’ button and obtain the proper spacing for your lettering in handy CSS. Of course you have to have lettering.js installed but that isn’t hard to do either.

A good example of how kern.js works is here. I played around with it and it took basically no time to learn. Of course CSS has letter-spacing as an attribute but kern.js and lettering.js give you far more control and the ability to achieve far more professional typography.

Typography is a vital part of UX design. Of course you know that by now but it has always been an interest of mine. Making sure that your UX design is accessible for people with visual problems, dyslexia or just poor eyesight means that anyone can understand the message you’re getting out. Plus you get to avoid another long and sometimes frustrating explanation of how “this internet thing” works to your parents.

Being able to break out of websafe fonts without using Cufon or SIFr is truly awesome but be warned too much Helvetica could lead to this:

I’m debating switching this theme over to HTML5 Boilerplate just to make it more robust and so I can work out some of the plugin bugs a bit easier.

In order to create a unique post template for WordPress you need to create a template file. This is the easiest part of the entire process as you need to duplicate the single.php file from your theme folder and give it a unique name. In my case the unique template I needed to create was for the font-face posts so I named mine single-fontface.php. Pretty easy so far but the next challenge that I found was creating a unique header and footer to contain my javascript and extra stylesheet.

In the single.php file there is get_header() and get_footer() hooks that make this process very easy.

First, duplicate the header.php file and give it a unique name in the following format: header-name.php. Do the same with the footer file. In your single.php duplicate add the name part of your header and footer files to the get_header and get_footer. An example of this structure would be get_header(‘name’). Do not include the hyphen from your filename as this hook will look for header-name.php and an extra hyphen will break the code. Feel free to add your stylesheets and javascripts at this point.

Next you want to install the Custom Post Template plugin so that you can utilize your customized theme easily. In the instructions you will need to add the following to your single-name.php file:

{code language=php}
<?php
/*
Template Name Posts: Snarfer
*/
?>
{/code}

Snarfer is the demo name that comes with the plugin. Feel free to change the template name to something that works better for you.

Now, with your custom template completed and your plugin installed be sure to select your template in the custom post template section within the admin authoring section. Save as a draft to make sure that all of your scripts are working and the styles are loading. If everything looks good, then publish away.

Typography is indeed, most of UX/UI design and with @font-face you are no longer bound by websafe fonts. The following examples are the examples that come with lettering.js integrated with @font-face:

Letters

The HTML

	<div id="demo1" class="demo">
	  <h1>Plainbow</h1>
	</div>
	

The jQuery

$(document).ready(function() {
	  $("#demo1 h1").lettering();
	});
	

The Result

Words

$("#demo2 h1").lettering('words');

The Result

Lines

$("#demo3 p").lettering('lines');

Properties can also be chained to produce more advanced effects

The Result

$("#demo4 h1").lettering('words').children("span").lettering();

The Result

Advanced #2: Chaining and Styling

$("#demo5 h1").lettering()
		.children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});

The Result