Tungsten: a modern, industrious font
Objective
To create a page designed to showcase the different nuances of the font, Tungsten, by Hoefler&Co. alongside potential uses of the font. The page needed to be formatted to fit desktop computers and had to be delivered along with the accompanying mood boards, sketches, wireframes, and style tiles.
The font
Designed in 2014, Tungsten is a relative newcomer. It was modelled after the iconic sign painting fonts commonly associated with painted signs. Using gentle curves combined with rectangular forms, it’s commonly grouped in with other “Modern Gaspipe” fonts. It comes in three weights, Condensed, Compressed, and Normal, along with matching italics. It supports characters for 140 languages in the world.
The tools
InVision, Photoshop, Illustrator
The process
Working with Tungsten was something I was originally a little nervous about because it was just outside of my comfort zone. It’s narrowness and angularity made it a font that I wouldn’t have necessarily been my first choice, but the more I worked with it the more I fell in love with it. Its roots as a sign painting font give it a timeless, iconic quality that makes it work well either as body copy or as a header font. What originally felt like an impermeability, became a very stable, balanced feeling, and I really started to appreciate the interplay of square, circular, and triangular shapes in the font.
The inception
The first thing to emerge about Tungsten was its moods. Every mood that was evoked was strong, and direct. This is not a soft or gentle font. Instead it’s assertive, zealous, productive, energetic, direct, industrious. Things happen with this font. It evoked bright colours and shades, primary blues and reds, saturated oranges, greys that were nearly black. It brought forth textures of stone, marble, concrete, cast iron, machines, things that can’t be broken.
Two distinct sides to Tungsten became apparent as more time was spent with the font. On the one hand there was something about the assertiveness and solidity of its shape that really spoke to its roots in hand painted, propaganda posters, and on the other hand it felt very modern. Images of marble, metal, and condo windows started to emerge, something that was so current it measured its age in seconds.
The mood boards
I began by looking up constructivism, propaganda, modern architecture, and futurism. For one mood board I focused primarily on brutalism, and propaganda, and was especially moved by a poster for the Expo Constructivisme Russe at the Musée d’Art Moderne in Paris. The bold, abstract shapes, and highly contrasting colours lead me to images of brightly coloured buildings and tennis courts and also to anaglyph style images and collages from the 1960’s that used both monochromatic photos of humans along with fun shapes and colours.
For the other moodboard I started looking at photographs of minimalist architecture, modern brutalism and city life. A photograph of sunglasses especially stood out, the chrome lenses provided a strong jumping off point and lead me to textures like marble, and metal.
In the end I decided to go with the first moodboard because the colours and shapes felt more impactful and I wanted to explore the idea of taking very retro images and finding a way to make them modern enough that they effectively showcased the font.
The style tiles
For the style tile I isolated elements from the posters and collages in my moodboard. What jumped out was the shapes, especially the circles. They felt like a nice contrast to Tungsten, but still in the same world. The interplay between those illustrative shapes and the photographs of people created a really fantastic sense of movement and play and it created a range of textures to use.
For the colours I initially looked at using a white, black, red colour palette, but this felt like it has been done so much that I wanted to try something else. For this I turned to the anaglyph images and the photos of architecture and came up with a red-orange and turquoise and added in the red, black, and an off-white as secondary colours. Combining the colours proved to be challenging because I really wanted notes of red there, but it doesn’t blend well with the turquoise and red-orange. What ended up working was using a shade of red and making sure that it wasn’t directly next to or over top of the orange. I was worried that I would be tempted to use red more than orange because it’s a more comfortable colour for me personally, but overall I’m very happy with how it was used in the final landing page.
One major design decision was the use of buttons. I had decided against using them, because I wanted to experiment with framing the call to action in different ways, such as by placing it in a grid, or strategically placing it in an image. I think this was largely successful and gave me a chance to use colour to indicate where it was on the page. The only thing I would change is that I would have created a different state for when it was being hovered over.
The landing page itself
For this project I started building fairly quickly and a lot of things were figured out in the process of building. In future projects I will try to do a better job of showing my work, because I think there were a lot of earlier decisions that may have been interesting to bring back later in the design process.
The title screen was established fairly quickly, while building the original shapes I discovered that I was a fan of using some distressed textures and decided to incorporate them into my style sheet. Originally I tried to bring in an element of the anaglyph to the title itself, but after sitting with it for awhile it felt like it took away from establishing the font so I decided to remove it.
Based on the title block I had thought that the landing page would be much more illustrative, but I really liked the effect of using the monochromatic photographs and it felt like an easy way to modernize the look of the page. I did have to be careful to balance illustration with photography though, as it could end up being too heavy handed.
One major challenge was something I fully did to myself. I had wanted to display the language capabilities of the font by showing the same sentence in different languages. I hadn’t considered how difficult this would be until I had tried to do this in English and French, though. What helped was picking a very iconic sentence, “all animals are equal” from George Orwell’s Animal Farm because it was easy to find in different languages by navigating through Wikipedia. In the end I was able to find translations in French, Polish, Swedish, Albanian, and Latvian, and I feel like the extra characters were given a chance to shine and like the choice in quote also added to the printed poster propaganda feel I was trying to achieve.
The results
This landing page feels like an effective way to showcase Tungsten, while immersing the viewer in a strong visual experience of the font. The colours feel well balanced, and not overwhelming, and the graphics breakup the page in a visually dynamic way. It feels unified without being repetitive and like a good use was made of InVision’s interactive options. InVision itself feels a little clunky as far as transitions, but the idea of what a fully developed page would be like is still clearly communicated. One thing I could stand to improve is to have a better understanding of how to size things for the web, in particular how to do so while working on a Retina display. Overall this is a strong page that tells the story of what Tungsten is like without being repetitive or too much.
