Typography: Consider making responsive typography inherent to Pharos

[daneah]

The problem

In recent work that has required responding to different screen widths with different font sizes for headings to avoid squashing text and pushing content down the screen, we've swapped in headings with a smaller preset at smaller screen sizes.

This is a common need, and one that we should consider building into our typography system itself.

The solution

As an example, a heading with preset="7" should be its current size on large screens, but get smaller automatically on smaller screens—without the developer needing to do this manually. This will ensure consistency across usages for which breakpoints produce which smaller text, which may be desirable.

Alternatives considered

• We could make more presets, like 7--responsive or something of the sort to explicitly opt into the responsive typography behavior
• We could continue letting developers manually deal with this

Additional information

• We may not want fluid typography—we might still want predictably-sized headings across a variety of screens. Here are a couple of resources on responsive typography, and here are a couple on fluid typography.
• We should not achieve responsive typography by altering the base font size at different screen widths—this will impact text too broadly, and isn't a good idea for accessibility reasons.

[elisa-vargas]

@david-corneail Here is the discussion regarding responsive typography.

[daneah]

https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/