Create typography tokens

[vnys]

In order to enable the product designers to create interfaces with well-designed typography, we’re going to offer a typography component in Figma – which will also be implemented in code, and eventually replace the React <Typography /> component.

In EDS 2.0 we use a hard grid, meaning that the spacing between text elements is based on the font baseline as opposed to a soft grid where the spacing is based on the (non-existing) bounding box of the text frame.

In Figma we are going to use vertical trim and top padding to make the baseline grid snap to the nearest layout grid, but since the top padding will vary based on the font-size, we’re going to hide the complexity and the calculations inside a component. This will ensure a consistent use of typography while saving the product designers the trouble of doing the calculations themselves.

The exception to the baseline grid snapping is cases where we only have one line of text, such as a button label. In this case it’s better that the text is vertically centred. The typography component therefore needs a toggle button to turn off snapping in these cases.

The Atlassian design system uses three categories for their typography tokens: Title, body and UI. We are considering using the same terminology to differentiate between tokens intended for use inside components, and tokens intended for use in body copy.

Sub tasks:

• Evaluate the usability of the Equinor font in mobile and web apps #3278
• Create proposal for pairing the Equinor font with a UI font #3279
• Present the UI font proposal to brand #3343
• Present the typography proposal with product teams #3280
• Create typography component in Figma #3281
• Update typography tokens in Code #3282
• Create typography component in code #3342
• Define and adjust the spacing scale #3418
• Create spacing definition for Selectables #3420
• Density for Containers #3419
• Create spacing definition for Pages #3421
• Create EDS principles for spacing and typography #3422
• Review and update spacing tokens in code #3424
• Add remaining steps to the typographic scale #3469
• Deprecate density awareness from the Density collection #3470
• Add definitions for space between elements #3471
• Align font scales optically based on x-height #3495
• Density documentation for Comfortable and Spacious #3496
• Video documentation: "how to" for components creators #3501
• Video documentation: "how to" for components users #3502
• Add remaining icon sizes #3503
• Alignment meeting with teams before the release #3504
• Announcement plan for the release #3505

[vnys]

Update: We’re currently waiting for feedback from Figma about an estimated time of delivery for typography variables

[marinalinn]

As we don't have any answer from Figma yet, we will to figure out a Plan B to work on this @vnys

[vnys]

Update: Send another email to Fabian about the typography variables release date

[marinalinn]

We had an answer and they will not have the features we need as soon as we expected, so we will need to proceed with plan b, that is basically do things in a way, so we can forward with the tokens and then when they have the feature re-make it. Now we will work on the Typography component after Victor finish the syntax task that has a highest priority.

[vnys]

We have received feedback from Figma, we can proceed with Plan B.

[marinalinn]

Released on 17 of June 🎉🎉🎉