Use proper font family for East Asian languages (CJK)

[be5invis]

• VSCode Version: 1.0
• OS Version: Windows 10 x64 1511

Electron assigns a serif font, SimSun, as the default sans-serif font for zh-CN. This is extremely inconsistent.

A workaround may be

whatever:lang(zh-CN) {
    font-family: <your current setting>, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}
whatever:lang(zh-TW) {
    font-family: <your current setting>, "PingFang TC", "Microsoft JhengHei", "Source Han Sans TC", sans-serif;
}

[jackqq]

Hi @be5invis, I guess you have either installed additional fonts (such as Monaco) or modified the FontSubstitutes registry settings or so. I have the default font set and VSCode falls back to Consolas in the editing area. It looks OK.

However, in the explorer area the text looks a little blurry, but can be fixed by increasing the font-size to 12px. Please note the difference between two Chinese lines in the image below, 资源管理器 (original) and 工作文件 (up-sized to 12px). I guess it's because at 12px SimSun performs well with raster glyphs instead of vector ones, which can be quite blurry at small sizes.

[be5invis]

@jackqq The edit area uses Inziu Iosevka SC. What I am talking about is the font used in the UI, instead of the editing area, since it is configurable, and you can actually set to ANY fallback sequence you want.

[dbaeumer]

@bpasero I move this to you. If we should set different fonts in the explorer depending on the UI language you can use the API vs/base/common/platform#language to know the languge used for the UI.

[bpasero]

@dbaeumer the original bug report is about the editor though? if there are multiple issues discussed in here I suggest to split them up by topic.

[be5invis]

@bpasero This issue has no relationship with the editor. It's just the “UI”. Actually we can specify the fallback sequence for the editor.

[bpasero]

@be5invis in your screenshot, you say the font in the explorer is broken? it looks good to me.

[bpasero]

@be5invis can you try the workaround you describe to see if it helps?

[be5invis]

@bpasero The Latin fonts are OK, but focus on the “工作目录” and “资源管理器”. They are in consistent with the Latin one (which is Segoe UI). And I think this is related to #4433.

[be5invis]

@bpasero

[bpasero]

@be5invis does it work adding those other fonts you mentioned in your comment?

[be5invis]

@bpasero If I manually add fonts to .monaco-shell using the dev tool then yes, it works.

[bpasero]

@be5invis ok thanks!

[Tyriar]

@dbaeumer is lang on html going to be set to the correct language in https://github.com/Microsoft/vscode/issues/3841 ? It would be nice to utilize the :lang pseudo-class for this as mentioned in https://github.com/Microsoft/vscode/issues/5260#issue-148417433

[bpasero]

I would appreciate if people could tell the font-family to use for Japanese as well. I like the idea of connecting this with the lang attribute on the root element.

[be5invis]

@bpasero That's exactly what I suggested.

.monaco-shell:lang(zh-CN){
    font-family: ...; /* Chinese fallback sequence*/
}
.monaco-shell:lang(ja){
    font-family: ...; /* Japanese fallback sequence */
}

[bpasero]

Does simplified vs traditional Chinese make any difference?

[be5invis]

@bpasero Yes. zh-CN and zh-TW should use different fallback sequence to provide correct character shapes. An example of different character shapes in East Asia is this:

[bpasero]

Ok, I was asking if someone could comment here with the 3 different font families for Traditional, Simplified and Japanese.

[be5invis]

@bpasero Five actually, zh-CN, zh-TW, zh-HK, ja, ko. Though for zh-HK there may not be a specialized font designed for it.

[bpasero]

Well, but we do not have translations for all 5 of those languages.

[bpasero]

Actually: Simplified Chinese, Traditional Chinese, Japanese, Korean

[be5invis]

@bpasero If zh-HK is not provided, then it can be removed :)

[anyong]

Noto CJK has excellent support for all of these variants and would provide a consistent UI in all CJK languages. I'm not sure how other Chinese users feel about Noto but I personally am a huge fan. Or does the font need to be a system font that comes with the OS?

[be5invis]

@anyong Noto CJK (and Source Han Sans) is LARGE and they are CFF. A well-hinted TTF is even larger.

[anyong]

I'm not sure how code manages fonts but presumably for UI only a small subset of a single variant is needed. Extracting just characters used in the UI would be negligible size-wise...

[be5invis]

@anyong Subsetting a font is hard, especially when it is a CFF. My suggestion is simply using the system font.

[bpasero]

I think there is a general need to be able to set the overall font for the UI outside the editor and I think this would solve the issue of people having custom fonts installed that they want to use.

However, in this issue we want to pick a font family that solves the problem for all users by relying on good OS installed fonts.

I would appreciate for input on which families to use on Windows, Mac and Linux for which of the three languages.

[anyong]

@bpasero So for UI the equivalent of "sans serif" in Chinese is hei ti (黑體), and in Japanese and Korean, gothic. I've put together this list by locale and operating system using hei ti / gothic fonts, the latest default OS UI font where possible, or in the case of Linux, the most popular alternative(s). For the multi-locale Chinese fonts, both simplified and traditional locales are included in the font and they will simply work as expected.

Thanks for the attention to detail here, it's really very important that the font looks correct for the user in each specific locale (even if the change is as small as the dot at the top slanting to the left or right, etc.)

