Fontsmith… or how we learned to love the bitmap.


Background

Fontsmith is a leading boutique type foundry founded in 1997 by Jason Smith. Known for creating fonts with a distinctively human character Fontsmith pride themselves on their deep understanding of form, craft and detail. Along with a strong library of fonts, which they own and licence to designers, advertisers and brands, a significant proportion of their work is the design of bespoke fonts for companies and brands. Fontsmith have earned a strong reputation in this area because they commit serious time to R&D, to ensure that they stay ahead of design movements and technological advances. This principle of craft, design and technology would inform every part of the new Fontsmith website.

Our relationship with Fontsmith goes back further than the latest incarnation of their website. In fact this our third! Each incarnation has moved along with Fontsmith’s business and brand values. Known for their slightly irreverent tone of voice Fontsmith were keen to evolve without losing their personality and tell much more of their story, showcase their library and service offer.

Brief

Typeface design has gone through somewhat of a boom in recent years. With the emergence of new technologies and new platforms a typeface is often the only visual element of a brand, particularly on mobile. With increasing competition from free and open source platforms, such as Google’s own web fonts API, it was time for Fontsmith to communicate the premium nature of a Fontsmith font. Each font has its own personality and story behind its evolution. Often this sense of craft and design was lost and therefore one of Fontsmith’s prime objectives was to make users understand the value of the font and the craft involved behind the design.

Working closely with Jason, Phil, Fernando and Bela – some of the designers behind the fonts – we quickly realised that each font had a character, or set of characters, that the designers were passionate about. Often a single letter could embody a font’s entire personality. So we set about quizzing the Fontsmith team on their favourite letterforms and what made them unique to the alphabet. Going through this process has been an education in itself, and that is what Fontsmith wish to convey to their users. Designers may use type every day, but they almost always won’t understand or see what makes up a font’s DNA. A simple graphic language was developed to showcase what Fontsmith would say is a “Fontsmith ‘y’” (or ‘g’, or ‘a’, or ‘b’…).

A simple graphic language was developed to showcase Fontsmith font features

The depth of content associated with each font is now so much greater that the user really gets a thorough understanding of the design craft behind each font. More often, than not, designers are purchasing fonts for clients and brands and this storytelling helps designers sell the font to their client.

Each font has an Overview, Weights, Character Set, Test Drive and Buy tab associated with it. Splitting this content across a number of tabs allows the user to focus on a particular attribute of the font clearing the screen of additional information.

Content was split across tabs allowing greater focus on font attributes, such as character sets, weights and test drive

Messaging

Throughout the website, the messaging is consistent: Fontsmith are a dedicated and knowledgeable team of designers with craft, design and technology at the heart of everything they do. Within the case studies, like the fonts pages, we asked Fontsmith to tell us more about the stories behind the some of the custom font designs they have carried out for national and international brands. Using a simple eyeglass device, we were able to draw some of the design details out of the font.

Working closely with Fontsmith we were able to bring case studies alive with greater detail and clarity

Licensing

However, of greater significance, is the way in which Fontsmith want to licence their fonts. The traditional model is to purchase a licence based on the number of users, regardless of who they are, be it an individual or a multinational. This can then further be complicated if the user wishes to add on further conditions, such as use in more than one country and sharing with suppliers.

To make buying fonts easier Fontsmith have developed a new approach to their licences. Like a lot of software companies, they have introduced tiered licencing with clearly defined usage scenarios. Fonts are fonts, but ultimately they are pieces of software you install on your computer or server. Now when you purchase a font from Fontsmith you get to choose between Studio, SME, Digital or Brandfont® licences.

Each licence has a clear definition of what the purchaser may or may not do. In particular, Fontsmith’s new SME licence allows a Small to Medium Enterprise to buy a font family that is available for use both in print and on their website, across countries with the ability to share with up to three suppliers. This demystifying of the licencing process was at the core of the design brief and the user journey from viewing a font to purchasing it.

Steps were made to make the new licensing model as simple and clear as possible

It took several iterations to create an interface that introduces the licencing information at the right point through the user journey, making it clear and easy to purchase.

Fontsmith clearly have their finger on the pulse, as other font foundries are following suit.

Brandfont®

As part of a review of its licencing model, Fontsmith launched its new service, Brandfont®. The majority of designers Fontsmith work with, work in branding and want to use their fonts as the basis for something customisable and ownable. Because they have a reasonably extensive font library and are still a small company focused on creativity, they can do what they like with their typefaces to meet designers’ brand needs.

Born out of the constant question “how can the font we choose for our brand be distinctive, practical and not cost the earth?”, Brandfont® is aimed at agencies working for large brands and organisations.

Brandfont® is tailored specifically to offer solutions to any creative brief, ranging from simple corporate licensing and minor modifications, to full bespoke font creation and support. This is the type of work Fontsmith are best known for and have been doing for years, and Brandfont® wraps all those customer requirements under one licence.

Responsive design… and learning to love the bitmap

Since the last iteration of the Fontsmith website, there has also been one other significant change in the way users view websites: mobile. With the advent of high pixel density displays (or Retina screens) comes a great opportunity to show off font details hitherto only achievable on paper, but also challenges.

Web fonts have come on a long way since their introduction but the way a browser renders a font varies across browser vendor (Webkit, Mozilla, Microsoft, Opera et al), operating system and device so much that a user will never get an accurate impression of the detail of a font. Couple that with the fact you often cannot show all of a font’s Open Type features (Discretionary ligatures or Contextual Alternates anyone?) we had to resort to showing the fonts with good old fashioned bitmap graphics.

That then presented another problem: how do you show a character set with different line lengths across devices? Well typeset them at different line lengths of course, and then swap the bitmaps out with Javascript depending on viewport. Not groundbreaking, but some of the decisions and hurdles that had to be overcome along the way.

Of course, we explored the <picture> and <srcset> element along the way, but found support for these to be lacking even in the most up to date browsers. We certainly look forward to the day when you can show an entire font complete with glyphs using just a web font.

CMS

The content management system – the glue that holds it all together. We always knew it was going to be complex, so our first piece of research was could we do this with a open source software rather than building a bespoke solution? Our first priority is to always build something appropriate for our client, but in this instance Fontsmith’s unwavering stance on design and the complex licencing model (under the hood!) meant bespoke was the only option.

Our bespoke Rails application allows Fontsmith to manage their library fonts, view orders, and publish content to the entire website. No mean feat! 26 branches and 21,311 commits (and counting) later, it’s our largest application to date.

Object Orientated CSS

When a project of this scope comes along, it often forces a rethink. As a team we had been exploring ways of working better together and creating leaner websites. This project forced our hand. From the designer, to the front-end developer through to the back-end developer, we all needed one of way of developing a website.

A website of this size needed to load quickly and remain maintainable from 2 to 3 years from now. Through research of new ideas within OOCSS, we quickly developed our own hybrid solution.

When making additions to the Fontsmith website, we wanted to be able to pick from a set of modules and styles to build a brand new page without necessarily writing any new CSS. This has major advantages when it comes to the speed of rendering and also maintainability as a developer is less likely to break layouts or styles as styles are decoupled from content and layout.

The advantages are myriad. Even through the 9 month development cycle, we could see that the stylesheets remained maintainable.

“Taylor/Thomas have made the difference in Fontsmith not just having a site that just works, but having a site that is incredibly well thought out and detailed. They took time to really understand how the business works and how we need to continually adapt. For a business like ours, their insight is invaluable.”

– Jason Smith, Director, Fontsmith

www.fontsmith.com

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.