Metric — Typographical Specimen
A UI project focused on the importance of typography
1. Introduction
For this project, we were given a typeface by random. We were then tasked to research our typeface history, creating a design inception sheet, making mood boards and then creating a landing page that showcases why other designers should use the font.
With that in mind, I was tasked to explore and create a landing page for the typeface Metric.
2. Research
The Creator
Metric is designed & created by Kris Sowersby. Kris is a New Zealand typeface designer. He created the Klim Typeface Foundry where various fonts like Calibre, Domaine & Karbon were designed. Klim won various international awards throughout his career. Metric was born on the year of 2011.
Font Type
Metric is a Geometric Humanist San-Serif type face:
- Geometric stands for type faces that are sans serif faces that is constructed from simple geometric shapes, circles and/or rectangles.
- Humanist states that it is developed for human reading
History & Inspiration
The idea behind Metric first started when Kris was in Berlin Germany. He was intrigued by the accuracy of the street signs in Germany. The fonts used on the street signs were engineered to be mathematically to the point.
“The geometry intrigued me, allowing the letters to stretch and condense to accommodate various lengths of street names. The o looked like a perfect oval, b d p q felt like a practical joining of the o and a stroke, t is a simple cross, ß is beautifully sharp and the stroke weight is ideal.”
— Kris Sowersby
Kris later found out that engineered accurate fonts, maybe perfect on paper, but it is not perfect to our human vision. Kris therefore created the Metric typeface that is optically corrected for human viewing. Metric designed to be the most accurate typeface for our human reading.
“Metric is an attempt to temper the geometric tendencies of the engineer by the hand of the typeface designer. The letterforms in Metric is, of course, optically corrected.”
— Kris Sowersby
Metric Used In The Market
Metric can be used on various types of products and brands. Examples include Fisher & Paykel, a kitchen appliance company and the Financial Times. The use of Metric is intentional. Fisher & Paykel may have used Metric as a typeface to represent its brand being modern, reliable and elegant and that people who uses Fisher & Paykel products can trust their products to meets the needs of its customer’s kitchens.
3. The Design Process
When starting the design process, the first question that I was faced with is Why should another designer consider using the typeface Metric?
The Why
Metric is a trustworthy typeface that is engineered just for you
Figuring out why took a few iterations. It started pretty vague.
Iteration 1: Their product has elegance, accuracy, quality trustable.
Iteration 2: To express something that is accountable, accurate and trustable
Final Iteration: Metric is a trustworthy typeface that is engineered just for you
Once a concrete why is determined, I filled in the remaining areas:
The Mood
From my why I have determined that Metric would give certain vibes. Based on the history of how Metric came to be.
Modern, Elegant, Calibrated , Dependable, Perfection, Accurate
The Visual Language
After having a mood filled in, I dived deeper into specific areas of the visual language.
Colour
For colour, I have picked modern colours that are drawn from various modern architecture where everything is concidered and designed with a purpose in mind. A contrasting colour Sienna was picked to give a bit of pop to the colour pallet.
Movement
For movement, I believed that the design of the landing page should be flat, smooth and subtle to compliment the modern and elegant nature of this typeface.
Shape
For the shape, I believed the design of the landing page should be utilizing its san serif and geometric characteristic of the typeface Metric. Therefore I wanted to be in perfect circles and rectangles with soft and round edges.
Space
For space, I drawn ideas from the modern architectures mood board. The design of the landing page should reflect accuracy, equally spaced and well engineered layouts. This would accurately reflect how Metric’s design philosophy as being the most accurate engineered typeface for human viewing.
The Mood Board
For the mood board I went for modern architectural structures. This links to why Metric is a trustworthy typeface. Modern architectural structures pays attention to key intentions that makes it functional and symmetrical. As seen below, everything is engineered with intent and reason that is both functional and clear.
4. Design of Landing Page
Once I fully understood why a designer should use Metric as their typeface and also the characteristics of Metric. I started by incorporating various characteristics from my design inception into my wireframes.
For the first idea, I started with the key moods in mind. I wanted to incorporate various products that reflect the mood of modern and elegance to show case how Metric could fit in if designers were to incorporate Metric to their designs. With it I purposed to design something that is inspired through Johnny Ive, Chief Designer at Apple Inc. However after some feedback, I decided that I should be more focused on selling the font rather than implementing a theme to showcase the typeface.
This led to my next two iterations which is focused on refining and focusing on show casing why other designers should use Metric as their typeface. I have chosen to keep a modern and simple structure that also shows intentionality by having it vary between each slide. No clear border between sections was used to show smooth transitions between sections. Round edges and squares are used to show case the nature of the san serif typeface. Content wise I focused on key moods and why Kris created this typeface Metric. Images are hand picked to compliment the key moods when shown.
Goal of Landing Page
To showcase why other designers should consider using Metric by giving certain moods to its users and also on why Metric was created.
5. Prototype
