primer/brand

[Feature request] Extend the max-width of the Hero Component's H1

Opened this issue · 4 comments

simmonsjenna commented

This came up in a Slack thread.

Problem

The current max-width set on the Hero Component's H1 (for Large - Desktop) sometimes causes multiple line breaks and does not accommodate long titles well. Since we tend to have very long headlines with some longer words thrown in the mix, @samoshin suggested extending the max-width.

Image

Suggested solution

Extend the max-width of the F2 Hero Headline to 9 col of 12. @nsolerieu suggested this, and I also tested multiple widths and landed on the same conclusion.

Image

Urgency

Not too urgent — by mid-July or the end of July would be ideal.

/cc @nsolerieu

waynewi commented

Thanks @simmonsjenna

  • 👍1
rezrah commented

Update: Waiting on Site Design FR (@natalie-iv) to investigate character count based sizing.

nsolerieu commented

@rezrah

60 characters max seems to be the most common recommendation (See here NN Group, Here Conductor )

Image

  • ❤️1
nsolerieu commented

@rezrah here is a consolidated suggestion

  • Extend the length of the large hero component to 9 columns: 924px
  • Set the length of description text to 6 columns: 600px

Currently this Large hero is set at 639px which is not tied to the grid and is too narrow for long titles. This new suggestion will allow most titles to fit on 2 lines and accommodate the longer technical terms found on some of our feature pages.

Image

  • 👍1