Locale	OS	Font
zh-CN	Windows	Microsoft Yahei (微软雅黑)
zh-TW	Windows	Microsoft Jhenghei (微軟正黑)
zh-CN	OSX >= 10.11	PingFang SC (苹方-简)
zh-TW	OSX >= 10.11	PingFang TC (蘋方-繁)
zh-CN	OSX >= 10.6	Heiti SC (黑体-简)
zh-TW	OSX >= 10.6	Heiti TC (黑體-繁)
zh-CN, zh-TW	OSX < 10.6	STXihei (华文细黑)
zh-CN, zh-TW	Linux	WenQuanYi (文泉驿正黑)
ja	Windows	Meiryo (メイリオ)
ja	OSX	Hiragino Kaku Gothic (ヒラギノ角ゴ)
ja	Linux	Sazanami Gothic (さざなみゴシック) [Fallbacks: IPA Gothic, Mona Font]
ko	Windows	DotumChe (돋움체)
ko	OSX >= 10.8	Apple SD Gothic Neo (애플 SD 산돌고딕 Neo)
ko	OSX < 10.8	AppleGothic (애플고딕)
ko	Linux	UnDotum (은돋움) [Fallback: FBaekmuk Gulim (백묵굴림)]

[be5invis]

@anyong Microsoft YaHei is not suitable for zh-TW. The proper one is Microsoft Jhenghei.

[anyong]

Actually 雅黑 does support 繁體字 correctly in zh-TW, but 正黑 is fine, too.

Edit: yes I guess I should agree 正體 is "more correct" on the whole, will edit in the above response.

[bpasero]

@anyong thanks so much, this list is very useful. maybe the table could be edited based on feedback in this issue from others and this week I can start looking into adding it in together with #4433.

[bpasero]

@be5invis just curios, our rules seem to be this:

font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback"

Does it already work better if you remove the last rule so that sans-serif becomes the fallback:

font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", sans-serif

[be5invis]

@bpasero

No. Droid Sans Fallback is Android-only, so on Windows and OS X the rule is identical to font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", sans-serif.

My suggestion is:

• For zh-CN : font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif
• For zh-TW : font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sans", "PingFang TC", "Microsoft Jhenghei", "Source Han Sans TC", "Source Han Sans", "Source Han Sans TW", sans-serif
• For ja : font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sans", "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", "Sazanami Gothic", "IPA Gothic", sans-serif
• For ko : font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sans", "Apple SD Gothic Neo", "AppleGothic", "Malgun Gothic", "Nanum Gothic", "Dotom", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif

[bpasero]

Thanks much, I can apply these rules and people will have a chance to verify these improvements from our next insider build later this week.

[espresso3389]

@be5invis,

For ja, "Hiragino Kaku Gothic Pro" seems better than "Hiragino Kaku Gothic". At least, I cannot find web sites using "Hiragino Kaku Gothic".

[be5invis]

@espresso3389 thanks

[bpasero]

Pushed a change to pick up the font-family from https://github.com/Microsoft/vscode/issues/5260#issuecomment-211505841

We plan to release a new insider soon so that this can be verified.

Thanks for everyone's help and looking forward to hear back how this change goes!

[bpasero]

A fix has landed in insiders. You can give it a try from our insiders release today: http://code.visualstudio.com/Download#insiders

Happy for feedback!

[bpasero]

@be5invis any chance you could check if the insiders released has fixed this issue for you?

[be5invis]

@bpasero Hold on i am installing

[be5invis]

@bpasero It works (at least for Simplified Chinese).

[bpasero]

Ok nice.

[anyong]

I will check zh-Hant-TW later. On Apr 21, 2016 6:42 PM, "Belleve Invis" notifications@github.com wrote:

[image: image] https://cloud.githubusercontent.com/assets/240091/14706356/a0bb9e70-07f0-11e6-824f-bb04aa237e87.png @bpasero https://github.com/bpasero It works (at least for Simplified Chinese).

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/Microsoft/vscode/issues/5260#issuecomment-212850897

[anyong]

Everything looks fine here :+1:

[ghost]

@bpasero Don't use PingFang / Noto Sans / Source Hans on Windows, oe adjust fonts order.

If user install those fonts on Windows will cause text blur and difficult to read.

[bpasero]

@ArianeLu so you say there should be a different order of font-families depending on the OS? or could we do this all in one CSS declaration (preferred).

[espresso3389]

On Japanese environment, the new build looks fine on OS X and Windows.

[be5invis]

@ArianeLu I don't think most Windows users will install PingFang, except for font enthusiasts. In the CSS I suggested, the Source Han Sans family is placed after Windows fonts.

[ghost]

@bpasero

I think this one is best for zh-cn:

"Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", "Noto Sana", "Microsoft Yahei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "WenQuanYi MicroHei" ,sans-serif

YaHei UI available in Win8+, may better than YaHei WenQuanYi MicroHei is for CentOS/SUSE, better than use UKai(i dont know why it will be set as default font of sans-serif in some linux)

If linux/mac user installed YaHei, text still beautiful and clear, but other font is not clear/blur on Windows(except hi-dpi)

[anyong]

@bpasero @ArianeLu It's fine with Noto Sans, the CJK fonts are called different names (i.e. Noto Sans CJK SC, Noto Sans CJK TC and so on). I have these Noto Sans CJK fonts installed on my computer (Win 10 + zh-Hant-TW locale) and the UI font being displayed is Jhenghei as expected.