Create typography component in Figma

[vnys]

While we’re waiting for typography support in Figma, we have to create a typography component without using variables or styles.

Sub tasks

• [x] #3285
• [x] #3345
• [x] #3347
• [x] #3348
• [x] #3365

[marinalinn]

Typography component was presented to Mobility team on Friday 8th, and during week 10 it will be presented to branding.

[marinalinn]

Review, week 8: Week's objective: Evaluation of Equinor font for mobile and desktop

• Evaluation of current user flows on mobile
• Evaluation of current user flows on desktop
• Evaluation of its font weight and optical font size
• Comparison of its readability standards with other fonts
• Evaluation of its readability with the new color definitions

Equinor font review:

• Lack of readability on large texts
• Weak optical font size
• Weak character recognition in lower font sizes
• Need of adjustments in the line-height
• The lack of character recognition make it harder to read data on components as tables
• The lack of character recognition make it harder to compare data information on different crucial user interactions in the product.
• The font is based on a geometric proportion instead rational or dynamic which does not make the reading easier (link here).
• Values for X area, ascenders and descenders are lower than the standard for reading.
• Is a single-storey font which make it harder for eye-scanning and quickly text recognition on UI components.
• Is a font that communicates concepts and a specific tone of voice which works great when we can play with different sizes so the readability aspect can be covered in that way but not readable on large texts and user interactions on the product where readability have to be the first on different font sizes specially for low values.
• Equinor font is based on a constructed geometric proportion (link).

Observations:

• We lack of a proper research related to user interaction on offshore, but we know there is an important case to evaluate where users interact with the screen in scenarios on offshore with very different light, an EX cover for the mobile and gloves, which affects their safety conditions at the moment to take decisions on the field, so it was taken in consideration to implement a bigger spacing for UI elements to increase the touch target area. And with this open a door for future and proper research at the moment to evaluate offshore safety conditions.
• On our products users needs to eye-scanning tones of information so is expected to have a rational or dynamic font for these interactions.
• Our users also need to constantly compare lot of information during the user flow.

Review, week 9: Week’s objective:

1. Evaluation of San Francisco and Inter fonts
2. Typography component

Review:

• San Francisco and Inter fonts are similar in a 98%
• San Francisco font restrict its usage only for the design and development of applications for Apple's platforms.
• Definition of usage for San Francisco and Inter fonts
• Meeting with Mobility team and the proposal was accepted 🔥🔥🔥

Observations: “Apple restricts the usage of the typeface by others. It is licensed to registered third-party developers only for the design and development of applications for Apple's platforms.[11] Only SF Pro, SF Compact, SF Mono, SF Arabic, SF Hebrew and New York variants are available for download on Developer website and they are the only SF variants allowed to be used by developers.” link here

Review, week 10: Week’s objective: Typography component

Review:

• Typography component finished with variants for:

• Mobiles
 --> Headings: Equinor font
 Body: Inter font
 UI: Inter font
 UI fluid: Inter font

• Web
--> Headings: Equinor font 
Body: Inter font
 UI: Inter font
 UI fluid: Inter font
• The typography component was tested on different components for web and app.
• Meeting with Branding and the proposal was accepted 🔥🔥🔥

Observations:

• Colours: for the colours on apps, it will be necessary to make a difference between apps that are only informative and apps that provide tools for our users where they are able to complete their work, as Notifications, Work Orders or Inspection App. With those different type of apps we have also different type of content so a need of different state colours and the way how we communicate our brand and our products. Example: informative apps would be a mirror of .com and branding way to communicate, while the other "management" apps should follow the way we build product interfaces.

All the weekly reviews can be found in the Reviews page on Figma. Figma file link

[marinalinn]

Review, week 11, March 18th: on process Week’s objective: Spacing tokens

Review:

• Definitions between different text styles. With the typography component we have different text styles for different interactions but which should be the spacing values between those elements?, even when this work was already started in the last week the scope of this week is to finish it. Example: how much spacing we should have between an Equinor font heading and Inter font body text? Desired outcome: A list of values with the combinations of different text styles, so Product Designers or Developers doesn't have to make this decisions but just check the table of values.

Observations:

• Nice to have (but not sure if I will have it ready this week): spacing definitions for values between components. Work started during the spacing research on this Figma file on Surface testbed page.