(Draft) Research into line height for buttons w/ CSS solution? - Dev

[LWWright7]

Description

The line height on buttons is such that when the text wraps to 2 or more lines the text ascenders and descenders touch or nearly touch.

After researching line height options that USWDS uses and discussing the options with Matthew D., the decision was made to go with the 1.15 rem spacing when text wraps to 2 or more lines:

However, if we assign that 1.15 rem value to the button as default, it makes the height of the button larger:

Details

Matthew said that a solution to this issue might involve some creative CSS and to reach out to dev team. He suggested that a container query or a property on the button container might make this solvable on the dev side.

This ticket is to do the research to determine if that "creative CSS" via container query or prop would be a viable solution

Tasks

• [ ] Research the above topic to determine if the solution is viable from a dev perspective

Acceptance Criteria

• [ ] ?????

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc