Figure 5 - style transfer diagram - overlapping text but only sometimes

[redblobgames]

Figure 5 looks fine in Chrome 70 (MacOS) and Safari 12 (MacOS) and Safari 12 (iOS) when the browser width is 1180px or greater but 1179px and below the words on the overlap:

On my Firefox 64 (Mac OS) the text overlaps even at the wider browser width, but my Firefox is highly customized so I can't be sure it's not something else.

On Chrome 70 (Windows 10) “content objective” and “aims” run together at all widths for me, but there's no change at 1180px.

IE/Edge (Windows 10) is the only browser I tried where it always looks right (!).

[redblobgames]

I'm not sure where the text is being built but if you put all the tspan elements on a line without x and y on each one after the first, it seems to put it in the right place:

<tspan x="629" y="12.3">The </tspan>
<tspan font-weight="500">content objective</tspan>
<tspan> aims </tspan>

[ludwigschubert]

Good catch, I thought I had found all of these—the underlying issue here was SF Pro Display vs SF Pro Text… never trust software to do your typesetting.