Why Cyrillic and Greek words have extra spaces between letters when I switch to Asian languages?

Question

There's a bug, or something, on my client's site where if you switch the language to any of the Asian options (CJK) then open the language selector again, "Russian" (in Russian), "Greek" (in Greek), and "Serbian" (in Serbian) have extra spaces between the letters. If you choose any other language, these words are fine in the language option list. The following style is on html element -

font: 200 100%/1.5 sans-serif;

I read that on Macs, sans-serif will pull in Helvetica as its first choice, and on Windows, it will be Arial. In the my dev tools, if I change sans-serif to Helvetica, it changes the font and fixes the problem, rather than the font looking exactly the same, which is what I expected. (I do have Helvetica on my Mac. I haven't checked this in Windows yet.) Below is a sample screenshot.

Actually, now that I've played with it a bit more, I found that when I select Korean, the non-Korean words are rendered in Apple Gothic, for Chinese the non-Chinese words are in Century Gothic, and for Japanese the non-Japanese words are in Avant Garde. Any thoughts on why? I could just create a rule set that assigns Helvetica, Arial, sans-serif as the font stack for these languages, but any explanation on what's going would be a great learning experience.

Edit: When I mentioned Apple Gothic, Century Gothic, and Avant Garde, what I meant was that for each of the Asian languages, I changed 'sans-serif' to some other font name in my dev tools to see if I could determine what sans-serif font was being defaulted to in CJK for the non-Asian words on the page. I find it weird that Chinese, Japanese and Korean each used a different sans-serif font.

Sample code of the language option list -

<ul>
/* other LIs here */
<li>Ελληνικά</li>
/* other LIs here */
</ul>

/* CSS for the LIs */

li {
font-size: .857em; /* computes to 16px */
list-style: none;
padding: .786em .714em .643em .714em;
transition: all 0.25s ease-in-out;
background-color: #fafafa;
border-top: 1px solid #d0d0d0;
color: #333;
margin: 0;
text-align: left;
}

This was tested in Chrome 37.0.2062.120 and FF 32 on a Mac (10.6.8). Incidentally, Safari 5.1.8 on the same computer did not repro the issue.

Answer 1

According to https://hsivonen.fi/hiragino/ (my emphasis added), "Mac OS X comes with new a family of high-quality Japanese fonts called Hiragino. The fonts also contain high-quality glyphs for the Western European subset of the Latin script. The glyphs for basic Greek and the Russian subset of the Cyrillic script look fine in isolation but are kerned to match the width of Kanji blocks. This makes the fonts ill-suited for Greek or Russian text."

My options at this point are to test other fonts that come with Mac OS to see if they do not apply the widths to Greek and Russian characters. If they all do, I'll resort to using my aforementioned font stack. Also, when I check this in Windows, I don't see this issue.