Line height options authoring guide

Synapsis: This line-height option is intended for scenarios where multiple font styles or superscript text are used within the same sentence, helping maintain consistent alignment, readability, and visual balance.

Note: There are three line-height options available across all Rich Text Editor (RTE) fields. This feature is particularly useful when using the SignPainter Regular font style for title text, superscript text, or other mixed-font-style scenarios. Applying the appropriate line height helps maintain proper text spacing and prevents overlap with subsequent lines. This line-height setting overrides all existing text styles.
 

Instructions:

This line height option has been tested and validated for the Banner Hero component and scenarios that include superscript text. If authors intend to use this option in any other component or scenario, all feasibility, functionality, visual design, responsiveness, and accessibility aspects must be thoroughly evaluated and tested across all supported screen sizes before implementation.

Apply line height as the final styling option for a sentence, as it overrides all previously applied text styles.

Scenario 1

Line height for signpainter text(Banner Hero)

Ingredients: Banner Hero Component 

With Line height Example (After applying line height) - In the example below, we applied a line height of 120px (Line Height 1) to demonstrate the spacing effect between lines of text.

When combining Formula Narrow Semibold and Sign Painter text styles within the same sentence or heading, authors should use the corresponding Sign Painter heading size and line-height option to maintain consistent visual sizing and typography. For example, Formula Narrow Semibold Heading 1 visually corresponds to Sign Painter Heading 1, even though their font sizes differ (72px and 115px, respectively). In such cases, authors should use Line Height 1 with Heading 1. The same principle applies to Heading 2 and Heading 3, where the matching Sign Painter heading level and corresponding line-height option should be used to ensure visual consistency when mixing the two font styles.

Variation 1

Variation 2

Ingredients: Banner Hero Component 

With Line height Example (After applying line height) - In the example below, we applied a line height of 90px (Line Height 2) to demonstrate the spacing effect between lines of text.

Variation 3

Ingredients: Banner Hero Component 

With Line height Example - In the example below, we applied a line height of 60px (Line Height 3) to demonstrate the spacing effect between lines of text.

Scenario 2

Line height Superscript Support

Ingredients: Container and text component

In this scenario, we are demonstrating the Line Height options across all supported variations while ensuring that superscript text is displayed correctly and maintains proper alignment within the content.

Variation 1

This variation demonstrates the Line Height 1 (120px) option with text containing superscript content.

Fiserv than™

Variation 2

This variation demonstrates the Line Height 2 (90px) option with text containing superscript content.

Fiserv than money™

Variation 3

This variation demonstrates the Line Height 3 (60px) option with text containing superscript content.

Fiserv moves money™