Improve the aesthetic aspect of the text layout
naqtn
The Japanese text layout's current implementation (2024.1.2, build 1433) is not as beautiful as the GUI graphical design.
As a proofreader, I understand the localization project's current target (or priority). It aims to provide more text information and support more languages, so aesthetic aspects are rather future tasks (or low-priority issues).
For now (shipping the full UI localization), I want to visualize how many users feel it could be more beautiful so that the dev team can grasp the importance of this issue. So, I am posting this to accept the users' voices.
Calling out to our Japanese users with technical knowledge of GUI: if you have specific plans or ideas to enhance the appearance of texts, I would appreciate your comments here.
---
Explanation of the context for Japanese users(日本ユーザー向けの状況説明。上記の逐次翻訳ではありません):
2024.1.2, build 1433 のオープンベータから UI の全面的な日本語表示の提供が開始されましたが、現在の日本語テキストのレイアウトはあまり美しいものではありません。文字の大きさや太さ、文字周辺の余白の取り方、改行の入り方といった点が審美的な観点から、いまひとつであるように感じられるかもしれません。
VRChat 開発側にとってローカライズプロジェクトの現在の優先的な課題は、より多くのテキスト情報を提供することと、対応言語を増やすことにあるようです。美的観点からの改善は優先度低めの今後の課題ということになっています。(私 naqtn は校正者の一人です。翻訳プロジェクトの Discord でこういった点を開発者に訴えたり議論したりしてます。開発側も一定の理解はしていますが、どうしても優先度的には低くなっています)
このため現時点でこの点を訴えても直ぐに改善される見込みはありませんが、この点が気になっているユーザーが居るということを示して、その重要性を開発チームに理解してもらい、なるべく早くに改善がなされるよう、この「テキストレイアウトの美的側面を改善する」というタイトルの投稿をしてみます。「美しくないなぁ」「格好悪いなぁ」と思うのであれば vote していただけると助かります。
GUI デザインの知識のある方へ:テキストの見えの具体的な改善点がありましたら、その内容をここにコメントしていただけると助かります。
Log In
naqtn
Related post: "Suggest to use Microsoft YaHei UI for menu type font character rather than NotoSans" ( https://feedback.vrchat.com/feature-requests/p/suggest-to-use-microsoft-yahei-ui-for-menu-type-font-character-rather-than-notos ) To improve the readability, Chinese users want to change the font and adjust the text size.
ぴけぴけ
I felt that there was a problem not only with the shape of the font, but also with the spacing between letters (kerning).
I want to create a comparison image using “Noto Sans JP” to improve VRChat's UI, but it seems like the spacing between the letters is too wide. (The top text is spaced to match the VRChat look, the bottom text is the default from the image editing software.)
Also, when considering the untranslated parts of the actual UI, the Japanese side has wider character spacing and looks sloppy.
Even if the VRChat side changes the font, the wide spacing between letters will be varied.
In addition to the font shape, I felt that there was likely to be a problem with character stuffing (kerning).
I tried creating a comparison image with “Noto Sans JP” similar to the VR Chat UI, but I think there is too much space between characters. (The top is the letter spacing to match the VRChat display, and the bottom is the default in image editing software.)
Also, even if you compare the parts of the actual UI that haven't been translated yet, the Japanese side seems to have wide character spacing and no tightness.
Even if the font is changed, I think a sense of incongruity will remain if the space between characters remains wide.
waso Keli
making the font not-bold would help with Toki Pona, too.
in the bold font, these two words are easy to confuse:
ale - all, everything
ala - no, not, nothing
as a result, i usually write ALA in all caps.
nekochanfood
Speaking of line breaks, There is something called "BudouX" from Google.
Repository: https://github.com/google/budoux
BudouX Demo: https://google.github.io/budoux/
It can generate a beautiful and readable Japanese sentence by using a machine-learning model.
If they can import this into the client, it will perform appropriate line breaks even for button labels.
nekochanfood
Speaking of the overflowing texts, I recommend adding an auto-scroll system.
It makes no need for auto-sizing and improves readability.
auto-sizing is makes the text difficult to read, the UI will messed up.
Especially in VR, It would be deadly.
FYI, Overflowing texts are auto-scrolled in Android.
nekochanfood
Speaking of the fonts, these are my recommended free Japanese fonts:
- BIZ UDGothic (https://fonts.google.com/specimen/BIZ+UDGothic)
- IBM Plex Sans JP (https://fonts.google.com/specimen/IBM+Plex+Sans+JP)
- LINE Seed JP (https://seed.line.me/index_jp.html)
- M PLUS 1 (https://fonts.google.com/specimen/M+PLUS+1)
I think these are famous among Japanese creators.
I strongly recommend "BIZ UDGothic" because it's based on the concept of Universal Design and is easy to see and read for everyone.
Also, these are my recommended paid Japanese fonts:
- UD新ゴ (https://www.morisawa.co.jp/fonts/specimen/1090)
- ヒラギノ角ゴ (https://www.screen-hiragino.jp/lineup/hirg/)
FYI, "ヒラギノフォント" is used in iPhone and sign texts of Highway in Japan.
nekochanfood
As far as I know, the UI text uses bold. As a result, the glyph thickness increases, making it unreadable for some stroke-count characters.
I think those are some reasons why the UI text looks ugly.
At the least, the UI text in the Camera and the Action Menu doesn't use bold. I thought their glyphs were good to read.
Also, the bold text steals the space. When applying bold, the polygons of the glyph stretches horizontally too and the text wraps in some cases.
So, I think the UI text will be better if remove the bold.