タイ語のWEBサイトに最適なfont-familyとは？
タイ語でWEBサイトを制作する際に最適なfont-familyはご存知でしょうか？
タイ語のWEBサイトを持っている代表的なグローバル企業やローカル企業が、どのようなfont-familyを指定してるのかをまとめてみました。
フォントにはセリフ系とサンセリフ系の大きく２つの系統があります。
セリフとは、欧文文字のストロークの端にある「飾り」「ハネ」の部分で、日本語フォントの明朝体にある「うろこ」の部分があるフォントにあたります。
それに対してサンセリフは、直線的なデザインでこの「飾り」「ハネ」の部分がありません。日本語フォントではゴシック体にあたります。
セリフは「伝統」、サンセリフは「モダン」というように、それらを見る人に正反対の印象を与えることから、フォントの指定はWEBサイトのイメージを大きく左右するものです。
しかし、イメージやデザイン、ディバイスの問題のため、１つのfont-familyだけをあげて「これが正解」と断言できるというものではありません。
コーポレートサイト事例 : トヨタ
トヨタは170以上の国や地域で車を販売している言わずとしれた日本を代表するメーカーです。
そのタイの子会社であるToyota Motor Thailandで使われているタイ語フォントは、DB Helvethaica X Thinが指定されています。
このDB Helvethaica X Thinは、WEBフォントで指定されています。
対象のURL
https://www.toyota.co.th/index.php
CSS内のfont-familyの指定
body{
font-family: 'DB Helvethaica X Thin';
}
IT系サイト事例 : Apple
MacやiPhoneといったデザイン性の高いハードウェアと関連商品のソフトウェアを世界中で販売しているAppleでは、SF Pro THというフォントを筆頭に指定しています。このSF系は、San FranciscoというフォントでAppleが自社で開発しており、様々なディバイスのシステムフォントとして採用されているものです。
*iOS11以降であれば ”-apple-system, BlinkMacSystemFont“とディバイスフォント指定する方法もありますが、当内容では現状を比較まとめるものなので以下の事実だけ記載しておきます。
さらに、body:lang(th)という:lang擬似クラスの指定がされていることがわかります。これはカッコ内で指定されている言語であった場合、その要素に対してスタイルを適用する指定方法です。
対象のURL
https://www.apple.com/th/
CSS内のfont-familyの指定
body:lang(th) {
font-family: "SF Pro TH","SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}IT系サイト事例 : Microsoft
Microsoft WindowsやMicrosoft Officeを世界中に販売してきたMicrosoftのWEBサイトは、世界中の言語に対応しています。そのタイ語サイトでは、Leelawadee UIが筆頭に指定されています。
対象のURL
https://www.microsoft.com/th-th/
CSS内のfont-familyの指定
body {
font-family: 'Leelawadee UI','Segoe UI',SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
IT系サイト事例 : Google
Googleのフォント指定はページごとに異なる指定となっていました。TOPページは、お馴染みの検索窓だけのページですので、以下のテキスト情報の多いservices紹介のページをサンプルとしました。
現在はオープンソースとなっているGoogleが開発したRobotoというフォントが筆頭に設定されています。
このRobotoは、Androidのシステムフォントとしても利用されています。
ちなみに対象のURL以外の他のページではHelveticaやgoogle fontsも利用されていましたが、総じて全てがシンプルな指定であり、arialとsans-serifのみといったページもありました。
対象のURL
https://www.google.fr/intl/fr/services/
CSS内のfont-familyの指定
body {
font-family: 'Roboto',arial,sans-serif;
}ポータル・メディア系事例 : Sanook
日本ではまったく馴染みのないポータルサイトですが、タイでは圧倒的なPV数を誇るSanookです。
font-familyは、Helvetica Neueが筆頭に設定されていました。
対象のURL
https://www.sanook.com
CSS内のfont-familyの指定
body {
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}まとめ
タイ語のWEBサイトを持っている代表的なグローバル企業やローカル企業のローカル企業のフォントを調査しましたが、セリフ系は使われていないようでした。
2019年のトレンドとしてサンセリフがモダンなイメージから好まれているようです。
タイ語は、表音文字なのでアルファベット同様に文字数が少ないため、WEBフォントで指定をすることが良いようにも思います。
しかし、実際にはディバイスフォントが多く使われているようでした。
データ量が軽いため、このフォントで表示したい！というものがあれば、WEBフォントを使うことも検討でしょう。
代表的なものとして、サンセリフならNoto Sans Thai、セリフならNoto Serif Thaiなどがあります。
WEBサイトのユーザ傾向やデザインにあったfont-familyの参考にしてくだい。