Typography

Our typography, the most important medium of communication in our platform, needs to be perfectly legible to convey the core value of our brand.

Principles

The primary face of our communication.

The faith theory won't work when it comes to communication. As a brand and a product the way we communicate should be clear, loud and meaningful. So the question is how do we represent our most meaningful and valuable ideas through our type? The answer is simple here, go with the most legible and compatible typeface available to our platform. Choosing these certain typefaces will ensure less risk when it come to the clarity of the messages as well as the displaying on the devices.

Being the face of what we believe.

Being the biggest revolution in Indonesian lifestyle, GO-JEK is about being the change to the modern civilisation. Hence the voice should be quite unique, distinguishable and focused. There comes the difficult part, by using the legible and compatible typeface for clarity we have almost sacrificed the character (Identity) of the brand. Thus the opportunity of giving a character has given a space to introduce a new typeface with a good recognisable feature.

Our typefaces

typefaces

Neo Sans

Neo Sans is used as the display typeface, which represents the core value of the brand by giving a unique identity.

Neo Sans is designed by Sebastian Lester for Monotype Imaging in 2004. While designing, the client’s need was to create an ultra modern typeface that was futuristic without being gimmicky or ephemeral. His research indicated that the principal ingredient of an “ultra modern” typeface was simplicity in character structure. The typefaces that would later become Neo Sans and Neo Tech took carefully drawn, monoline forms, with open letter shapes and smooth, strong curves.

neo sans font

Roboto (Android)

Roboto is the standard typeface on Android. Considering legibility and compatibility Roboto is considered as the best on android devices. It works well with variable screen resolution, which is one of the highest criteria considered while choosing the typography.

Roboto is a Neo-grotesque san-serif typeface designed by Christian Robertson for Google and made publicly available in 2012. Google describes the font as "modern, yet approachable" and "emotional” Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

roboto font

San Francisco UI (iOS)

San Francisco (SF) is the system typeface in iOS. The fonts of this typeface are optimized to give our text unmatched legibility, clarity, and consistency.

San Francisco is designed by the in house team of Apple in California. It was first released to developers on November 18, 2014. The main reason to introduce a new typeface to iOS devices is the poor readability of the previous typeface, Helvetica in small sizes. Still quite a few designers believe that Helvetica was better than San Francisco. San Francisco achieves better readability by using two different variant of typefaces Display and Text. Display is mostly meant for large canvases yet the Text version is used in smaller formats. Many issues in the smaller size has been resolved by readjusting the x-height and aperture for better readably in Text version of San Francisco.

san francisco font

Measuring the type

The classic typographic scale is a harmonious progression of font sizes, like the notes of a musical scale. Because the classic typographic scale is a scale, it must obey the scaling property: if “x” is a size in the scale, then “r*x” must also be a size in the scale, where “r” is the ratio of the scale. This ratio is a defining property of the scale. We can use this property to continue the classic typographic scale to much larger font sizes.

typographic scale

General Rules for a scale

There are three different rules we need to follow to create any universal scale.

  • Rule 1
    The sizes 6 pt, 12 pt, 24 pt, and 48 pt are all present in the typographic scale. Consequently, the ratio of the classic typographic scale is two. The classic musical scales also have a ratio of two. Each C note on a piano, for example, vibrates twice as quickly as the previous C note. The classic typographic scale is very much like a musical scale.
  • Rule 2
    The second defining property of a scale is the number of notes, n in the scale. There are five sizes in each interval of the classic typographic scale. As a result, the classic typographic scale is a “pentatonic scale”—like Jazz and much of the world’s traditional music.
  • Rule 3
    The third, and final, property of a scale is its fundamental frequency, f0. On a piano, this is the frequency of the “middle C” note. In the classic typographic scale, the fundamental frequency is the pica. This value, 1 pica = 12 pt, is the baseline font size used in print typography.
typographic scale equation

Pentatonic Scale

After defining these rules we went back and calculated the classic typographic scale again. We found that the intuition of the human typographers was extremely close! However, there are a few discrepancies:

  • First, there are four lost notes: the 28 pt, 32 pt, 42 pt, and 55 pt font sizes. These lost notes were not listed in the original typographic charts, despite being perfectly in tune with the rest of the scale. These notes are necessary to complete other notes that were listed in the original typographic charts. For example, the 16 pt font size is completed by the 32 pt font size—which is one of the lost notes.
  • The second issue is that two of the notes are flat. The 60 pt and 72 pt sizes are off by a total of 4 pt. These two font sizes were rounded down to the nearest multiple of the pica, so this may have been a practical concession for early printing processes, rather than a true error. However, the result is that modern typographers have inherited two notes that are not quite in tune.
  • The final discrepancy is that there is an extra note: Every interval of the classic typographic scale has five notes, but the original typographic charts have six notes in the first interval. The 11 pt font size doesn’t belong in the scale. It would sound sharp or flat if played by a musical instrument.

So in calculation taking f0=12pt, r=2 and n=5; we have go the pentatonic scale as follows.

typographic scale example

We have taken the leading as f(i+2) through trial and error method, which is working well across all the sizes here. We are mostly using sizes from 10.5pt to 21pt in our platform. To find bigger sizes we can just follow “r*x” rule, where r=2 in our case. By keep multiplying the existing size with “2”, we will be able to get bigger sizes in need.

typographic scale example

Typography on Application.

Typographic Components

These components are the building blocks for any visual composition where the typography is used in Asphalt. There are many combinations of header and body texts following the scale defined for typography.

Android typographic components are given below as the same scale will follow in iOS as well with the change in body fonts as SF Text Pro. The leading is not mentioned here since it’s follow the same rule of Pentatonic Scale of typography.

typographic components

By arranging and manipulating these components in the right way to use it in your designs will generate the Asphalt typographic structure. Check the following example for reference.

Typography on Cells

typography on cells

There are many cells associated to each products although some cells are used in multiple products. Most of the cells are associated to a certain action that the user needs to take and interact with the product. Hence it is so important to follow a certain hierarchy in the typography to make it easier for the user to follow the message.

Typography on CTAs

typography on CTAs

As you can see in the following examples, the typography is well placed to create a hierarchy to the message as well as falling the pentatonic scale we have defined.

Conclusion

Though there are certain rules associated with the typography, it is all about how creatively we use it in different contexts. If the creative side weighs more, the rules start getting frozen. Rather forcefully tweet the composition according to the typography, we can reconsider the topographic rules with a certain fine tuning and match to the composition.