Case study: Arup Associates by Figtree Creative Network

When design practice Figtree Creative Network was appointed to breathe life into the branding of architecture and engineering firm Arup Associates, getting the website right was a key concern. As Figtree Creative Network’s head of digital James Hurst explains: “Arup are involved in big projects all over the world with lots of money tied up in them. Your main calling card is your website these days, so a key thing for us was to find a typeface that would inspire the trust that Arup Associates can handle the kind of budgets being thrown at these projects.”

As well as creating a look that would project trust, Figtree Creative Network also thought carefully about Arup’s unique selling points when choosing a series of typefaces. “The thing that differentiates Arup from their competitors is that they’re also engineers, it’s a really important component to their work as it allows them to create buildings others wouldn’t,” explains James. To convey this, Figtree Creative Network chose title type Decima Mono, which had a “Germanic and industrial” feel, and sans serif Din for the body text, to give the copy a paired-back, architectural feel.

Thinking about the accompanying imagery was also crucial. Having worked on many architect’s sites in the past, James knew the one thing that all had in common was a propensity for angular buildings. “Using a serif in that context can be very difficult,” he says. “The type and imagery needs to fit together and feel balanced, as well as looking like they were chosen together at the same time. Selecting a typeface that echoed the angles of the building was very important.”

Using the body copy as a starting point, Figtree Creative Network worked out the type sizes by scaling up, so that they all sat on the same baseline. Providing only four size options also meant that the system would be easy to use for the large, diverse team of Arup employees that would be updating it. “It meant people could log in and update without there being a billion different type options,” explains James. 

Case study: BBC London Calling by R&B Creative

London Calling by R&B Creative featured a strong typographic element to balance the heavy usage of maps for it’s design

Australian agency R&B Creative designed a website for the BBC to demonstrate the excitement of London during the Queen’s Jubilee celebrations for an international audience. Working with the existing brand, R&B made a decision early on in the design stages that the site would need a strong typographical element. 

R&B Creative art director Mark Bannister says: “With the overall screen being dominated by the styled Google map, we wanted the typography to have a heavy impression on the page but still have the flexibility to work at different point sizes.”

Originally, R&B had some slab serifs in mind, chosen because of the ‘ink coverage’ of the characters, but the consultancy also wanted to reflect the culture of London, and so eventually settled on the more expressive Superclarendon, from the Typodermic foundry, for the headline typeface. The added benefit was it offered good readability at different sizes and a full range of glyphs – essential as the site was to be translated into multiple languages. 

Open Sans was chosen as the supporting typeface, mainly for its think cut and glyphs. “It’s always a battle of design versus functionality on projects, and even more so when the site has to be multilingual,” says Mark. But R&B invested time in some in working out ways to respond to different languages while still having plenty of impact. 

He explains that: “A nice trick we used to get around [the problem of] having a fixed text height for the titles of each of the London Districts was to employ some JavaScript that allowed the type to scale. When you are in the district takeover view, the type has been scaled to fill the space and this allowed the typography to make a statement when users first land on the page.”