In present times, any kind of digital medium requires some kind of typographical interface for the user to interact with. Type could account for almost 85-90% of any given screen. Typography is often one of the foundational elements we want to get a handle on as it needs to work harmoniously with other elements like graphical elements and UI controls.
Maison Neue
There are many considerations when choosing typefaces, especially for on-screen usage. In Gojek, we work cross-functionally with brand/marketing teams to accommodate our brand's typefaces and determine how they'll fit into your system. Typefaces significantly helps to convey the right tone and personality throughout the digital experience.
Keeping all of these factors in mind, the typeface we chose was Maison Neue. Its unique personality gives Gojek a strong brand recall across communication channels. The legible form and character work magic on print and digital alike. And with larger scales, it only gets sassier.
Maison Neue is a big family that champions versatility, rhythm, and harmony. Its contemporary and friendly character goes well with the Gojek’s bold and playful personality.
The font owns 12 styles, each with an extended Latin character set and a variety of OpenType features. Besides, it also sports Extended and Mono versions that give us enough freedom to explore typography in unique styles, keeping the brand recall high as a kite!
Typography in Aloha
After deciding Maison Neue as our typeface, the next step for us was to cover some finer aspects of the typography style like the type sizes, weights and styles.
Choosing type weights
Considering the high number of use cases in our designs, we decided to include the Book, Demi and Bold weights of the typeface in our system. We don’t use any form of Italic styling since the number of use cases didn’t satisfy the criteria of including it in our system.
Choosing type hierarchy, sizes, and line-height
Once we decided on our typeface and it’s weights, the next step was to decide on the type size, hierarchy, and line heights. A standard approach to selecting type sizes is to choose a scale. For Asphalt, we had adopted the pentatonic musical scale as the basis. This time, we decided to simplify it and go with a linear scale. Our base font size was set at 9pt with a scaling factor of 1.3x.
The 9pt size was a legacy size from Asphalt. Although it is our smallest font size, for legibility in our design system, we kept the base font size as 12pt.
For line-heights, we follow the same principle for calculating it, as for the type size.
Even though we use the scaling factor 1.3x, in order for the line heights to fit on a 4px grid, we round off the decimal to the nearest value divisible by 4. For e.x. 12pt size type size has a line height of 15.6pt, but we round it to 16pt.
For the type hierarchy, we chose a naming that is clear, direct, and has common usage across both designer and developer lingo. This would ensure that our typography can translate the same across both type of users.
Applying the type scale
The type scale appears as text in components and the overall layout.
Titles
In the type scale, Titles span from Hero to Tiny. Titles are reserved for important text or numerals. Some examples are -
Body
Body text comes in Moderate and Small sizes, and it’s typically used for long-form writing as it works well for small text sizes. Some examples are -
Caption
Caption is the smallest font size. It is used sparingly for cases where we have requirements for styles smaller than the current Title styles. Some examples are -
Building for Accessibility
For our typography styles, we ensure that all text is legible and passes the WCAG 2.0 guidelines for text. For legibility, we have chosen a bigger base font size of 12pt, in order to ensure that even the smallest fonts can be easily read by our users.
For compliance with WCAG 2.0 contrast guidelines, we have tested the text colour against different backgrounds in our system and ensured that all text pass the AA requirement of 4.5:1 colour contrast between text and background for normal text and 3:1 for large text.