Illustration by Fred Jesus

An iceberg sank the Titanic. But what’s that got to do with text hierarchy?

Pedro Teixeira
Jun 27 · 4 min read

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.

significa.co
  • 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.
Breakdown of text hierarchy through font family, size and spacing

A bold move

Let’s face it: this was a bold move. But did it pay off?


Significa Blog

Significa is a design-led agency focused on product development: we take on products from inception to launch, from business model to people’s pocket, from wireframe to continuous deployment.

Thanks to Pedro Brandão.

Pedro Teixeira

Written by

Designer @Significa

Significa Blog

Significa is a design-led agency focused on product development: we take on products from inception to launch, from business model to people’s pocket, from wireframe to continuous deployment.