Klim Type Foundry

Information

The Klim Type Foundry launched a completely redesigned site “to put the designer at the heart of the type browsing, buying, and learning experience”. An integral part of the redesign is Söhne, a collection of new typefaces described as “the memory of Akzidenz-Grotesk framed through the reality of Helvetica”.

Inspiration for the redesign came from mainly places, but primarily classic Swiss design principles as well as practitioners Josef Müller-Brockmann, Wim Crouwel, Romek Marber and Karl Gerstner.

Inspecting the browser console reveals an homage to Josef Müller-Brockmann’s book Grid Systems in Graphic Design. Pressing Ctrl+Alt+Shift+g displays the underlying grid of the site, and on type specimen pages you can toggle page colour by the icon in the navigation or with Ctrl+Alt+Shift+t on your keyboard. Experimenting with these commands results in recreating the book cover if you can find the right specimen and theme.

“Ahhh this JMB throwback theme + grid easter egg on the @klimtypefoundry Klim/Söhne website is awesome (as is the typeface)!”
— Thomas Lowry (Twitter User)

Alongside the inspiration for the site, the redesign was further informed by extensive research into other type foundries as well as interviews with existing and potential customers. It also included usability testing of the old site and prototypes of initial concepts (in design software and code) to validate numerous design details and approaches. This research and testing helped to discover what challenges people face when licensing fonts and the expectations they have of a foundry site.

After a year of near constant design and development the new site showcases the breadth of Klim’s work in type design, but also the foundry’s gallery exhibitions, collaborations, publications, goods, photography, animations and videos.

A personal highlight of the redesign is the random generation of type specimens. Each time a page loads a set of predefined rules for how typefaces should be presented is parsed over a corpus looking for words, sentences, and paragraphs to programatically display as unique specimens. The redesigned specimens encourage experimentation before purchasing; people can view OpenType features, change alignment, add columns, adjust line-height and letter-spacing with an interactive type tester, and review and test full character sets in the form of a glyph inspector with a ‘bézier view’.

Speaking of specimens, after much hard work it has been humbling to see the response and feedback from the design community.

“The Söhne type specimen from @klimtypefoundry is a delight. A masterclass in considered interaction design, usefulness, and inspiration.”
— Mark Boulton (Twitter User)

The site’s writing sections have also been brought to the fore and extended. The blog aggregates and displays the word count for each category currently on the site. For example, there are 27,544 words about letters in the interview category and 25,386 words in the font information category. The in use section, which shows the extent of Klim typefaces ‘in the wild’, has an improved filter to allow design work to be reviewed by typeface, and by category, and retail font specimen pages also now display related in-use examples.

“The new @klimtypefoundry website is a thing of beauty. Simple, highly functional and so much polish. Fonts are pretty good too.”
— Thomas Williams (Twitter User)

Finally, under the hood there is a statically-generated front-end and a GraphQL back-end as well as a custom e-commerce experience that connects with Stripe for transactions, Django for managing fonts, orders, and upgrades, and Wagtail for content management.

Credits

• Kris Sowersby (Client)
• Dan Newman, Zak Brown (Design)
• Peter Dekkers, Mitch Ryan, Katie Day, Dean Oemcke, Juliet Brown, Matthew Holloway,
  Eugene Dementiev, Calin Dale (Development)
• Kanhika Nikam (Research)
• DIA, Alt Group (Collaborators)

Awards

• Certificate of Typographic Excellence from the Type Directors Club (2020)
• Type Directors Club, Winner: Communication Design (2020)
• Red Dot Award, Best of the Best: Website (2020)
• Red Dot Award, Best of the Best: Typography (2020)
• AGDA Awards: Judge’s Choice, Website (2020)
• AGDA Awards: Pinnacle, Website (2020)
• AGDA Awards: Distinction, UX, Interface & Navigation (2020)
• AGDA Awards: Distinction, Digital & Mobile (2020)
• AGDA Awards: Distinction, Design Craft, Typography (2020)
• DINZ Best Awards: Gold, Large Scale Websites (2020)
• DINZ Best Awards: Silver, User Experience (2020)
• DINZ Best Awards: Silver, Digital Products (2020)
• DINZ Best Awards: Bronze, Digital Campaigns (2020)
• Communication Arts Award of Excellence Winner: Typography Annual (2020)
• D&AD Shortlist: Digital Design, Digital Products (2020)
• Webby Awards Nominee: Best Visual Design (2020)
• Kātoitoi Aotearoa Design Archive: Digital, Technical Innovation (2020)

“An impeccable grid structure, stunning visuals, and an interface that lets you test every detail of the expertly crafted typography. Every interaction state and responsive break-point has been considered, the site performs fast, and delivers true function and form to the user. The checkout and account creation experience is extremely intuitive and does not break out of the conventions of the design aesthetic the user is familiar with through the course of their journey.”
— Ahmed Meer (AGDA Juror)

“Typefaces are not just products they are tools, therefore an entirely different approach is required, when it comes to selling them. This approach has never been better exemplified than in Klim Type Foundry's new website. The site is the clear culmination of in-depth research, technical knowledge, and masterful design.”
— Luke Scott (AGDA Juror)

“The Klim Type website has been implemented at an extremely high level with an attention to detail that is absolutely world class. The basic design / layout and navigation is functional and well thought out with the layers of polish applied through bespoke animation, transitions and subtle effects only serving to enrich the experience. So often effects and flourishes are inconsistent with the overall flow of the site but these simply contribute to the overall experiential nature of the site.”
— Morgan Martin-Skerm (AGDA Juror)

Featured

It’s Nice That, Communication Arts, Muzli By InVision, AIGA: Eye On Design, Creative Boom, AGI, CSSDSGN, CSS Tricks, CSS Winner, CSS Boutique, Type Wolf, The Gallery, Httpster, The FWA, Awwwards, SiteInspire, North East, The Brand Identity, UI Jar, Mindsparkle Mag, Design Assembly, Crafted By Code