Text shaping and “◌”

The website mechanically wrap the first character of each line and after each space character in a separate <span> elemen, applying a different font weight. This changes the shaping context and separates the character from the rest of the word. While this might work fine in some cases, it breaks for scripts where the first character is part of a multi-character grapheme cluster. For example, “g̈” is made up of “g” and “◌̈” (Combining Diaeresis), which together form a single letter that shouldn’t be split. When the mark is separated from its base letter, some environments display a dotted circle ◌ to indicate it should be attached to something.

Line height for “tall” scripts

The slogan uses a line height of 0.7 times the font size. While fine for English and Tagalog, which use the plain Latin alphabet, taller characters like Vietnamese diacritics or “tall scripts” such as Khmer and Devanagari (Hindi) will overlap. Even CJK text overlaps at this line height.

Fallbacks

Vietnamese uses the Latin alphabet but includes many more diacritics due to its tonal system. The custom font Singing Sans supports European Latin glyphs fairly well but lacks some Vietnamese characters like ẵ and ể, causing them to fall back to a system font.  

Swash

The shaping issue here comes from their decision to use swashes on the first letter of each word in their slogan. Shown below is a comparison of the same slogan with and without swashes.

While not exactly an i18n fail, they’ve enabled swashes by using font weight — assigning the bold style to a separate font file, Singing Sans Swash, instead of using the built-in OpenType swsh feature already available in the regular Singing Sans.