[Theming] As a user, I want to be able to apply secondary typefaces and customise my typefaces for different html roles

[clukhei]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

• New primitive token for monospace and serif
• Add semantic font faces tokens for different typography types - header, body, label, caption etc

this covers the page level content

Motivation and context

Currently, system only offers one font family Inter . Does not cover monospace for code texts etc.

• It is a common design practice to use multiple font families in a design, and this certainly goes for user interfaces.

• Multiple fonts (when used appropriately) can add readability and enhance user engagement by using different fonts, weights, and/or styles to different functional areas of the UI.

• Using a particular font design/weight/style helps cognitive accessibility of the app though visual separation, emphasis, and definition of functions, controls, dialogs, etc.

• Conversely, using a single font-face design, weight, and style will often feel "stagnate," banal, flat, and uninteresting.

• Designs using multiple typefaces tend to have a greater feel of "depth", contrast, and dimensionality.