Some text appears too bold on mobile devices

[rebecca-patton]

Steps to reproduce the issue

1. Publish a page containing wvu-shout and helvetica-neue-bold text.
2. View the page on your phone. I can confirm this issue appears on an iPhone 12 mini in both Safari and Chrome. Not sure about Android. I have not tested with BrowserStack or anything like that.
3. See it on a test page: Page Collection with font tests

Results

Some of the text looks too chunky (particularly shout). The font weight for wvu-shout text appears bolder on mobile than in a desktop browser. Helvetica-neue-bold text (badges on test page) is also sometimes too bold.

How to fix?

1. I've "fixed" this on a couple sites temporarily by adding CSS to apply font-weight:normal: WVU Magazine: See lines 1-4
2. I suspect this is due to font-weight: bold being applied to fonts and/or headings that don't need it but I'm not sure.

Examples:

Before:

Fixed:

[adamjohnson]

I can confirm that no overbolding issues exist on Android 14 in Chrome and Opera mobile.

Screenshot of Chrome

Screenshot of Opera Mobile

I will continue to investigate.

[adamjohnson]

After some investigation, here's what I found:

We set font-weight: bold !important; on the following classes:

• .wvu-shout
• .helvetica-neue-bold
• .helvetica-neue-bold-italic

We also set font-weight bold on elements like <strong> and <b> and apply the Helvetica web font to them.

We could remove the font-weight: bold; from these classes; however, when loading the page, we'd see a Flash of Unstyled Text (FOUT). For the short amount of time that the system font is shown, the font would not be bolded for those users. Then, once it's loaded, there could be some browser repainting due to different letter/type thicknesses.

If the fonts from Monotype don't load for whatever reason, users would be stuck with unbolded type.

One workaround would be to use would be to use the CSS Font Loading API, but that seems like a regression since we purposefully got rid of that (FontFaceObserver) in favor of the very simple font-display: swap;.

So, we have to decide how to proceed:

• Can other users on different iPhone's reproduce @rebecca-patton's results?
  • People should make sure they are running the most recent OS and Browser (update if not).
• Should we keep or remove font-weight: bold; here?

[adamglenn]

I can confirm this also happens on my iPhone. Can we just remove the bold font-weight from the wvu-shout class? That seems to be where the problem is. I don't care if the font isn't bold for a split second, the fallbacks are already a similar weight as the Helvetica Neue Condensed black. I'm not sure why I would ever have the bold font-weight on these anyway? Probably an oversight on my part.

[adamglenn]

Never mind. I see what is going on here. I'll play around with it more i.e. add the "font-weight: normal" as Rebecca suggested originally. The h tags are adding the bold.

[adamglenn]

Adding the font-weight: normal to the wvu-shout class seems to have fixed the issue. Unless anyone objects i.e. I created other problems by doing this, I will close the issue.

[adamglenn]

@adamjohnson I see what you mean about the unstyled text flash. But doesn't this happen anyway? It is just more noticeable. Will this hurt our QA score?

[adamjohnson]

This would not affect our QA scores in Siteimprove. This could have some (probably very minor) impact on our Cumulative Layout Shift scores via Lighthouse. In AG's testing, we're still under the requisite threshold (0.1) with the difference being only 0.03 between the two numbers.

I took a look at the Esports and Adventure Well-being Blog to see these changes in action (both use this stock theme). You can throttle your Wi-Fi connection by going to DevTools > Network > Fast 3G to see these changes in a more pronounced manner.

Overall, I think this change to the .wvu-shout class should be fine.

@rebecca-patton and @adamglenn: can either/both of you confirm that the .helvetica-neue-bold and .helvetica-neue-bold-italic works as expected (aka no faux-bold)?

[rebecca-patton]

On the Adventure Blog site, I'm still seeing the faux-bold on <strong> text (in the site footer) and the helvetica-neue-bold headings (in the featurettes). I think this is because the heading class <h3> and the <strong>tag apply the bold font as well as the style font-weight:bold. Since the font is already bold it makes the text too bold.

This is less noticeable than the shout text (which is fixed, thank you!), but it's not quite right. I think iowan is okay though?

[soulreverie]

@adamjohnson and @adamglenn
This is indeed the issue you noted on Planetarium.

1. In Bootstrap source all headings get a font-weight of 500. I believe that this needs to be added as an override in _wvu-variables.scss as $headings-font-weight:400; but it also appears that it would be overridden by the wvu design system as noted in point 2.
   /scss/_variables.scss#L656

2. In the Design System the following two lines need to be 400 weight:
   /scss/mixins/_wvu-type.scss#L31
   /scss/mixins/_wvu-type.scss#L52

I have updated the Planetarium and all appears to look ok. I haven't done any fout and/or lighthouse testing.