Text styles update

[fcoveram]

As pointed out here (wporg-photo-directory#17), the text styles documented in Figma's Design Library missed the mobile version of Inter headings.

New styles

The styles for mobile were added and here below are the specs.

Name	Size
Heading 3 Inter (Mobile)	21px
Heading 4 Inter (Mobile)	17px
Heading 5 Inter (Mobile)	15px
Heading 6 Inter (Mobile)	14px

For all the variants above, font weight is 600, line height is 1.4, the case is normal, and the letter spacing is 0px.

Style tweaks

I also noticed that the line-height of Inter headings for Desktop was too tight compared to their corresponding serif versions, so I increased it to be 1.4 for all of them.

Therefore, headings 3, 4, 5, and 6 for both desktop and mobile have a line height of 1.4.

Note

Figma's Design Library has now been updated with the details mentioned in this ticket.

[ryelle]

As we've talked about before, we don't have a central place where these are set, it's on a case-by-case/site-by-site basis. So changing them "everywhere" is complicated. Can you audit the network and list out which sites need updates? I've just scanned a few sites' code and I don't think we're consistent even on the large screen sizes.

If you have rules about where these sizes are used (for example, "Inter h4" is the second-level heading), I can try to make a shared style that would keep this consistent, but right now I don't think the names correspond to the real heading levels. For example, the mockup in Photos for the submission page— the post-title is h1 (but the post-title style overrides default h1 styles) so the first heading in the content must be an h2, but it uses "Inter h4".

I'm also going to move this to the parent repo for tracking, but really it will need to be separate tasks in each site repo. If you'd like to fast-track the change on Photos, make an issue just for the change needed there.

[fcoveram]

Sorry for not introducing this with more accuracy about the implementation context.

Can you audit the network and list out which sites need updates? I've just scanned a few sites' code and I don't think we're consistent even on the large screen sizes.

Yes. Added to my to-dos

If you have rules about where these sizes are used (for example, "Inter h4" is the second-level heading), I can try to make a shared style that would keep this consistent, but right now I don't think the names correspond to the real heading levels.

This inconsistency was consciously applied, driven by the content variety that each section (site) has. The audit seems to be better for pointing out how headings change from desktop to mobile. Likely, all Inter headings, no matter if they follow the numeric order or not, will change from desktop to its mobile variant. So if h2 is "Heading 4 Inter" on desktop, on mobile will be "Heading 4 Inter (Mobile)", as per the name documented in the Design Library.

I'm also going to move this to the parent repo for tracking, but really it will need to be separate tasks in each site repo. If you'd like to fast-track the change on Photos, make an issue just for the change needed there.

That sounds good. I will create a ticket just for Photos as this one comes from that context and does not intend to delay Photos launch.

Thanks @ryelle