New utilities for body text

[julien-deramond]

Prerequisites

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

Proposal

Right now, folks can use the .lead class to render text content so it's more readable and less condensed. It's maybe not the initial purpose of the .lead class in Bootstrap.

Our .lead class is currently defined by the rules in Web Typography - Body

Size	font-size	line-height	letter-spacing
Desktop	20px	1.5=30px	-0.40px
Tablet	18px	1.5=27px	-0.20px
Mobile	16px	1.5=24px	-0.10px

This feature request is linked to new design tokens that are created (and not yet available directly in the DSM) that will define 3 variants of the body text:

• Small
• Medium
• Large

These 3 variants will have different combinations of font-size, line-height, and letter-spacing linked to the 3 breakpoints (desktop, mobile, and tablet).

The idea would be to determine whether we need to introduce new utilities for the developers to manage easily their text content. Here's a first idea that'll need to be fine-tuned later on:

• .body-sm
• .body-md (that could have the same value as .lead)
• .body-lg