Replace Open Sans with Neue Haas Grotesk as primary typeface on Wordpress

[djanelle-mit]

Developer

The typeface our Wordpress site was using (Open Sans) did not fit into the same style of typeface as our brand guidelines. As we look to building a design system that extends and implements our brand guidelines, replacing with a more appropriate typeface is an important first step. This will be used as a foundation to build future experiences on, and iteratively create a site with consistent typesetting.

This work replaces Open Sans with Neue Haas Grotesk, delivered via Adobe Fonts. This work also includes:

• Style and layout fixes to the Hours page
• Accessibility improvements to the News page
• Type size adjustments across the site to start massaging into a more consistent typography style system.
• Porting over the styles from the About page from a standalone (not SASS) stylesheet into a new _about.scss file.
• Layout and style improvements to the About page

Note that this work does not address:

• Final typesetting. We'll use upcoming projects to test and set a new type scale and apply consistently.
• Some accessibility and layout bugs. We picked off low-hanging problems in this pass, but some will need to wait for section or page redesigns.

Relevant tickets:
Many commits are prefixed with their respective ticket from the JIRA epic PW-133.

Stylesheets

• Any theme or plugin whose stylesheets have changed has had its version
  string incremented.

Secrets

• All new secrets have been added to Pantheon tiers
• Relevant secrets have been updated in Github Actions
• All new secrets documented in README

Documentation

• Project documentation has been updated
• No documentation changes are needed

Accessibility

• ANDI or Wave has been run in accordance to
  our guide and
  all issues introduced by these changes have been resolved or opened as new
  issues (link to those issues in the Pull Request details above)

Stakeholder approval

• Stakeholder approval has been confirmed
• Stakeholder approval is not needed

Dependencies

YES | NO dependencies are updated

Code Reviewer

• The commit message is clear and follows our guidelines
  (not just this pull request message)
• The changes have been verified
• The documentation has been updated or is unnecessary
• New dependencies are appropriate or there were no changes

[djanelle-mit]

@matt-bernhardt This should be ready for review! Most important areas to spot check would be:

• Home
• About
• Hours
• Location page
• News

They have the most changes. I noted more in the PR message!

Early-mid next week would be ideal, but no urgency if you need more time, just let me know!

[matt-bernhardt]

In broad terms, this looks okay to my eye - and this is a massive amount of work, so thank you for taking it on.

I've tried to label individual comments as questions or requested changes, to be clear about what I think the needed tweaks are. One is a syntax problem (missing bracket), one is a desire to be consistent in how we handle stylesheets (even externally-hosted ones), and one is a desire not to directly modify third-party libraries. I'm open to pushback if you feel strongly that the directions you've chosen are superior, but let's talk about it.

The questions are all just that- I'll accept the change as-is, but I'd like to hear your thoughts.

I should caveat that, for the specific CSS changes spread throughout, I'm trusting that the stakeholders have approved the way the pages look now - I don't want to second-guess either their stewardship of the content / branding, nor how you've made that work in specific rules / etc. The pages you've listed all seem fine to me, nothing is obviously broken. My focus has been more on the engineering and how the stylesheets are put in place, rather than worrying about whether specifying px or em is preferred, or any of the branding considerations.

[matt-bernhardt]

Requested change Removing this line feels like it needs to also take out the closing bracket, but I don't see it removed in this changeset. Looking at the file now, I think there's a closing backet on line 255 which is no longer accounted for?

Comment only: this is likely beyond the scope of this PR, but I also find the lack of indenting within media queries throughout this file to be confounding - making it far easier for things like this to slip in. I know you didn't cause this, and this PR is already big enough, but what do you think of a separate ticket to deal with formatting like this?

[djanelle-mit]

I'll remove the bracket in this PR. (Also found a missing semicolon that I can add in).

This file being static CSS is also a little peculiar. I wonder if the ticket should also include moving this into some SCSS file and having the file cleaned up a bit? Then we could use nesting when doing any indenting. What do you think?

[matt-bernhardt]

I agree with refactoring this to leverage SCSS as part of that ticket, yeah. Good call!

[djanelle-mit]

@matt-bernhardt I replied to all comments and uploaded all the commits with my fixes! This should be ready to review again.

Note that the About page had some refactoring (which didn't appear to break anything on my end) but that commit might warrant extra scrutiny.

[matt-bernhardt]

It looks like the last round of commits has resolved most things, although I don't see a tweak to hours-mobile. That said, I'm also not sure how to confirm what the behavior is for that set of rules, because I'm unclear how to trigger the pixel-ratio rule that is meant to wrap lines 231-255. Do you have a process I can follow to see those rules kick in?

I'm marking this as approved, just to get us closer to done - if it merges now I think the only negative impact might be for specific devices in specific configurations, and I don't want to be too much of a stickler.

[matt-bernhardt]

Looks good! Thanks for catching the Samsung Galaxy issue, and for the new Jira tickets.