oodavid... what a blog you have!

I’ve been pondering today about how the quickest and easiest way to test-drive different fonts, like hundreds of them, on a website… tinkering with the fontsquirrel and google fonts libraries I found myself speccing up a browser plugin / extension based around this piece of code:

$('head').append('<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster+Two&v1&v1" />');
$('body').css('font-family', "'Lobster Two', arial, serif");

…as you can see, if you dumped this into into the console on a site with jQuery it will switch out the font assigned to the body allowing it to cascade down through the DOM.

Which leaves me with the question; would it be productive to write a chrome extension where you can select any of the freely available hotlinkable fronts and apply it to a website? I think it would! Weekend project here we go :-)

Beer first.

I recently came across a most excellent video from Mike Monteiro (Web Designer Guru) focussing on the topic of getting paid by clients. It takes a very legal approach (his lawyer is with him onstage) and covers various topics such as kill-fees, your rights as a freelancer, using Intellectual Property as leverage for final payment and introduces several scenarios that are all too familiar with much of the audience.

The talk is a contributing factor to my ever growing interest in the legal processes of working freelance or in a small company; My “shitlist” for next week includes creating a legal timeline along with supporting documents, contracts, terms and conditions; I’m even speaking to awesome designer Graeme “grabbins” Metcalf about designing a gorgeous one-page infographic that illustrates the process. It’s gonna be gorge.

I have always loved Jesmond Dene more than any other part of Newcastle and I’m no so proud to have it as the view from the new home and home-office. I won’t be getting bored of this anytime soon!

Not just on the grounds that it’s a beautiful place, but it’s also my cycling playground where I like to fall off my bike into mud. No really I seem to do that more than anything else there…

Being a bit of a non-designer, if I want to add a quick bit of “wheee” to a page I sometimes put my ribbon titles onto my h1, h2, h3 etc tags in order to make them pop a little bit.

But until submitting my entry onto CSS1K using such a technique I hadn’t realised that it was considered such a neat trick; I guess you just never know what you’re sitting on!

So the trick is wholly inspired by Nicolas Gallagher’s pure css speech bubbles; however I use 2 pseudo-tags instead of 1. Whether you’ve read and assimilated that link or not, lets code

<div >
	<h1>This is my title</h1>
</div>
<style>
	/* Just to align the container */
	#container {width: 400px; margin: 30px auto; text-align: center; padding: 100px 0; background: #EEEEEE;}
	/* The important bit */
	h1 {position: relative; margin: 0 -25px; font-size: 40px; background: #0088AA; color: #FFFFFF; text-shadow: 1px 1px 0px #1A5D6E; box-shadow: 0 0 10px #AAA;}
	h1:after,
	h1:before {content: ""; display: block; position: absolute; bottom: -25px; width: 0; height: 0; border-style: solid; border-color: #1A5D6E transparent;}
	h1:before {border-width: 25px 0 0 25px; left: 0;}
	h1:after  {border-width: 25px 25px 0 0; right: 0;}
</style>

And BOOOOOM; ribbons with no extra markup. Awesome. Just tweak the numbers for different sizes, and view the inspiration for the logic and workings (it’s not my place to take credit for that!)