typography

You should check out "Use the Best Available Ampersand" from SimpleBits. I love me some ampersands, and that post is a great resource for prettifying your site's ampersands with a little CSS typography.

Along the lines of last week's jQuery "widon't" post, you can offload some of the typography processing to the browser. It's really slick and simple if you have jQuery enabled.

To use some of his ampersandy style goodness, add this JavaScript snippet to your site somewhere:

jQuery(function($){
 
$('h1,h2,h3,h4,h5,h6').each(
    function(){
        $(this).html($(this).html().replace(/&amp;/g,'<span class="amp">&amp;<\/span>'));
    }
);
 
});

Then simply add a few CSS font style rules to your site's stylesheets for span.amp, and you're set.

If you want to be really rad, you could combine this with widon't, like so:

jQuery(function($){
 
$('h1,h2,h3,h4,h5,h6').each(
    function(){
        $(this).html($(this).html().replace(/&amp;/g,'<span class="amp">&amp;<\/span>').replace(/\s([^\s>]{0,10})\s*$/,'&nbsp;$1'));
    }
);
 
});

Now your website is 2x hotter, guaranteed :)

Updated, per Paul's comment, to use jQuery's $.html instead of manipulating innerHTML on the actual DOM elements. Also updated to use a DOM ready callback, making it easier on folks who just want to copy/paste these snippets into their site.

In the interest of more attractive Internets, here's a quick little javascript "widon't" snippet—written in jQuery—that I've been using. Now go do something cool with it.

jQuery(function($){
 
$('h1,h2,h3,li,p').each(
    function(){
        $(this).html($(this).html().replace(/\s([^\s<]+)\s*$/,'&nbsp;$1'));
    }
);
 
});

Feel free to replace or augment the selector ('h1,h2...p') with any additional elements you'd like to see widon'ted.

I actually use this variant, which lets longer words be widows if they wanna:

jQuery(function($){
 
$('h1,h2,h3,li,p').each(
    function(){
        $(this).html($(this).html().replace(/\s([^\s<]{0,10})\s*$/,'&nbsp;$1'));
    }
);
 
});

Note: Dave Cardwell posted a jQuery widon't a couple of years ago, but holy balls it's big... If you want something a bit more robust, be sure to check his out.

Another note: I added newlines and tabs to make the code more readable. If I were you, I'd remove those bad boys before deploying.

Update: I wrapped the snippets in a DOM ready callback, making it easier for those who just want to copy/paste these snippets into their site.

it's tough to find a good example of "text only" typography on the web. most designers eventually throw in the towel and use images... so you can imagine my excitement when i saw the site for Seed Conference 2008.

textey web typography goodness after the jump.