Case study: all new TypeMates.com

We built a new website for the type foundry TypeMates — including an online shop, a magazine and interactive testers for their typefaces.

Instead of reading many words you could simply visit typemates.com and see for yourself, but using the final product is only half the fun: If you’re curious about the process and how this fairly extensive project came to be, then you’ve come to the right place. Let’s take a look behind the scenes, shall we? 👀

One of the typeface pages featuring interactive testers. Also a browser in a browser. 🙃

How it all started

This is quite a story, so bear with us: Back in November 2015 we were still in the process of founding our company, working on our branding. Every good brand needs a strong typeface, so we were on the hunt and after trying out many different directions, Harry remembered seeing Cera Pro by Jakob Runge back when it was released. When we all looked at it, we were immediately sold: the combination of geometric letter forms with a futuristic vibe, but also a human touch was exactly what felt appropriate. So we bought the complete family and everything else fell into place:

Cera Pro in our logo

In January 2016 we opened shop and started doing client work, working on smaller projects in the beginning. Then in February we got a call from a number we didn’t recognize and when we picked up the phone we heard a voice say:

„Umm, hello, this is Jakob Runge … we haven’t met in person yet, but we do know each other through your logo. We’re the TypeMates and we need a new website.“

And that’s how we got to know Jakob and Nils, the founders of TypeMates, a friendly, straight-forward type foundry for custom type work and retail typefaces.

The task

Jakob and Nils approached us with the wish for a revamped website to present their typefaces as well as their foundry more appropriately and also to sell their typefaces through their own online shop. Why set up your own online shop when there are platforms like MyFonts? Simple: While those platforms for sure mean greater reach and exposure, they also take a hefty cut of the revenue, so running your own online shop has several advantages: you keep almost 100% of the money and it’s also a sign to potential clients that you’re serious about what you do. In addition it’s not an either-or decision, since your own shop can co-exist with MyFonts and similar platforms.

When we heard about all this we immediately got excited: first of all we loved Jakob’s and Nils’s work, but this was also our first big and complicated project as a new company. Also worth mentioning: everyone in our studio has a deep appreciation for typography and in previous jobs we had all worked on type-related projects before. So this project was a fantastic opportunity to show what we can do and after some more calls we wrote a proposal, which was quickly accepted and we were ready to get this show on the road!

A very early design exploration by Nils and Jakob for the shopping cart.

Starting the project: design + prototyping

Jakob and Nils had already done some design work and so a PDF with many roughly designed screens already existed, which meant we didn’t have to start from zero. Our designer Max quickly got to work, going through the most important screens based on the initial explorations, simplifying, consolidating and also building interactive prototypes for the trickier modules.

Max (in the middle) showing Lars and Lorenz some progress.

Pretty much every week we had feedback talks with Jakob and Nils, which had to happen via Skype because Nils is located in Hamburg, while our office in Berlin and Jakob lives in Munich. So the day-to-day communication happened over Slack, combined with calls every now and then to discuss the bigger topics. To organize the growing list of tasks we set up a trello board to structure the process:

This screenshot is pretty recent, but the board was always this packed. 🙃

A few weeks into the design process we started the technical work: naturally we did our research regarding e-commerce solutions which support selling digital downloads and found Shopware—a full-fledged, popular shop system, developed in Germany, with an active community that supported everything we needed. In addition Lorenz had used it before, so it was our obvious first pick.

Interlude: what it takes to sell typefaces online

Let’s take a step back though and talk about the intricacies of this project. Selling typefaces is a complicated undertaking for several reasons: There’s the fact that you can usually buy individual fonts (such as Cera Pro Bold Italic), as well as whole typefaces (Cera Pro Family which includes all its fonts) and the pricing must reflect these bundles. Then there are different use cases, such as desktop fonts, web fonts, app fonts and server licensing, which are all variants of the same product, but with different pricing and different file formats. Within those use cases you usually have several tiers, e.g. for multiple workstations (desktop fonts) or different amounts of page views (web fonts). And if this didn’t make the price calculation difficult enough, you can further add bulk discounts, sales, typeface bundles and the obligatory taxes to the mix.

The buying process should finally result in the generation of a zip archive that contains all the relevant file types of the fonts you bought (otf, ttf, woff, woff2, …) as well as licensing documents. If this sounds like fun, that’s because it is: Selling fonts is not like selling t-shirts.

So one goal of the project was also to streamline this mess, which resulted in nuanced, intricate discussions about pricing models with Jakob and Nils, going over the pros and cons of each little tweak to the system. In the end we decided to take a fairly radical step and to always sell desktop and web licenses combined. So whenever you buy a web font in the TypeMates shop, you also get the desktop font with it and vice versa. Most modern designers and developers fluidly move between mediums, so always giving out all formats seemed like the reasonable, user-friendly thing to do.

Trying to wrap our heads around the font licensing.

Technology take #1: Shopware

Back to Shopware though: We were looking at a very mature system that comes with a ton of functionality out of the box. That’s exactly what you need for most shops, but we simply couldn’t fit all the custom pricing rules of our licensing system into it. After a week of in-depth technical exploration we concluded that Shopware is a great piece of software, but didn’t adapt very well to our use case. We needed something more flexible and modular, that we could more easily bend to our needs.

Situations like these are a bummer, but that’s why you do technical explorations in the first place—looking at the most complicated part of the system first, instead of starting with the easy tasks. So we went back to the drawing board and looked at more modular e-commerce solutions.

