Por que texto estilizado vira quadradinho (tofu): fallback de fontes e Unicode

Characters that appear as empty squares, known as "tofu," occur when a font does not have a glyph for a certain character. It's not a character you type, but a rendering issue—the system couldn't find a matching glyph and instead displayed a substitute. The Noto font family from Google was specifically designed to address this problem.

Text styles, such as bold and italic, are not fonts themselves. Instead, they replace common letters with other Unicode characters that resemble the intended style. For example, "normal" is "Ghost," while "estilizado" is written as 𝓖𝓱𝓸𝓼𝓽. Even though the "estilizado" text appears more decorative, each character still occupies two units in UTF-16, which is why the .length property returns a higher number for the stylized text.

One common mistake is counting characters using .length, which can lead to discrepancies. For instance, the stylized text "𝓖𝓱𝓸𝓽" would be counted as 10 characters, while the normal text "Ghost" would be counted as 5. To avoid this issue, it's best to count characters using [...texto] or the Intl.Segmenter API in JavaScript.

Another issue arises when font fallbacks are not properly configured. If a browser can't find a matching font in the list specified in the font-family property, it may display tofu. To mitigate this problem, always end the font-family list with a generic family like sans-serif or system-ui. This ensures that the system can use a fallback font if the primary font doesn't support a particular character.