Large body text size

[jahredhope]

Motivation

Currently there are two supported body text sizes. small and standard.
There is a need to create important, standout or lead information in designs.

We've looked at using use-case based naming however these often don't support the variety of situations where it might be used:

• lead
• lede
• important
• intro

Currently work-arounds appear to be created by using subheading in areas where the text is not a heading. This causes semantic issues but also creates undesirable additional bottom margins that are supplied for headings.

Proposed solution

<Text large>

A Text node with large will use the standard size line-height, font-weight and bottom margin.
A Text node with large will have 18px font-size.
A Text node with large will not have the additional bottom margin supplied to heading sizes.

large will be added to the Text props interface making it available to components that use the current text props.

[jahredhope]

The question of line-height was brought up in offline discussions. Whether the large body text should be over the standard 4 rows, or over 5 rows.

4 rows may look tight.
5 rows would result in differences in vertical space between body text which may be undesirable, and may make some text look too floaty.