<!DOCTYPE html> <meta charset=utf-8> <style> @font-face { font-family: Fira; src: url(../fonts/fira/FiraSansOT-Regular.otf); } body { /* We want a font that only has a single weight, and supports 'x' and zero-width U+0301. * The Apple Symbols and Segoe UI Symbol fonts appear to meet this requirement on macOS * and Win10 respectively. * If they're not available, we use a single face of Fira loaded via @font-face. */ font: 24px Apple Symbols, Segoe UI Symbol, Fira; } .bold { font-weight: bold; } span { color: transparent; } </style> <body> <!-- any number of zero-width characters should not result in any extra space between the 'x' glyphs ... --> <div> xx<br> x<span>́</span>x<br> x<span>́́</span>x<br> x<span>́́́</span>x<br> x<span>́́́́</span>x<br> x<span>́́́́́</span>x<br> x<span>́́́́́́</span>x<br> x<span>́́́́́́́</span>x<br> </div> <!-- ... even when synthetic bold is in effect --> <div class=bold> xx<br> x<span>́</span>x<br> x<span>́́</span>x<br> x<span>́́́</span>x<br> x<span>́́́́</span>x<br> x<span>́́́́́</span>x<br> x<span>́́́́́́</span>x<br> x<span>́́́́́́́</span>x<br> </div>