Make WordPress Core

Opened 7 years ago

Closed 2 months ago

Last modified 2 months ago

#41175 closed enhancement (worksforme)

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

Reported by: transl8or's profile transl8or Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.8
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

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.

Attachments (5)

TwentySeventeen-Font-Issues_i-looks-like-l.jpg (67.1 KB) - added by transl8or 7 years ago.
2017-headings-front-end.png (14.9 KB) - added by sabernhardt 2 months ago.
headings with strong tags for part of the heading, on the front end
2017-headings-Classic-Editor.png (20.4 KB) - added by sabernhardt 2 months ago.
headings in Classic Editor
2017-headings-iframe-editor.png (53.8 KB) - added by sabernhardt 2 months ago.
headings in iframed block editor
2017-headings-nonframed-editor.png (54.0 KB) - added by sabernhardt 2 months ago.
headings in block editor without the iframe

Download all attachments as: .zip

Change History (10)

#1 @melchoyce
7 years ago

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.

#2 @transl8or
7 years ago

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.

Last edited 7 years ago by transl8or (previous) (diff)

#3 @mhloppy
6 years ago

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.

#4 @sabernhardt
15 months ago

  • Keywords needs-testing added

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.

@sabernhardt
2 months ago

headings with strong tags for part of the heading, on the front end

@sabernhardt
2 months ago

headings in Classic Editor

@sabernhardt
2 months ago

headings in iframed block editor

@sabernhardt
2 months ago

headings in block editor without the iframe

#5 @sabernhardt
2 months ago

  • Keywords needs-testing removed
  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

I did not notice a problem with the lowercase i or j in the latest version when I added the following headings and strong tags:

<h1>H1 — I like jam — <strong>I like jam</strong></h1>
<h2>H2 — I like jam — <strong>I like jam</strong></h2>
<h3>H3 — I like jam — <strong>I like jam</strong></h3>
<h4>H4 — I like jam — <strong>I like jam</strong></h4>
<h5>H5 — I like jam — <strong>I like jam</strong></h5>
<h6>H6 — I like jam — <strong>I like jam</strong></h6>
<p>P — I like jam — <strong>I like jam</strong></p>

Environment:

  • WordPress 6.5-RC4 with the nightly build of Twenty Seventeen 3.6
  • Windows 10 Home
  • Firefox 124.0.1 for screenshots, and I also checked Google 123.0.6312.86 and Edge 123.0.2420.65

If you still experience an issue, please reopen the ticket.

Last edited 2 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.