Logo Design Evolution at Cassel Bear
Jun 14, 2017 Posted by Jesse Ewing in Branding and Identity Design
Here at Cassel Bear, we’re wrapping up a yearlong process of reimagining our brand. As we settle into our new open-plan office space, a custom sign for the front of our building is being fabricated, redesigned stationery and business cards are at the printer, and our multiple brainstorming rooms are playing host to energetic strategy meetings. Exciting things are afoot; internally we’re referring to it as Cassel Bear 2.0.
As part of Cassel Bear’s refresh, we updated our logo (seen above). As we’ve done with some of our clients, we approached this project as an evolution of our brand and not a reinvention. The old logo had good bones but didn’t quite fit with the vision of the company moving forward. The new logo has solidity and presence, as well as a versatility, that should serve us well in a variety of situations.
Around the time I was working on a new version of the logo, I was becoming aware of a new trend in the type world: chromatic or layered fonts. Layered fonts allow a typeface to be embellished with accents such as drop shadows, inline strokes, and outlines. Each layer can be rendered in a different color, resulting in striking effects.
Fonts are vector files. When we build logo files, we save out the finals as vector files. This got me to wondering if I could deconstruct our new logo into its essential pieces and rebuild it as a layered font. Each element could then be stacked and colored separately. It seemed like a fun idea and more importantly, practical. How great would it be to have our logo one click away in the font menu?
This is how our new logo looks inside a font editor.
I imported the logo files into my font editor and within a short time had a proof of concept built. Typing “b” for “box,” “o” for “outline,” “c” for the Cassel Bear text, and the “vertical bar” symbol for the bar between the words in my page layout program gave me all the parts I needed. I colored each “letter” as I would any font and then set the leading (the space between lines of text) to zero and voilà, all the pieces stacked into the logo!
The recipe for a Cassel Bear logo using a page layout program.
Knowing that we were about to begin work on a new version of our website, I decided to see if I could replicate the process using a webfont instead of a regular font. Generating the webfont was easy enough, but making the various elements of the logo render in the proper colors and stack in a browser took some fiddling. Eventually I hit on some CSS rules that did the trick. I refreshed the browser and there it was, our new logo in the proper colors looking just as it should!
At the top, the logo pieces typed out as regular HTML text. At the bottom, all of the elements stacked using the “line-height” property in CSS.
Creating a font from our new logo was valuable enough as just a technical exercise, but it also has creative potential for applications both for our own use and for client projects. With a little more testing and code tweaking, I can envision making a webfont version of a client logo and using it on the client’s responsive website in place of an image. And since a font is vector by nature, it would enable the logo to be scalable without any loss of quality, looking good on any screen at any size. It’s an innovation that speaks to the forward-thinking spirit of Cassel Bear 2.0.