[Fairground 🎡] Card Headline sizing refactor

[abeddow91]

What does this change?

Refactors how card headline sizing works, replacing the existing size scale with a larger scale. This has required updating all elements that use card headline and mapping the exiting sizing to the new scale.

Why?

The card headline component and logic had become unwieldy and increasingly hard to maintain or amend. The fairground project has introduced several new headline sizes which need to be accounted for across breakpoints. This PR adds these sizes to the font scale. It also replaces the varoius breakpoint props ie "headlineSizeAtTablet" with a headlineSizes object that has a required desktop value and can optionally take several other breakpoints. Desktop is the default font setting and any other breakpoint provided will override desktop in the cascade.

NB - there is follow up work for this PR that has been left out so that we can ensure we are not affecting existing cards. This has been outlined here
https://trello.com/c/7cYBL0I9/645-headline-sizing-follow-up-work

Screenshots

For the most part, there are no visual changes as a consequence of this PR as we are swapping like for like. This PR does however, fix a long standing issue whereby mobile devices with a "small" headline were rendering in 14px rather than 17px.

[github-actions]

Size Change: -360 B (-0.04%)

Total Size: 911 kB

Filename	Size	Change
dotcom-rendering/dist/5835.client.web.********************.js	3.56 kB	-391 B (-9.91%)	👏

ℹ️ View Unchanged

