Establish consistent title and heading typography across all Learn sub-sections
Closed this issue · 2 comments
Note
This issue applies to Developer Resources, Documentation, Learn WordPress and Forums, but since Developer Resources has the latest redesign, any PRs that are created from this issue should likely start here (wporg-developer)
In the recent Developer Resource redesign, we added a new font for headings called IBM Plex Mono. While this looks great, we are starting to see some inconsistency with other upcoming designs for other Learn sub-sections of WordPress.org. I feel that whatever title and heading fonts we choose should be consistent across all sites.
I have included examples from the live Developer Resources and the Figma designs for Documentation and Learn WordPress.
Personally, I really like the sans-serif fonts used for heading in the Developer Resources and Learn WordPress designs. No preference on whether that is Inter or IBM Plex Mono. For the titles, it might be nice to use Garamond since that is used throughout WordPress.org, but I leave that to Design.
Developer Resources
| Developer Resources (Home) | Developer Resources (Single) |
|---|---|
 |
 |
Live link | Uses Inter and IBM Plex Mono
Documentation
| Documentation (Home) | Documentation (Single) |
|---|---|
 |
 |
Figma link | Uses Inter and Garamond
Learn WordPress
| Learn WordPress (Home) | Learn WordPress (Single) |
|---|---|
 |
 |
Figma link | Uses Inter and Garamond
Great work. I appreciate these efforts toward consistency. My thoughts and preferences:
- Heading: As much as I love Garamond, I do see that it might not be as readable when knocked out white on the dark background.
- Heading: I lean toward using 1 sans serif throughout. Retain the Inter for the Headings as well as body text.
- Titles: For contrast, I vote for the Garamond, which reads fine when black on light background.