The only time we actually met Jakob and Nils in person, at the TYPO conference in Berlin. 🍻

Technology take #2: Craft Commerce

From another project we knew Craft CMS, a flexible and modern content management system with a powerful plugin called Craft Commerce for e-commerce applications. Rather than providing you with a full online shop out of the box, it comes with a set of basic structures that you can combine however you want. Furthermore it’s easily extendable through custom plugins and has a very slick, user-friendly admin interface. Surprisingly, within just one day, we had the basic products structure and price calculation working, including bulk discounts, the different license types and also bundles. It all fell into place rather intuitively.

The Craft CMS back end where typeface pages are created.

The only problem being: Back in March Craft Commerce was only meant to sell physical products, which was why we initially excluded it from our evaluation. We ended up developing our own plugin to handle digital downloads and build the zip with all the font files at the end of the buying process. This was only the first of a handful of plugins we wrote to make it all work. Then a lot of what we initially built as a plugin made its way back into the official Craft Commerce package and in general the developers, especially Luke Holder, were incredibly supportive, often implementing features we needed or fixing bugs we noticed within hours.

Lars sorting all the design work.
Harry in a Skype call with Jakob and Nils.
Working together on a mobile view.
All alone fixing bugs.

Harry was mostly tasked with the front end and back end development from March until November, but in the beginning Lorenz was involved with the front end as well and Nicolás joined towards the end for the final stretch. Max handed over the design to Lars at some point, so this project truly involved our whole team.

The product

In the end we roughly built the following:

At the center is a Craft CMS that contains all the different pages and parts of the website: the news section, custom work information, typeface pages including the interactive testers, information about the TypeMates and in-use image galleries. Hidden from public views is a structure we call the font library which holds all the source files of all typefaces, including subsetted versions with a reduced character set. Via a custom plugin Craft can then pull all web fonts out of the font library and lazy load them into any page that needs them (such as the interactive testers).

Craft Commerce handles the checkout process including the shopping cart, applying license variants, discounts, sales and taxes, as well as handling the payment via Stripe or PayPal. Afterwards a custom plugin takes over and compiles the zip archive for the customer to download, by collecting all the relevant files from the font library. Customers first need to create an account and can then securely download their fonts, via a link that only works with their user account. When you have an account you can also download trial editions of all typefaces for free, which is great for students and when you’re exploring several type options on a project.

Stuff that’s not visible: License PDF generation, invoice PDFs, base64ing all web fonts to make stealing them a tad harder, VAT id validation, generation of a sample CSS file to be included in the download zip, generating invoice numbers, and many more little, invisible features, all working together.

Phew.

Ready? Steady. Go! 🍾

Launching 1.0

The end of November was nearing and we had postponed the first public launch several times already, due to issues with how the taxes were calculated (hello VAT id validation 🤗) and the huge amount of feedback we got from a closed beta test. So we re-prioritized, postponed tasks of lesser importance, refined existing features and worked tirelessly to get the first version out there before the end of November. Why end of Nov? Because a few days before Harry was in Munich speaking about the project at a typography conference, giving a sneak preview and talking about the process — so obviously we wanted to use the attention there and make the site available as soon as possible!

Trello. 😅
Demo of the type testers on stage.

And then, a couple of days later, on the 30th of November around noon, we finally flicked the switch. Apart from a few minor issues the launch went flawlessly and was met with a lot of positive feedback. We were incrediby relieved.

Nils and Jakob then sent out a super nice newsletter afterwards, the PAGE magazine wrote about it, some design blogs picked up the story and in general the site was very well received. And while we’re of course happy about the reactions we also know how many corners we had to cut, what could’ve been better or didn’t make it at all. So a launch like this is always bitter-sweet… mostly sweet though, admittedly. 😊

So… where do we go from here?

As Harry described in our weekly blog post #48, digital products are never done: We see this release as the very first version and we look forward to continue working with the TypeMates on making it better over time. Many cool ideas, little tweaks and experiments couldn’t be fully realized yet, so there’s definitely much more to come. Now that the site is out there, iteration will be much easier and we can’t wait to see how it evolves.

A huge thanks goes out to Nils and Jakob!

Before we wrap up we want to say “thank you” to the TypeMates for putting trust in us when we were a brand new company and deciding to work with us for the most part of this year. We had a blast and admire your patience, dedication and attention to detail.

We’re very much looking forward to continue this collaboration and will update this case study with significant new developments. Until then, stop looking at these static screenshots and head over to typemates.com! Maybe even buy some fonts! 🙌

A little announcement video we posted shortly after the launch.

Got questions? Need something similar?

Our lead on this project was and continues to be Harry Keller, so feel free to reach out to him in case you want to know more. His email address is harry@diesdas.digital. Don’t hold back! ✌️


diesdas.digital is a nimble branding and product development studio in Berlin, featuring an interdisciplinary team of seven designers, developers and strategists, each with years of experience in branding, interaction design and programming. We create tailor-made digital solutions with an agile mindset and a smile on our faces.

Wanna team up for a project? We’d be delighted! Simply shoot us an email, reach out on Twitter, drop us a message on Facebook, or send us grimaces via Snapchat. We’re also on Instagram and we got gifs over on tumblr, just sayin’. No matter the channel: We’re listening and can’t wait to hear from you!