Filename	Size	Change
dotcom-rendering/dist/1000.client.web.********************.js	999 B	0 B
dotcom-rendering/dist/1026.client.web.********************.js	784 B	0 B
dotcom-rendering/dist/1070.client.web.********************.js	5.03 kB	0 B
dotcom-rendering/dist/1090.client.web.********************.js	752 B	0 B
dotcom-rendering/dist/1131.client.web.********************.js	1.87 kB	0 B
dotcom-rendering/dist/1309.client.web.********************.js	4.19 kB	0 B
dotcom-rendering/dist/1337.client.web.********************.js	4.27 kB	+3 B (+0.07%)
dotcom-rendering/dist/1391.client.web.********************.js	725 B	0 B
dotcom-rendering/dist/1405.client.web.********************.js	2.53 kB	0 B
dotcom-rendering/dist/1476.client.web.********************.js	784 B	0 B
dotcom-rendering/dist/153.client.web.********************.js	3.97 kB	0 B
dotcom-rendering/dist/1667.client.web.********************.js	918 B	0 B
dotcom-rendering/dist/1745.client.web.********************.js	4.28 kB	0 B
dotcom-rendering/dist/1841.client.web.********************.js	3.21 kB	0 B
dotcom-rendering/dist/1940.client.web.********************.js	507 B	0 B
dotcom-rendering/dist/2031.client.web.********************.js	3.45 kB	-1 B (-0.03%)
dotcom-rendering/dist/214.client.web.********************.js	3.77 kB	0 B
dotcom-rendering/dist/2301.client.web.********************.js	4.41 kB	-2 B (-0.05%)
dotcom-rendering/dist/2310.client.web.********************.js	880 B	0 B
dotcom-rendering/dist/238.client.web.********************.js	6.86 kB	0 B
dotcom-rendering/dist/267.client.web.********************.js	917 B	0 B
dotcom-rendering/dist/273.client.web.********************.js	3.64 kB	-1 B (-0.03%)
dotcom-rendering/dist/281.client.web.********************.js	642 B	0 B
dotcom-rendering/dist/2810.client.web.********************.js	6.18 kB	0 B
dotcom-rendering/dist/2933.client.web.********************.js	2.87 kB	0 B
dotcom-rendering/dist/302.client.web.********************.js	2 kB	0 B
dotcom-rendering/dist/310.client.web.********************.js	3.34 kB	-3 B (-0.09%)
dotcom-rendering/dist/3109.client.web.********************.js	803 B	0 B
dotcom-rendering/dist/3270.client.web.********************.js	961 B	0 B
dotcom-rendering/dist/3281.client.web.********************.js	5.29 kB	0 B
dotcom-rendering/dist/3304.client.web.********************.js	853 B	0 B
dotcom-rendering/dist/3459.client.web.********************.js	8.08 kB	0 B
dotcom-rendering/dist/3513.client.web.********************.js	11 kB	0 B
dotcom-rendering/dist/3764.client.web.********************.js	6.32 kB	0 B
dotcom-rendering/dist/3769.client.web.********************.js	999 B	0 B
dotcom-rendering/dist/3923.client.web.********************.js	524 B	0 B
dotcom-rendering/dist/3993.client.web.********************.js	4.55 kB	0 B
dotcom-rendering/dist/4282.client.web.********************.js	685 B	0 B
dotcom-rendering/dist/4413.client.web.********************.js	44.2 kB	0 B
dotcom-rendering/dist/4501.client.web.********************.js	4.29 kB	0 B
dotcom-rendering/dist/4628.client.web.********************.js	654 B	0 B
dotcom-rendering/dist/463.client.web.********************.js	3.41 kB	0 B
dotcom-rendering/dist/4881.client.web.********************.js	2.42 kB	0 B
dotcom-rendering/dist/4941.client.web.********************.js	890 B	0 B
dotcom-rendering/dist/5178.client.web.********************.js	2.28 kB	0 B
dotcom-rendering/dist/5209.client.web.********************.js	3.21 kB	0 B
dotcom-rendering/dist/5289.client.web.********************.js	3.33 kB	+1 B (+0.03%)
dotcom-rendering/dist/5481.client.web.********************.js	4.01 kB	+1 B (+0.02%)
dotcom-rendering/dist/5658.client.web.********************.js	750 B	0 B
dotcom-rendering/dist/5757.client.web.********************.js	931 B	0 B
dotcom-rendering/dist/5815.client.web.********************.js	5.17 kB	-1 B (-0.02%)
dotcom-rendering/dist/5834.client.web.********************.js	4.41 kB	+1 B (+0.02%)
dotcom-rendering/dist/5880.client.web.********************.js	828 B	0 B
dotcom-rendering/dist/6044.client.web.********************.js	726 B	0 B
dotcom-rendering/dist/6071.client.web.********************.js	577 B	0 B
dotcom-rendering/dist/6118.client.web.********************.js	3.71 kB	-1 B (-0.03%)
dotcom-rendering/dist/6135.client.web.********************.js	779 B	0 B
dotcom-rendering/dist/6308.client.web.********************.js	3.58 kB	+1 B (+0.03%)
dotcom-rendering/dist/6320.client.web.********************.js	12.7 kB	-4 B (-0.03%)
dotcom-rendering/dist/6505.client.web.********************.js	1 kB	0 B
dotcom-rendering/dist/6565.client.web.********************.js	3.02 kB	0 B
dotcom-rendering/dist/6598.client.web.********************.js	780 B	0 B
dotcom-rendering/dist/6638.client.web.********************.js	907 B	0 B
dotcom-rendering/dist/6647.client.web.********************.js	4 kB	-1 B (-0.03%)
dotcom-rendering/dist/678.client.web.********************.js	804 B	0 B
dotcom-rendering/dist/6833.client.web.********************.js	2.92 kB	+1 B (+0.03%)
dotcom-rendering/dist/6977.client.web.********************.js	10.3 kB	-2 B (-0.02%)
dotcom-rendering/dist/7002.client.web.********************.js	4.52 kB	0 B
dotcom-rendering/dist/7039.client.web.********************.js	3.13 kB	0 B
dotcom-rendering/dist/7098.client.web.********************.js	5.32 kB	+11 B (+0.21%)
dotcom-rendering/dist/7116.client.web.********************.js	23 kB	0 B
dotcom-rendering/dist/712.client.web.********************.js	4.91 kB	0 B
dotcom-rendering/dist/7191.client.web.********************.js	11.4 kB	-2 B (-0.02%)
dotcom-rendering/dist/7218.client.web.********************.js	5.87 kB	0 B
dotcom-rendering/dist/7254.client.web.********************.js	438 B	0 B
dotcom-rendering/dist/7594.client.web.********************.js	3.79 kB	+1 B (+0.03%)
dotcom-rendering/dist/7691.client.web.********************.js	853 B	0 B
dotcom-rendering/dist/7745.client.web.********************.js	6.04 kB	0 B
dotcom-rendering/dist/8012.client.web.********************.js	12.6 kB	0 B
dotcom-rendering/dist/8266.client.web.********************.js	1.91 kB	0 B
dotcom-rendering/dist/83.client.web.********************.js	750 B	0 B
dotcom-rendering/dist/8504.client.web.********************.js	827 B	0 B
dotcom-rendering/dist/8536.client.web.********************.js	595 B	0 B
dotcom-rendering/dist/857.client.web.********************.js	4.65 kB	0 B
dotcom-rendering/dist/8611.client.web.********************.js	3.83 kB	0 B
dotcom-rendering/dist/8626.client.web.********************.js	890 B	0 B
dotcom-rendering/dist/8640.client.web.********************.js	3.21 kB	-2 B (-0.06%)
dotcom-rendering/dist/8697.client.web.********************.js	956 B	0 B
dotcom-rendering/dist/8814.client.web.********************.js	156 B	0 B
dotcom-rendering/dist/8822.client.web.********************.js	2.02 kB	0 B
dotcom-rendering/dist/8833.client.web.********************.js	829 B	0 B
dotcom-rendering/dist/8997.client.web.********************.js	530 B	0 B
dotcom-rendering/dist/9184.client.web.********************.js	493 B	0 B
dotcom-rendering/dist/9332.client.web.********************.js	3.86 kB	0 B
dotcom-rendering/dist/941.client.web.********************.js	3.87 kB	-1 B (-0.03%)
dotcom-rendering/dist/9454.client.web.********************.js	2.17 kB	0 B
dotcom-rendering/dist/9493.client.web.********************.js	785 B	0 B
dotcom-rendering/dist/9510.client.web.********************.js	20.2 kB	0 B
dotcom-rendering/dist/9512.client.web.********************.js	619 B	0 B
dotcom-rendering/dist/9541.client.web.********************.js	3.69 kB	+1 B (+0.03%)
dotcom-rendering/dist/9557.client.web.********************.js	921 B	0 B
dotcom-rendering/dist/9585.client.web.********************.js	3 kB	-1 B (-0.03%)
dotcom-rendering/dist/9721.client.web.********************.js	717 B	0 B
dotcom-rendering/dist/98.client.web.********************.js	2.88 kB	0 B
dotcom-rendering/dist/9835.client.web.********************.js	647 B	0 B
dotcom-rendering/dist/9867.client.web.********************.js	4.49 kB	-1 B (-0.02%)
dotcom-rendering/dist/9899.client.web.********************.js	669 B	0 B
dotcom-rendering/dist/9904.client.web.********************.js	22.7 kB	+1 B (0%)
dotcom-rendering/dist/9916.client.web.********************.js	3.4 kB	-1 B (-0.03%)
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js	5.97 kB	0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js	2.85 kB	+2 B (+0.07%)
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js	3.94 kB	+1 B (+0.03%)
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js	422 B	0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js	3.57 kB	-2 B (-0.06%)
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js	3.17 kB	0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js	3.49 kB	0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js	2.52 kB	0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js	3.08 kB	+1 B (+0.03%)
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js	4.87 kB	-1 B (-0.02%)
dotcom-rendering/dist/Branding-importable.client.web.********************.js	2.55 kB	+1 B (+0.04%)
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js	37.2 kB	0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js	1.97 kB	0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js	6.71 kB	-1 B (-0.01%)
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js	8.25 kB	+2 B (+0.02%)
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js	2.97 kB	0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js	6.03 kB	-1 B (-0.02%)
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js	4.51 kB	-1 B (-0.02%)
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js	542 B	0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js	2.8 kB	+1 B (+0.04%)
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js	1.91 kB	0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js	1.22 kB	0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js	1.74 kB	0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js	3.14 kB	+1 B (+0.03%)
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js	1.72 kB	0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js	5.96 kB	-1 B (-0.02%)
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js	3.75 kB	-1 B (-0.03%)
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js	2.02 kB	0 B
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js	4.2 kB	0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js	1.94 kB	0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js	967 B	0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js	618 B	0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js	3.44 kB	+1 B (+0.03%)
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js	346 B	0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js	3.72 kB	+1 B (+0.03%)
dotcom-rendering/dist/frameworks.client.web.********************.js	20.9 kB	0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js	7.63 kB	0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js	3.82 kB	-2 B (-0.05%)
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js	10.5 kB	0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js	7.4 kB	0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js	2.22 kB	-1 B (-0.05%)
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js	15.8 kB	0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js	10 kB	0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js	783 B	0 B
dotcom-rendering/dist/index.client.web.********************.js	45.9 kB	+23 B (+0.05%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js	2.79 kB	0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js	850 B	0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js	6.28 kB	+1 B (+0.02%)
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js	4.23 kB	0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js	4.77 kB	0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js	3.62 kB	-2 B (-0.06%)
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js	2.1 kB	0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js	436 B	0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js	6.51 kB	0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js	3.78 kB	0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js	5.27 kB	+1 B (+0.02%)
dotcom-rendering/dist/Liveness-importable.client.web.********************.js	4.83 kB	0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js	7.63 kB	+1 B (+0.01%)
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js	4.98 kB	0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js	2.69 kB	0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js	3.99 kB	0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js	6.22 kB	-1 B (-0.02%)
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js	5.17 kB	+2 B (+0.04%)
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js	5.33 kB	0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js	3.77 kB	+1 B (+0.03%)
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js	542 B	0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js	804 B	0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js	751 B	0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js	542 B	0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js	469 B	0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js	1.97 kB	0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js	2.53 kB	0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js	6.29 kB	0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js	5.01 kB	+21 B (+0.42%)
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js	4.6 kB	0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js	2.19 kB	0 B
dotcom-rendering/dist/sentry.client.web.********************.js	795 B	0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js	3.86 kB	0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js	486 B	0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js	3.71 kB	0 B
dotcom-rendering/dist/shimport.client.web.********************.js	2.8 kB	0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js	727 B	0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js	1.75 kB	-3 B (-0.17%)
dotcom-rendering/dist/SignInGateMain.client.web.********************.js	4.51 kB	+1 B (+0.02%)
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js	5.61 kB	-1 B (-0.02%)
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js	3.16 kB	0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js	3.48 kB	0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js	4.8 kB	-1 B (-0.02%)
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js	4.21 kB	0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js	7.68 kB	-1 B (-0.01%)
dotcom-rendering/dist/SubNav-importable.client.web.********************.js	2.9 kB	-1 B (-0.03%)
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js	2.69 kB	-2 B (-0.07%)
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js	1.23 kB	-1 B (-0.08%)
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js	14.7 kB	0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js	8.25 kB	0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js	2.75 kB	0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js	1.13 kB	0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js	2.8 kB	-2 B (-0.07%)
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js	5.05 kB	-1 B (-0.02%)
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js	4.99 kB	0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js	2.66 kB	-1 B (-0.04%)
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js	6.54 kB	-1 B (-0.02%)
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js	5.93 kB	0 B

_{compressed-size-action}

[github-actions]

Deploy build 38400 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 38400 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 38400 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 14228 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 14228 of dotcom:rendering-all to CODE
• Deploy parts of build 14228 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[prout-bot]

Seen on PROD (merged by @abeddow91 8 minutes and 47 seconds ago) Please check your changes!