繁体字-中国語WEBサイトに最適なfont-familyとは？
繁体字‐中国語でWEBサイトを制作する際に最適なfont-familyはご存知でしょうか？
ローカル企業にその最適解をみつけるべく、台湾を代表的するグローバル企業が、どのようなfont-familyを指定してるのかをまとめてみました。
フォントにはセリフ系とサンセリフ系の大きく２つの系統があります。
セリフとは、欧文文字のストロークの端にある「飾り」「ハネ」の部分で、日本語フォントの明朝体にある「うろこ」の部分があるフォントにあたります。
それに対してサンセリフは、直線的なデザインでこの「飾り」「ハネ」の部分がありません。日本語フォントではゴシック体にあたります。
セリフは「伝統」、サンセリフは「モダン」というように、それらを見る人に正反対の印象を与えることから、フォントの指定はWEBサイトのイメージを大きく左右するものです。
しかし、イメージやデザイン、ディバイスの問題のため、１つのfont-familyだけをあげて「これが正解」と断言できるというものではありません。
コーポレートサイト事例 : トヨタ
トヨタは170以上の国や地域で車を販売している言わずとしれた日本を代表するメーカーです。
その台湾の子会社であるTOYOTA TAIWANで使われている繁体字中国語フォントは、Helveticaが筆頭で指定されています。
“5FAE8EDF6B639ED19AD4”という見慣れない指定がありますが、これは微軟正黒體というフォントのUnicodeで、その後ろにあるMicrosoft JhengHeiと同じフォントとなります。つまり、この3つは同じフォントです。
また、“51379ED1 Pro”という指定も、その後ろにある”LiHei Pro”のUnicodeということで、この２つのフォントは同じフォントということになります。
対象のURL
https://www.toyota.com.tw/
CSS内のfont-familyの指定
body {
font: normal 50%/normal Helvetica,Verdana,Arial,"5FAE8EDF6B639ED19AD4","Microsoft JhengHei","51379ED1 Pro","LiHei Pro",sans-serif;
}
IT系サイト事例 : Apple
MacやiPhoneといったデザイン性の高いハードウェアと関連商品のソフトウェアを世界中で販売しているAppleでは、SF Pro TCというフォントを筆頭に指定しています。このSF系は、San FranciscoというフォントでAppleが自社で開発しており、様々なディバイスのシステムフォントとして採用されているものです。
また、少し前のiOS9の使われていたPingFang TCも指定されています。
*iOS11以降であれば “-apple-system, BlinkMacSystemFont”とディバイスフォント指定する方法もありますが、当内容では現状を比較まとめるものなので以下の事実だけ記載しておきます。
さらに、body:lang(zh-TW)という:lang擬似クラスの指定がされていることがわかります。これはカッコ内で指定されている言語であった場合、その要素に対してスタイルを適用する指定方法です。
対象のURL
https://www.apple.com/tw/
CSS内のfont-familyの指定
body:lang(zh-TW) {
font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial",sans-serif;
}IT系サイト事例 : Microsoft
Microsoft WindowsやMicrosoft Officeを世界中に販売してきたMicrosoftのWEBサイトは、世界中の言語に対応しています。その繁体字中国語サイトでは、Microsoftが開発したSegoe UIが筆頭に指定されており、Microsoft JhengHei＝微軟正黑體も合わせて指定されています。
対象のURL
https://www.microsoft.com/zh-tw/
CSS内のfont-familyの指定
body {
font-family: 'Segoe UI',SegoeUI,'Microsoft JhengHei',微軟正黑體,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
IT系サイト事例 : Google
Googleのフォント指定はページ毎に様々なようでした。
TOPページは、お馴染みの検索窓だけのページですので、以下のテキスト情報の多いservices紹介のページをサンプルとしました。
Googleが開発し、現在はオープンソースとなっているRobotoというフォントが筆頭に設定されています。
このRobotoは、Androidのシステムフォントとしても利用されています。
ちなみに他のページではHelveticaやWEBフォントであるgoogle fontsもいくつか利用されていましたが、総じて全てがシンプルな指定で、arialとsans-serifのみのページもありました。
対象のURL
https://www.google.com.tw/intl/zh-TW/services/
CSS内のfont-familyの指定
body {
font-family: 'Roboto',arial,sans-serif;
}ポータル・メディア系事例 : Yahoo
日本でもポータルサイトとして圧倒的なPV数を誇るYahooですが、台湾yahooも人気があり、「Yahoo奇摩」の名で親しまれています。
そのYahoo奇摩のfont-familyは、Helvetica Neueが筆頭に設定されています。そしてAppleユーザ向けにSTHeitiがあり、Windowsユーザ向けにMicrosoft JhengHeiが指定されています。
対象のURL
https://tw.yahoo.com/
CSS内のfont-familyの指定
body {
font: 13px/1.25 "Helvetica Neue",Helvetica,Arial,STHeiti,"Microsoft JhengHei",sans-serif;
}まとめ
代表的なグローバル企業の繁体字中国語フォントを調査しましたが、セリフ系は使われていないようでした。
2019年のトレンドとしてサンセリフがモダンなイメージから好まれているようです。
今回の調査対象サイトが自社でフォントを作れるような大企業だったので、それぞれ自社で開発したフォントを筆頭に置く傾向がありました。
Googleのように欧文だけしてしてsans-serifを指定するのも一つの方法かと思います。ブラウザのsans-serifのデフォルト指定に任せるということです。
このパターンは、シャープを買収したり、iPhoneなどの受託製造（EMS）で、知られている台湾を代表する企業である鴻海精密工業（ホンハイ）でも見られた方法です。
WEBサイトのユーザ傾向やデザインにあったfont-familyの参考にしてくだい。