Use consistent line heights (nav, footer, CTAs, content) in old&new pages

[janbrasna]

Note

Waiting for Protocol v20 to apply new typography site-wide, to see how much it resolves itself. 🚧

One-line summary

Applies refresh metrics to all the content, no matter if m24-base or non-m24-base.

Significant changes and points to review

Refreshed pages have different defaults affecting also nav elements, making shifts in layout visible when navigating to older pages. This sets the base var explicitly to the header components to not inherit any other value.

Both the desktop and mobile nav inconsistencies caused by differing line-height as captured in the tracking issue are resolved here by using the "taller" version as that seems to be better aligned in general. EDIT: Nav uses yet another line height that defines the menu element height.

Issue / Bugzilla link

Fixes #15788
Fixes #15803

Testing

/about/ ⇄ /products/
(+ /firefox/ for submenu impact)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.10%. Comparing base (c8ac92f) to head (cb56f30).
Report is 263 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15790      +/-   ##
==========================================
+ Coverage   79.07%   79.10%   +0.02%     
==========================================
  Files         160      160              
  Lines        8359     8312      -47     
==========================================
- Hits         6610     6575      -35     
+ Misses       1749     1737      -12     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[janbrasna]

Hmh now with #15803 also affecting footer, and the letterspacing mentioned there too, I'm starting to think whether instead of adding more and more explicit line-height and letter-spacing values around here for specificity a better approach would be to only apply all of the generic m24-base styles specifically to something like #outer-wrapper > main scope, not to interfere with header and footer…?

[janbrasna]

Since I'm not sure which is closer to the original Figma/brief, the tighter line-height or the looser occurrence from the two in #15803 (comment) I'm not sure which one to effectively use to unify these, if I were to include resolving footer along with the header already in this PR.

Optically the 1.2 looks more harmonic for footer list items. However the original design seemed to prefer the 1.4 for consistency(?)

Currently I think the approach here redefining the components again for specificity is not the right one, and instead only applying the m24-base styles for refreshed pages to the main content might make more sense, but will have bigger change surface to test properly for any unexpected effects (as it also changes specificity when moved around…)

[janbrasna]

(To demonstrate the above, an alternative approach PoC: janbrasna@476d436 that feels more "correct", but will need carefully comparing any unexpected impact…)

[wen-2018]

I have looked the Figma files. For the new designs, we have 3 line-heights:

• general body texts: 1.2
• headings: 1
• links for the navigation items: 1.1

The pencil banner and footer text both inherit the general body text line height of 1.2.

1. So we should definitely specifically define the line-height for the navigation. It is a specific design and should be consistent globally.
2. The pencil banner line height should also be specified here for now. Since it is an global element appears on both old and new page designs. I think to override the old protocol default line-height might needs much more testing before we proceed. For now, we might have to specify line-height for the new global components (setting the line-height for <main> will not be helpful global components like pencil banner or footer).

I hope this helps answer the question regarding the footer line-height too.

[janbrasna]

BTW I have followed the above posted metrics "literally" in this branch to test out, the biggest impact is perhaps all the pre-refresh pages that got line-height 1.4 at #15144 — and these would change now to 1.2 wholesale.

Another impact is e.g. the submenu that would need further tweaks after the line-height moving out of align with the logo:

Generally there seems to be rules coming from different stages or the refresh, ending up rendering slightly differently on the output. We ran into another interaction between m24-base and protocol-mozilla-2024 today, and it would seem like the duplication/inheritance causes some woes — so maybe only using one or the other separately will be more manageable in the end.

[janbrasna]

BTW, why was font-variant-ligatures: none specified, and only for the m24-base pages, while all other use the typeface too, without that disabled?

@wen-2018 Would you know perhaps? Or was it when the typeface was "too BETA" and used to have issues with rendering ligatures? (So is it safe to remove now?)

[wen-2018]

I think it's likely font-variant-ligatures was disabled for M24 when the font is still in beta.

@stephaniehobson Could you confirm this is the case and we could remove them in M24 base styles now?

[stephaniehobson]

Font ligatures are an accessibility concern. Changing the shape of the letters by combining them introduces problems for some readers. We should keep them disabled in the base styles.

[janbrasna]

Ah, okay, I thought that a11y override would come from UA styles, if preferred.

I'll try to make that consistent between the old and the new pages then.
Thanks for the info, appreciate it.

[wen-2018]

Thinking aloud… this should start with redefining --body-line-height:1.4 on protocol-mozilla-2024 to start with, to apply the 1.2 to all the content, old and new?

I think the goal is to build a brand new design system like the current protocol but for the new M24 styles evetually. So we might not want to override the default body line for the pages/components using the protocol designs. The line-heights I listed above are for components/pages using the M24 styles.

In summary:

• New navigation, new footer, new pencil banner or any other new global components, about and home page (new headings) should be using the line-heights listed here Use consistent line heights (nav, footer, CTAs, content) in old&new pages #15790 (review)
• Sub menu, any other page having old protocol designs should use the existing default protocol line-height, for body text, it should be 1.4 now; for headings, it should be 1.1

[janbrasna]

OK, so the other way around how it inherits today — protocol-mozilla-2024 should not override any metrics from the refreshed components older pages may use, esp. nav & footer.

I'll think about that. Thanks for the info.

[janbrasna]

Resolved in #16156 for M24 vs. non-M24 pages; now only Fx-themed header, footer and mobile menu align differently — it's not that pressing now as navigating between these two types of pages is not frequent and some don't even include the header at all etc. …

I'm thinking that for the Fx-theme base it would be viable to just constrain the tweaks to the main content only, and let the global components use the default theme values without having to define them again explicitly somewhere.