There are several typographic styles used throughout the editor, including:

• Body text at 13px
• Help text at 12px
• Labels at 11px, all-caps

However, these styles are not globally registered, leading to inconsistent and ad hoc usage across the interface. For example, in the data views pagination control, the 'label' styling is applied ad hoc to the 'of 3' suffix here:

This means that if the label style is updated in the future, this suffix will not automatically align with the preceding label leading the UI breakage.

Another problem is unique type styles, such as the section headings in the Editor Preferences modal. This is an inevitable consequence of using such a small / rigid scale and leads to inconsistency and fragility in the overall design. Some of these pain points are already felt in Data Views as mentioned above.

Establishing beautiful and consistent typographic rules will be increasingly important as the admin redesign progress and we begin building UIs outside of the Editor interface (settings forms and so on).

Solution

To ensure design consistency and ease of maintenance, we should establish a set of typographic styles that can be utilized throughout the admin interface.

Goals

• Develop a comprehensive set of typographic styles.
• Define high-level heuristics like how weight is applied.
• Ensure that all typographic elements in the UI adhere to these styles.
• Facilitate easier updates and maintenance of typographic consistency.

Let's discuss which type styles we'll need keeping in mind high-density UI's like the block inspector, but also admin pages like settings screens where there can be more breathing room. As we explore properties, ideally line-height values should be multiples of 4 to align with the 4px baseline.