An iceberg sank the Titanic. But what’s that got to do with text hierarchy?
Text in user interfaces, when it’s well implemented, can create emotion. However emotion can be very subjective. How many of you cried when Rose refused to share some of that door space at the end of Titanic? You didn’t? I’m guessing you’re as cold as an iceberg.
The same cannot be said for purpose. While a door is normally meant to open and close, keeping people in or out, in the case of Titanic, it was used as a lifeboat.
Sure you can get creative with text, but normally it has a singular purpose: to inform. You can enhance readability and usability by creating hierarchy, an easy to implement concept when it comes to typography that enables users to navigate the layout at a glance and quickly scan to find the information they’re looking for.
Normally 3 levels of hierarchy will suffice, with a headline, subhead and paragraph created from 5 possible text variations: family, size, weight, colour and spacing. Bigger & bolder? It must be more important! Black text next to a grey text of the same size? You get the idea.
But what would happen if we removed two elements from that equation? Just like Mr. Di Caprio, we would be in some deep cold waters.
Function over emotion
When designing the new Significa website we decided to face the iceberg head on. We took emotion aside and focused entirely on the core functionality of text.
By imposing limitations to the variations we could use, we created the entire text hierarchy by using 2 different font families with only one weight a piece, recurring exclusively to font size and spacing to organise the website’s information.
But why did we really do it?
Sure we could argue that it was done to optimise the speed of the website. On a regular day, this would not be far from the truth as it’s always a very good practice to use the least amount of web fonts and font weights when developing a website. It improves performance and consequently the overall user experience.
But that was the added bonus. The cherry on top. The real reason lies somewhere between purpose and pure joy (we had a blast doing it).
Nowadays, websites are saturated with text variations used merely for visual impact and almost never for their true hierarchical purpose. Sure they can look great but if you dive deep into their structural hierarchy you will most likely find flaws. By flaws I don’t mean it’s wrong, only unnecessary. The same level of hierarchy could be achieved using less text variations with little to no compromise to its visual counterpart.
Here is how we did it:
- Font families: We used 2. For page and section titles we used Acta Deck, a very elegant, well designed serif font by our neighbours DS Type. To contrast, the Graphik font by Commercial Type, a sans serif font that was used for links, paragraphs and labels.
- Font weight: Only one a piece. Regular for both families.
- Font colour: Black in white background. White in black background. That’s it! Oh and #ff0154 (Significa purplish blue) for links and actions, of course.
- Font sizes and spacing: It was the relationship between these two that helped shape the entire hierarchy on the website. By changing the font size slightly and adjusting the spacing between elements we could create several combinations of text. Title with label. Title with paragraph. Paragraph with list.
A bold move
Let’s face it: this was a bold move. But did it pay off?
The perfect product is the one that balances function and emotion. I find that most of the time, one is consequent of the other. You create a very functional text hierarchy and if well designed, it will be great to look at.
But, in interface design, text is rarely the sole character. It’s normally accompanied by images and other visual elements that come together purposefully to create emotion and simultaneously deliver information.
In the case of our website, emotion comes from our case studies, our team members and our office, so by focusing primarily on the true purpose of text, we allowed those elements to truly shine and information to flow seamlessly, both structurally and visually.
Unlike the Titanic, I think this ship has crossed the Atlantic.
Visit us at significa.co
