Last week I indulged in a little design work for myself. I decided to go with strictly typographical branding for this blog, because I don’t have access to Illustrator and Photoshop any longer (I never use them, it doesn’t make sense), but I do still have a large library of lovely typefaces.

So I set myself these constraints – I’d create the new branding (logo and site avatar) using just typefaces, it had to match my own sense of style (well, the site’s, such as it is), and there had to be some kind of tie-in with my content.

Because I have no designery programs whatsoever, I just used Keynote (I cringed the entire time, don’t worry), but it worked perfectly. I ended up with 15 or so slides with probably 40 logos and about as many avatars. Before I started I pushed some ink around on paper to see where I wanted to get started. Without any access to a program where I can easily manipulate bevels and cut here and slice there, I wanted to be able to look at negative space, which I can more easily do on paper.

Aside: I enjoy sketching my way around a typeface. My grandfather had several lovely old typeface books, and I flip through them from time to time (since they’ve made their way into my library).

So, the blog is named Revelry Reverie, which I picked out 9 years ago for the reasons we all pick out names on the internet – alliteration! I still find the lyrical, parallel sounds deeply satisfying. Anyway, double Rs. I first looked up the Rolls Royce logo, because I didn’t want to come near to that, and I sketched it at the very top of my notebook so I wouldn’t be tempted to replicate it.

I decided early on that I liked making the Rs just the far side of recognizable. When I switched to the computer, there was always a distinct point where you could see two Rs, but one pixel over, they were a single shape. I liked exploring that line. It isn’t exciting work, but I enjoyed sitting hunched on my couch, tap, tap tapping the little arrow key to move one R or the other pixel by pixel to the left or right.

For the logo, I started by looking at the Rs rotated 90 degrees and reflected on a Y axis. Many capital Rs have a leg that kicks straight out from the bowl, so when you put the R on it’s back, you get a hill and a less-than symbol ( o < ). When you put those reflected together, you get something like o<>o (but flat on the bottom). I found some very interesting shapes, mainly a house between two hills. Neat, but didn’t really match my style or the content of my site. There are a few capital Rs who have a curvy leg, however, where the leg either descends from the right edge of the bowl itself, or it matches the curve of the bowl before descending to the baseline. The shape you get when you match those up is also pretty interesting, and I started to see a perfect connection – three little heads, one with a bow on top. I did a few sketches and then switched back to the computer, and soon enough, I felt I had it:

If you know it’s a pair of Rs, you can see them. But you see the shape first. Coupled with the header image, you are lead to believe you’re looking at three little heads. You could also imagine you’re looking at two boy heads and a girl head, but I would challenge you to think of it as twins flanking a little devil. Just alternative ideas!

So, I needed the image to be a PNG with a transparent background, and I’ve honestly never done that without Photoshop, but I know that Preview has a magic wand mask grabby tool thinger (I can’t remember what these things are called, I just know how they work, ok?), so I used Preview to select the negative spaces and delete them. It took 2 seconds and worked mostly ok. I created a white-on-black version and tried that out, and you could see the anti-aliasing around the curves especially once the logo was placed:

Since my header image is black and white, I decided that a midpoint grey background should work better to blend those edges in. Lo:

It’s hard to see a big difference here, but the edges are softer enough that it works. This isn’t professional work, folks. You can see them if you care to look closely, but otherwise, they don’t grab your attention. This was a good completion point for the logo.

Next, the site avatar, which used to be a photo of Eleanor smiling under a hat, needed updating. I spent 3 pages (27 takes) on capital Rs until a lightbulb went off and I switch to lowercase, which opened up so many interesting shapes and configurations. Ultimately, I kept coming back to inverted Rs in a serif. I generally keep the site typefaces a mix of serif and sans serif (I like a serif for the body copy, and a sans for the titles — I don’t always stick to this, but it’s a classic that I prefer), so choosing a sans serif for the logo and a serif for the site avatar felt appropriate. The site avatar had to fit nicely within a square and had to be distinctive at a tiny size.

No hidden shape on this one, I just felt this one was “right” in a way that isn’t very easy to define. Which is how you know I’m not a designer! However, since I was my own client, I can get away with that.

Finally, it shouldn’t be lost on anyone that the repetition of Rs matches the volume of Rings that are featured in the blog (well, there are 5 of us in total, and only 4 Rs used technically but think of the two visible Rs in the avatar, then the three little heads in the logo, and it all comes together).

So there we have it! A new logo and site avatar made from typefaces and using the programs that came on the computer. Not too shabby, if I do say so myself.