The new wordmark is constructed of two distinct parts that convey Codecademy’s core values. Inspired by programming cues, the word “code” has been highlighted in a frame or field that sets off what the platform is all about. The frame can also be used to hold iconography, programming symbols, or other typography. At the same time, the second “c” is underlined like a cursor, suggesting a sense of open-ended possibility and change, as well as evaluation and exploration. The “cademy” is an educational anchor for whatever is placed before it.
The old logo — created “in a few minutes by browsing through various fonts in a word processor” by one of CodeCademy’s co-founders — was set in the mock-inducing, free Lobster font, which leads to no further comment on the old logo. Well, maybe a little: it was lame. The new wordmark now has a proper concept and solid execution. First, it clearly looks code-y thanks to the cursor device and the evenly spaced letterforms. Framing “code” also helps establish the clear focus of the site. The stenciled approach to DIN Next adds a layer of coolness that makes the wordmark more unique and memorable than out-of-the-box Lobster. I wish they had tweaked the individual letters a little further to make them truly monospace (perhaps with the exception of the “m”) as it would have created a link with the monospace fonts coders are used to working with.
The font FF DIN Rounded was chosen for its easy readability and modern look and feel. The new wordmark is set in CoDIN, a modified version of DIN Next that we customized with cuts to the letterforms. The primary typeface for the identity program is FF DIN Rounded Light, with DIN Rounded Regular used as the secondary font.
The new user interface is designed as a kit of parts that has been applied across the platform for a consistent experience. Clean and minimal, the modular system uses the structure of a regimented grid to tie together the various elements. A UI toolkit and style guide was built for every element on the site, including headers, footers, form fields, button styles, sign up modules and other interactions.
In application — mainly on the user interface — the logo looks great and it’s never a bad thing to use DIN as a primary typeface, specially now that you can deploy it online with such webfont-ease. The gray color palette with accents of red and mint feels fresh and is easy on the eyes. From header to footer, it’s a simple and airy design that should make learning Python a breeze. Sort of.