マルチリンガルサイトで使えるWEBフォント決定版(2015年版)

今回このブログを作るに当たって
長年の悩みを”多少”解決できたので公開。

結論からいうと、マルチリンガルサイトで合成フォントを使うには
CSSのフォントファミリーの指定+オリジナルWEBフォントセット
=擬似合成フォント化することで解決。

サンプルはこのサイト(この記事のサムネイルも)
+使ってないけど、もう一つウエイトの重いのがセットになってます。

せっかちさんはこちらから。

jp-webfontset
日本語・中国語・英語のwoff/otf/eotファイルのセットとCSSのウェブフォント設定ファイルがセットになってます。

経緯・ロジックまで気になる方は、下記をご参照ください。

日本語×English、日本語×中国語とか

ちゃんと悩んでますか？
このブログを読んでる時点で日本人だと思うので、
日本語書体を基準に考えますが

日本語・中国語フォントの英字が・・・
中国語までカバーする日本語フォントがない
もちろん日・中語をカバーする欧文書体も・・・

結果上の画像みたいになっちゃうのは、
グラフィック・WEBのデザイナーなら”あぁ〜”って状況かと。

マルチリンガルサイトを
デザインするときの問題点

システム的な話は専門の方にお願いするとして、サイトに限らずバイリンガル表記のグラフィックを作る際に気になるのが”書体”。タイトル・コピーが英語で本文日本語とかなら問題ないでしょう。
極端ですが上の画像みたいに、2言語を併記する場合、片方は明朝系、もう一方がゴシック系だとおかしい…ですよね？

欧文系ならばUniversやHelveticaなどで、英語とイタリア語とか対応可能なんですが、
文字数の多いアジア圏の言語、日本語 / 簡・繁体中国語 / 韓国語などは欧米系書体じゃ無理。
そもそもマルチリンガル併記でなくても、この文章の様に日本語内ですら半角英数字が使用されると・・・なかなか日本語フォント付属の英数字が汚かったりします。(中華系書体だとなお顕著)
ということで、Adobe系のアプリでは”合成フォント”などが使われるのが通常です。

Webで合成フォントを使うには？

一つ目の方法はオリジナルフォントの制作でしょうけど、、、
難しいし時間もかかる。

なので、とりあえず一番簡単にできる方法は・・・
と考えたところ、

font-family : 英語書体, 日本語書体;

上記の様に指定してあげれば、英数字は”英語書体”で指定したフォント、
それでカバーできない全角文字は”日本語書体”と適用されます。

ちなみに、”日本語書体”の前後に
”中国語書体”/“韓国語書体”などを指定すれば対応可能言語は増やせます。

*他にもWebフォントを読み込む際にUni cordで使用箇所(半角全て/数字だけ/記号だけ/ひらがなだけ、など)を指定することで詳細設定も可能なようです。

Web用オリジナル
合成フォントセットを作ろう！

“Web用の”ここがミソで、
Webフォントを前提としています。= ライセンスのクリアが大変…

なので、前提として”ライセンスをクリアした”+”フリーのフォント”で組む。
手順はグラフィックで使用する合成フォントを作る時と同じで、
選択肢の少ないものから選んでいきます。

今回は、1ウエイトの明朝体(セリフ系書体)と
3ウエイトのゴシック体(サンセリフ系書体)を作りましたが
選択肢が少なかった明朝体を例に説明します。

手順 : 1

おそらく明朝系日本語フリー書体の中で、
ライセンスをクリアできるのはIPAライセンスの物だけだろう・・
と言うことで、通常のIPAフォントもいいんですが、
全体的にもう少し柔らかい印象で、ひらがなの形がすっきりしている”はんなり明朝”を選択。
難しい漢字を多用することもないだろうということで、下記を参考に第一水準漢字だけのサブセットを製作、

woffに変換して容量を圧縮。2.9MBが869KBに。

参考:【Noto Sans Japanese】ブログの記事を綺麗なフォントで表示したいので最軽量化してみた

手順 : 2

はんなり明朝も例にもれず半角英数字が・・・バランスは取れてるんだけど美しいとは言えない、ということで、はんなり明朝の印象に合いつつボディサイズのバランスが合う書体をGoogle Webフォントから探す。

“Junge”

Googleweb font Junge

カリグラフィをベースにした(たぶん)、流れるようなセリフが、
はんなり明朝の形状に合いそうなので、ダウンロード→woffに変換。

手順 : 3

通常のWebフォント設置手順で、書体指定。
って感じで作ったのがこれ。

画像クリックでダウンロードされます。使用方法、書体のサンプルは下記参照。

注 : ライセンス上、自由にダウンロード・再配布・商用利用可能ですが、Fontデータを”売る”と違反になります。たぶん”Webフォント使用料”とかで請求しちゃうとNGなのでお気をつけて。

使用方法

ダウンロードしたZIPファイルを解凍。
ryom_jp-cn-en_webfont.cssを開いて使用しない書体の項目は削除。
FTPなどでドメイン直下の階層にフォルダごとアップロード。直下が嫌な場合は、必要に合わせてCSSファイルを変更してください。
Header内で”ryom_jp-en_webfont.css”を読み込ませる。
CSSのfont-familyで下記のように書体指定。

明朝+セリフ系(はんなり明朝 x Junge)

font-family: RyomEN-serif, RyomJP-serif;

ゴシック+サンセリフ系(NotoSans x Raleway)

ライト

font-family: RyomEN-sanserif-li, RyomJP-sanserif-li;

レギュラー

font-family: RyomEN-sanserif-re, RyomJP-sanserif-re;

ボールド

font-family: RyomEN-sanserif-bo, RyomJP-sanserif-bo;

おまけ： NotoSansすごい！！

今回使わせてもらったGoogleとAdobe共同開発のNotoSans。ボディ幅が気になって合成フォント化したけれど、欧文ベースで作られているだけあって正直普通に使う分には合成フォント化は必要ないかも。さらに7ウエイト完備で、本文組用書体としても、タイトル書体としても使用可能。さらにさらに、主要アジア系書体をカバーしているので中国語、日本語、韓国語、タイ語の併記なんかも完璧。無料Webフォントがほぼ皆無の日本語・中国語にとってフリーで使えるこの書体はありがたい。加えて、中国。 Googleへのアクセス規制の影響もあってGoogle Webフォントが使えません・・・そんな状況で、再配布可能なこの書体はかなりありがたい。ただし元データサイズが98MBもあるので要圧縮ですが・・・ついでにこれは三十路デザイナーの趣味ですが、形状が旧ディスプレイ特化した日本語書体の代表格”平成角ゴシック”の幾何学的な形状に似ててかなり好み。参考・参照元