Capn Design

Entries tagged typekit

A Typekit Colophon Bookmarklet

Posted November 12, 2010

Hello type nerds! Have you ever had a moment where you knew a site used Typekit but you didn't recognize the fonts? I know I have.

For every site that uses Typekit, they produce a colophon that gives you the name of the font, a specimen, and other helpful information. Unfortunately for us, not everyone links to their colophon. I know, right?

That's where my Typekit Colophon Bookmarklet comes in. After adding it to your bookmark toolbar, all you do is click and it will open the site's colophon. If the site doesn't use Typekit (lame-o's), it'll pop up a little alert to let you know.

Install It

Installing it, at least on the desktop, is easy. All you do is click and drag the following link to your bookmark toolbar. If you're dying to install this on your iDevice, it's a pain in the ass, but you can try and follow Instapaper's instructions (but use my code, not theirs).

Drag me to your toolbar: Typekit Colophon

Make It Better

I've put the code up on Github as a gist. Please, feel free to fork it and make improvements. I've tried it in a bunch of places, but I'm sure the code could be cleaner and it'll probably break in some edge cases.

Update (11/15/10): On Friday, my friend Mark Pascal answered my call for a bookmarklet powered by a gist, enabling easier updates. Then Phil Dokas forked my code and prettied up the javascript. I combined the two to so I can improve the bookmarklet. I've also updated the code above to use this new bookmarklet code. Thanks guys!

Oh, and if you're like me and feel like you're just ont cusp of understanding scoping of Javascript functions, I recommend the Functional Javascript article from

Behold! The New Design!

Posted February 15, 2010

Whew. This took way too long, but here we are with a new design! I am loath to admit that I’ve been building this off and on for 2 years, but it’s true. Let me give you the rundown.

  • I’ve lived with this last design for quite some time and it was getting stale. I wanted something a bit more flexible and brighter.
  • I wanted a view into my social graph (i.e., everything I’ve been doing outside of this site).
  • I wanted a project that would take way too long to finish and become way too complicated (not exactly true).

The Design

I’ve long pined for the beautiful structure of Khoi’s blog and the free-flowing nature of Jason’s. I’d like to think I created something original that draws from what they’ve been doing for years.

The fonts in use are FF Tisa Web Pro, FF Enzo Web and Verdana (my commitment to chunky sans-serif fonts continues in this latest iteration.). The first two are served from Typekit1, which has been a fun experiment.

As for the colors, I just wanted something bright and fun. I tried to make use of the color as an accent instead of blinding you with a yellow background or blue body text (don’t cross me or I just might). I think the color choices are the most successful aspect of the site.

The Social Graph

Like most of you, I’ve been Twittering and Flickring for quite some time, and I wanted to get that onto the site. Sure, I could have used the widgets they provide or even the action streams provided by Movable Type, but that would have been “fast” and “easy”. So, I wrote a set of scripts that grab data, parse it and write out some interesting widgets throughout the site. Some of this stuff is a little buggy, but for the most part it turned out well.

You can see good examples of this by looking at the monthly archives, which only have data from that month, instead of just the most recent. I wanted it to be a view into what I did for the month (probably more for me than you, when I think about it). The homepage has some nice views as well. You’ll notice a graph for the top tracks. I built that using Highcharts, which is a jQuery graphing library. I’ve been playing around with these for a few months now — mostly at work — and this one is the most full-featured. I also really like Bluff.

Since this is only bringing in data about what happened and when it happened, I’m also reviving reviews. I haven’t reviewed anything here since 2005, but that will change post haste.

The Tech

The site is powered by Movable Type 4.33, several MT plugins, jQuery, Typekit and the custom social graph scripts I wrote. While everyone else is moving to hosted blogging solutions, some of which are awesome, I’m still a tinkerer. I want to be able to dive in and play with the code. It forces me to learn new tricks, even if I occasionally have to debug an errant template.

I’m using jQuery in some fun ways around the site. You’ll notice at the bottom of the home page you can load new entries. “But Matt, how is that possible if you use a CMS that publishes static files?” Well, in MT 4.3 I helped usher in the ability to paginate entries and I thought it was only appropriate I put it in action here.

Another change is the addition of authenticated commenting and tags. You can still comment anonymously, but now Facebook, TypePad, Google and Yahoo! users can log in and keep their identities. In regards to tags, I’ve been adding them to entries for a while now, but I’ve gotten around to exposing them.

Finally, I have dropped support for IE6. Only 3% of my visitors use the browser, so sorry dudes. You’re out of luck. The site does still have some issues in IE7 and 8, but I’ll fix those over the next week or two. Ya’ll can read the content just fine, so I think we can both wait a bit.

Summing Up

I’ve been blogging for over ten years (yeah the archives only go back to December 2000, but I lost some old hand-coded entries) and I feel like this is the first design I’ll be able to (intentionally) keep going for some time. I also feel like it represents who I am right now.2

If you happen to find anything that looks odd, feel free to let me know. You can find contact information on the about page or just leave a comment here.

Thanks to everyone for visiting over the years. It’s been fun so far and I’m looking forward to many more years of funning with you.

  1. Typekit has been fantastic, but it’s still a bit buggy. You may notice some issues here and there (especially in Internet Explorer), but I’m going to live with it. The service is run by smart people, so I’ve got confidence.
  2. How right now is it? The about page uses a random Flickr photo of me. That’s pretty right now, right?
How Typekit Protects Their Fonts

Recent Entries