I Heart 'Daily Drop Cap'

I've been obsessing over type lately, at least more so than normal. In part because of the new Friends Of Type site I recently posted about, but also because of the Daily Drop Cap. I've been a fan of Jessica Hische's work for some time now, but she recently started a blog where she posts a new illustrated drop cap every day. Check it out, you won't regret it. Here's a sample of some of her beautiful (I mean awesome) lettering:

Wolves Poster - Letterpress Process

The Wolves poster was probably one of my favorite student projects. It was a piece that helped me fall in love with letterpress, a class I recommend all design students take. Although the process took way longer than originally anticipated (as are 99% of all projects), the time put in was well worth it.

1. Finding Inspiration

I pulled the lyrics, "...the wolves are coming out tonight," from the band's third cd which I thought was a perfect representation of the kind of music they play. This also painted a clear visual in my head and gave me some direction to work with.

2. Drawing And Carving

I hand drew the wolves on paper reading the right way (Click images to open a full preview).



When I was satisfied with the illustration, I scanned it and roughly laid out the type.



Once I had a better idea of how the type and the illustration were going to work together, I lightly taped black carbon paper to the clean linoleum block. Since I knew I was going to want two separate illustrations to register (line up) on the press, I made sure the linoleum blocks were cut the same exact size.

With carbon paper attached, I traced over my original illustration. When I removed the carbon paper, it left a light outline of the wolves on the linoleum and ready for me to cut (Left Image). On the second block (which was eventually going to be inked in red), I carved the eyes of the wolves, two circles, and a stylized letter 'A' (Right Image).





These are the tools I used to carve the blocks.

Image borrowed from http://www.nettally.com/palmk/RubberStampTools.html via Google Images.

This is an image of the carbon paper after tracing the wolves onto the linoleum blocks. I used a light behind the paper to better show the lines.

3. Printing

Since I wanted the red eyes to sit behind the wolves, this block obviously needed to go on the paper first (1). Once the red was printed, I easily swapped out that block for the wolves illustration (2). This transition was easy because the linoleum blocks were the same size and they were already registered in the press bed. After both linoleum blocks were printed, I moved onto the type (3).





This is an image of one of the first test prints that I made with the blocks. This example shows the red layer being printed last and since the red ink is slightly transparent, it looks very strange over the black (Remember to click the images to enlarge to see all the details).

4. Setting Type

Of course, one of the more tedious (and enjoyable) things about letterpress is actually hand-setting type. Image (A) shows the type I set without ink and image (B) shows the type with ink. Notice that in image (B), the colons are red, but the rest of the type is black. This is not the right way to ink type. The proper way would have been to print the red and black type on two different runs. I was a newbie (and very impatient) so I used an eraser to hand ink the red. In the end, this probably was more of a pain than to just have set the type to be printed in two different runs... oh well.



So there you have the process in a nutshell. A giant mess and about a billion hours later, I had 14 prints of The Wolves poster. The poster was chosen and published in AIGA Kansas City's A4 Design Awards Book.



Be sure to post your comments and feedback... I love hearing from you all!

Typekit Update - FontFont Library Now Offered

After only a few weeks of being acquainted with Typekit and only a couple days after implementing it, the library is already growing. They announced today that the FontFont library will now be offered via Typekit.

This will more than likely be the precursor that opens the floodgates to other type foundries offering their fonts in this easy to use web font system. Right now, FontFont offers about 20 fonts on Typekit and as I said in my last post, this number will only grow. It's only a matter of time before we see type from Sudtipos, Process Type Foundry, and Darden Studio.

You can read the full article on Typekit's blog. If you're not aware of what Typekit is or how to use it, I'll tell you about it here.

How To Set Up Typekit

All of a sudden, it seems that we're entering a new era in web design. One of the most noticeable changes (as of late) is the use of fonts that designers actually want to use outside the ever-limiting web standard ones. Among various methods, we have Cufón which is an alternative to another experimental flash embedding technique referred to as sIFR. I have experience with sIFR having used it in Willoughby Design's website where we used H&FJ's Whitney. I must say that although sIFR was a great solution, we had a bunch of licensing and security issues which we needed to take into account. With sIFR aside, we now have Typekit.

In a nutshell, according to their site, "Typekit is the easiest way to use real fonts on the web." To date and with the experience that I have with some of the aforementioned methods, this claim is very accurate.



I first heard about Typekit a few months ago before they opened it to the public and I wasn't really sure what it was at first. They officially opened up shop a little more than a week ago and I'm glad I've finally had some time to explore it.

1. Setting Up

Once I logged in, I simply had to enter the domain name that I wanted to use a "kit" in. I had to then copy and paste a short line of unique javascript code into the HTML head tags in my website. Note: The following code will be unique to your information.

<script src='http://use.typekit.com/FileName.js' type='text/javascript'/>
<script type='text/javascript'>try{Typekit.load();}catch(e){}</script>

2. I'm Done Already?

At first it seemed like I was, but not quite. After finishing our first step, Typekit says, "You're all set. Now go find some fonts!" Damn... that was pretty easy.

After proceeding, I was taken to a page of close to 100 fonts to choose from. It's a very respectable list and I imagine that the library will only grow. Very organized, you can search categories such as serif, sans serifs, to distressed and pixel. After searching, I selected a couple of my favorites. I have the basic free service which allows me to use 2 fonts on 1 domain which is fine for my purposes. You can upgrade (and pay) for more fonts across more domains.



Once I selected the font of choice (called Liberation Serif and now used in my headers), I opened the "Typekit Editor".

3. Adjust Your CSS

All that was left was for me to do was add the name of the font to my CSS [example code shown below]:

h1 {
  font-family: "liberation-serif-1","liberation-serif-2",serif;
}

The process is literally that easy. If I wasn't writing this article while doing it, it would have taken me no more than 10 minutes to get a working font on my site. And although the code adds a little badge in the corner, it's not intrusive and doesn't really bother me. If I were to upgrade my account, the badge would not be required and I'm sure if I was really savvy, I could hide it. In conclusion, I am very impressed with the selection and ease of Typekit... I look forward to new features it has to offer.

Wanna Add Typekit To Your Website?

If you're interested in joining the Typekit community, I have a limited number of invites that I'd be happy to share. Just post a comment with your thoughts and a way for me to contact you and I'll pass one along. Also, if you end up implementing Typekit on your site, let me know as I'm curious to see your use... Enjoy and thanks for reading. I look forward to hearing from everyone!