Twenty Seventeen: The letters in words with i, j, l look all the same in h3-headings that are also formatted strong.

[transl8or]

I stumbled across a website today (brent.fm/how-we-work) that is using the Twenty Seventeen Theme.
There are some pages that have text paragraphs that are formatted with the h3 and strong HMTL-tag.
Unfortunately these paragraphs contain a lot of words with "i" and "l" and even "j" like:
like, guide, communicators, projects, etc. and these three letters (i,l,j) in the choosen theme font look all the same on Desktop mode, which makes it quite a bit difficult to read.
The font-size though gets smaller on Mobile mode and is better readable then, because the letters look like they should: different.

I'm not sure if this is really a bug because usually an h3-heading is not meant to be strong formatted also, but as it seems, that's what some people do and the font behaves quite unpleasant in this case, it would be good to have the designers (@melchoye ?) to pay attention to that, with this specific font.

I was able to reproduce that on a fresh local installation of WordPress 4.8 on Windows. Screenshot is attached.

[melchoyce]

Hi @transl8or, what browser are you using? I think this might be either a font rendering issue on Windows, or a low-DPI screen issue. The letters are distinct when h3 and bold on Mac 10.12.5 Chrome, Firefox, and Safari.

[transl8or]

Hi @melchoyce, I usually use the latest Firefox version on Windows, also checked it with IE11 from Windows 8.1.
I think you are probably right that it's an rendering issue on Windows. I can use Windows 8.1 as well as an old Win 7 computer here. (both have a 1366x768 resolution, laptop and AIO). The later and slower one also has some up-to-date Xubuntu (which actually has some Ubuntu underneath) running on it, that I just tested and:
Oh surprise, the site and font looks fine under Linux with Firefox and Chromium there.

[mhloppy]

For anyone who, like me, finds this thread searching for a solution:

I also noticed this issue on multiple Windows systems (8.1, 10) in multiple browsers (Chrome, Firefox). After much fruitless searching, my eventual workaround / half-solution was to modify part of the css.

Under section 19.0 (Media Queries) of style.css you'll find the following (although there'll be a bit more spacing than I'm showing here).

h3 {
font-size: 22px;
font-size: 1.375rem;
}

which is specifying the font size of h3 (header 3). For some reason bolding the latter size results in what the previous screenshots have shown (at least in Windows?), with "i" and other "dotted" letters not rendering as expected. I changed the second value to 1.4rem and it solved this issue for me.

If there are similar issues with the font rendering oddly in headers with "i" etc, then try making tiny adjustments to these sizes - especially if you make them slightly rounder numbers. Section 5.0 also has some other stuff related to text format. Using Inspect Element in your browser, you can find out what the css file is specifying a specific string of text to format as/with (search online if you need help with inspect element).

I do not understand what the root cause is here (does Windows not like rendering such un-round numbers?), but hopefully this helps other people.

[sabernhardt]

The issue also might be related to an older version of Libre Franklin Bold. The next version of Twenty Seventeen will use font files included in the theme package instead of Google Fonts.

This ticket would require testing again, which you could do now with WordPress 6.2 beta (​nightly build) or when WordPress 6.2 and Twenty Seventeen 3.2 are publicly available.