Twenty Fifteen: Rendering issues in Noto font (requires update)

[jonsurrell]

The Noto font included with twentyfifteen is older and has some issues that are fixed in recent releases. The font does not reserve space for the backtick "`" character, so it overlaps the following character.

Backticks are often used to delimit inline code or a code block and it's especially distracting when they're not positioned correctly or stack so the number of backticks is unclear.

​Here's the issue in Noto fonts.

I've tested the latest Noto release and it does not have this issue.

#63964 describes the same issue with Twenty Fifteen and Fira.

[jonsurrell]

Backtick rendering issue on frontent

[jonsurrell]

Backtick rendering in the editor

[sabernhardt]

Related: #59693, which focused on the U+02BC apostrophe in Noto Serif

I did not find a problem with the backtick (likely the U+0060 Grave Accent character when before a letter) or the apostrophe in Noto Sans (in the tagline).

[jonsurrell]

Replying to sabernhardt:

I did not find a problem with the backtick

Interesting! I wonder if it's platform dependent. ​I prepared a one-click playground that demonstrates the behavior for easier testing.

I'm testing on:

• macOS 15.6.1
• Chrome 140

I can see that the woff2 font is being used.

likely the U+0060 Grave Accent character when before a letter

Correct, the character used is U+0060 GRAVE ACCENT.

[sabernhardt]

backtick and apostrophe characters in Noto Serif (paragraph) and Noto Sans (button)

[sabernhardt]

I had noticed the overlap with Noto Serif on Windows with Firefox, but Noto Sans did not overlap.

If you want to update your gist for both fonts, you could make the post content something like
<p>`backtick apostropheʼs</p><button>`backtick apostropheʼs</button>

I'll close the ticket as a duplicate of #59693. If more fonts need updating, that can be added to the first ticket.