www.lanacion.com.ar - Article text have font weight too light

[webcompat-bot]

URL: https://www.lanacion.com.ar/el-mundo/que-son-los-rarisimos-duendes-rojos-que-aparecieron-en-el-horizonte-del-desierto-de-atacama-en-chile-nid25082022/

Browser / Version: Firefox Mobile 103.0 Operating System: Android 12 Tested Another Browser: Yes Chrome

Problem type: Something else Description: fonts are too light.difficult to read Steps to Reproduce: When browsing this site, main text fonts are too light. It is difficult to read. Doesn't happen in other sites

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20220802163236
• channel: release
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Affected area:

<p class="com-paragraph   --s">Pero en el desierto de Atacama, el Observatorio Europeo Austral (ESO, por sus siglas en inglés) logró captar el fenómeno conocido popularmente como <strong>los “duendes rojos”</strong>. 
</p>

Note: The issue is not reproducible on Chrome.

Tested with: Browser / Version: Firefox Nightly 106.0a1 (🦎 106.0a1-20220824093620), Firefox Focus Release 104.1.0 (🦎 104.0-20220816115024), Firefox Focus Nightly 106.0a1 (🦎 106.0a1-20220825143119), Firefox Nightly 106.0a1 (🦎 106.0a1-20220824093620) Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Moving to Needsdiagnosis for further investigation.

[qa_34/2022]

[ksy36]

This looks similar to https://github.com/webcompat/web-bugs/issues/102060

[wisniewskit]

This is the CSS (which is the same in responsive design mode):

.com-paragraph {
  font-family: Georgia,"serif";
  font-weight: 100;
}

On MacOS, it looks fine, because it selects the font Georgia. But on my phone, it selects Roboto, which has this very thin appearance with weight 100.

Chrome selects Noto Serif, which looks better in this case. If I have it select Roboto as well, then the appearance is similarly thin.

Interestingly, if I tell Chrome to use "Roboto, Georgia, serif" then it also picks Noto Serif, so Chrome seems to be more picky here. Maybe it avoids Roboto purposely for thin weights?

I've filed bz1788721 to consider doing whatever Chrome is doing here. In the meantime this is easy enough to fix; the site can simply add Noto Sans to match Chrome, or Noto Serif if they prefer, to the font-family:

.com-paragraph {
  font-family: "Noto Serif",Georgia,"serif";
  font-weight: 100;
}

[webcompat-bot]

Generate outreach template