Use IBM Plex Sans for the heading font-family
ndiego opened this issue · 5 comments
In reviewing the new Developer Resources design, I noticed that the title on the homepage and a few headings at the bottom are in EB Garamond. However, this font is used nowhere else on the site.
In discussing this issue with @jasmussen and @fcoveram and reviewing alternatives (see Figma), we also identified that the use of IBM Plex Mono for all headings (even heading that are not code) was not ideal. This was only apparent after seeing the staging site live.
So, to address the EB Garamond issue and the extensive use of IBM Plex Mono for non-code text, the proposed solution is to use IBM Plex Sans for all non-code headings, which includes the homepage title. This would be a new font but would provide some contrast to Inter (used for all other text) while keeping some connective tissue with the code font (IBM Plex Mono) used throughout Developer Resources.
Homepage
| Current | Proposed |
|---|---|
 |
 |
Internal Page
| Current | Proposed |
|---|---|
 |
 |
Code reference page (a heading that is also code)
| Current | Proposed |
|---|---|
 |
 |
Implementation
IBM Plex Sans will need to be added to the theme, but in some initial tests, the only additional step will be to set --wp--custom--heading--typography--font-family: var(--wp--preset--font-family--ibm-plex-sans); (or whatever the name of the preset variable is).
The IBM Plex Sans will also be used in the redesign of the Developer Blog, so if this issue should instead be logged in the parent theme, let me know, and I'll move it over. Thanks!
It does make sense to me to either:
- Use this font for the homepage and headings
- Use EB Garamond for the homepage, and headings
In the former case, it adds some character to this design which seems valid and valuable to try.
I really like the new look. Thanks for bringing up this idea.
The IBM Plex Sans will also be used in the redesign of the Developer Blog, so if this issue should instead be logged in the parent theme, let me know, and I'll move it over.
We'll need to add the font to the global fonts in wporg-mu-plugins, new issue created there. So this issue will just cover updating this theme to use it.
Seems like we only need regular (400) and semi bold (600), with no italic? Please correct me if wrong.
Seems like we only need regular (400) and semi bold (600), with no italic? Please correct me if wrong.
Yes, italics is not allowed in Developer Resources 😂