1787262 - H1 styles should be 1.5em and 600 weight

Status: RESOLVED FIXED

(Firefox :: Firefox View, defect, P3)

Description

[Josh Berman]

Actual: "Independent Voices" is 1.8em and font-weight: bold. Tab pickup and Recently closed are 1.5em and font-weight: 500
Expected: "Independent Voices", "Tab pickup" and "Recently closed" are 1.5em and font-weight: bold

Comment 1

[:Gijs (he/him)]

I'm confused. The design actually has weight: 700 (and Metropolis) for the Tab pickup and Recently closed headers. I expect we approximated with 500 because the fonts are different to begin with and so different font-weights make things look "wrong" compared with the design.

The "Independent Voices" header is also noticeably bigger in the design than the other headers.

Can you clarify what exactly should change, and if this is a change to the design as well?

Comment 2

[:Gijs (he/him)]

Attachment: Screenshot from figma showing much larger colorways header vs tab pickup / recently closed headers

Comment 3

[Josh Berman]

The 500 font weight isn't appearing substantial enough with system fonts, but the Independent voices carries a "bold" style which more closely maps to the weight we see in the figma file (visually). In terms of the size of Independent Voices text, the Figma Files were actually a bit inconsistent and sometimes showed the that header with a larger font size and sometimes showed it with the same font size. The way it's appearing now on the website though, it really messes with the hierarchy and makes the colorways section feel like the most important thing there, when semantically this isnt true.

Comment 4

[Josh Berman]

Attachment: Screenshot of figma file showing Fx View and all H1's carrying the same font weight, all H1's same font size. Fx View logo font larger than H1's

Comment 5

[Josh Berman]

Also, the reason I suggested bold is because it appears from inspecting the independent voices text, that text carries a "bold" font size and that looks ok.

I just put in 600 weight and that looks better too.

500 is just a little too light.

Comment 6

[Josh Berman]

Updated bug to reflect discussion

Comment 7

[Kelly Cochrane [:kcochrane]]

Attachment: Bug 1787262 - Update h1 font size and weight in Fx View to match Figma spec r=dao,flod

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/221a543d8c03
Update h1 font size and weight in Fx View to match Figma spec r=dao

Comment 9

[Cristina Cozmuta (:CrissCozmuta)]

https://hg.mozilla.org/mozilla-central/rev/221a543d8c03