ウェブを取り巻く日本語フォント環境〜CSSのフォント指定はこうすることにしました〜

この記事はシス研 Advent Calendarの24日目の記事です()。

前回はSSHでしたが今回は打って変わってフォントの話です。

日本語の文字には主に「仮名」と「漢字」の2種類の文字があり，それらを組み合わせることで初めて意味が構成されます。「ひらがな」「カタカナ」は1字1音でそれ自体に意味は持っていませんが，「漢字」という文字は1字に対して音(おん)だけでなく「意味」を持っています。これは熟語などを構成するときに便利な一方しかし1文字に対して意味を持っていると，他の意味を表現するためには新しい文字を作る必要が有るため種類も膨大になっています。文字の表現というのはコンピュータ上で非常に重要な表現です。英語などは非常に簡単に表現するのですが，日本語はカタカナしかつかえないとか，漢字を使うためには別のフロッピーディスク(死語)を読み込む必要があるなど，様々な足かせを付けられてきました。

日本語のウェブフォントを取り巻く環境

ここ最近「ウェブフォント」と呼ばれるものが注目されるようになってきました。それまでフォントというものは「ユーザのOSにインストールされていてはじめて使える」というものだったため，WindowsやMacなど「OSに標準で入っているフォント」を指定する他ありませんでした。ところが「ウェブフォント」の登場によって，ウェブサーバにフォントデータを置いておけば，CSSの指定によってブラウザがデータをダウンロードし，表示に使うことができるようになりました。つまりOSに依存せず，どんなフォントでもウェブ上で利用できるようになったのです。これを使った仕組みの一つがアイコンフォントだったりします。

さてじゃあ「日本語もウェブフォントで表示したい！」と思うわけですが，ここでも日本語の文字数の多さが仇となってしまいます。そもそもウェブフォントを使用する前提として，フォントデータがブラウザによって一度ユーザのローカル上にダウンロードされる必要があります。このとき，26文字のアルファベットと数字・記号ぐらいしか使わない英語圏ではフォントのデータサイズというのはたかが知れており，大きくなっても数百Kバイトほどです。ところが日本語は，冒頭にも述べたとおり「英数字」に加え「ひらがな」「カタカナ」だけではなく，「漢字」という膨大な文字のデータが必要となり，すると必然的にフォントのデータサイズが大きくなってしまうのです。例えば「Noto Sans Japanese(源ノ角ゴシック)」をウェブ用に変換したフォントデータサイズは1.9MBもします。これはウェブ表示のパフォーマンスに大きく関わってくる数字で，回線速度が遅いと表示まで時間がかかってしまうことになります。

日本語でウェブフォントは無理？

ソフトバンクが提供している「FONTPLUS」というサービスでは解決策の一つとして動的にフォントデータを作成する手法を取り入れています。これはページに使われている文字を解析してそのフォントデータのみをもった独自の文字セットを作成して表示するという仕組みで，これによりフォントデータを削減することでパフォーマンスの高速化を行っています。しかしFONTPLUSは有料のサービス。1年の契約をしようとすると安くても12,960円かかります。商用フォントを使えるというメリットはありますが，個人のページに組み込むには少し敷居が高すぎます。

というわけでウェブフォントの恩恵を受けるためには技術的な問題を解決する必要があり，日本語のウェブページではまだまだシステム標準フォントに~~頼らざる負えない~~頼らざるを得ない状況です。

じゃあシステムフォントに頼ろう

ところでみなさん「游ゴシック」をご存知でしょうか。これは最近様々なウェブサイトで指定されているフォントなのです。例えばライフハッカーのフォント指定は以下の様な感じ。

body {
	background-color: #f5f5f5;
	font-family:SourceHanSansJP-Light, YuGothic, 'Yu Gothic', "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px; /* 10px; */
	-webkit-text-size-adjust: 100%;
	line-height: 1.75;
	color: #000;
}

他にもさくらのVPSのページでも游ゴシックが指定されています。

body {
	margin: 0;
	color: #333333;
	font-size: 75%;
	font-family:
		Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

游ゴシックってなんや

「游ゴシック」は有限会社字游工房が販売している商用フォントです。なぜこの注目されているかというと，OS X MavericksとWindows 8.1に標準で搭載されているフォントだからです。この2つの相容れぬプラットフォーム上でおそらく初めての共通で使えるプリインストールされたフォントはないかと思います。つまり游ゴシックを指定すれば，大体のコンピュータで同じ表示ができるというわけです。

ここで游ゴシックのサンプルを見てみましょう。

游ゴシックには若干クセが有り，ゴシック体と言っても一定の太さというわけではなく，他のフォントに比べて線の強弱が非常に強く表現されています。どちらかというと明朝体よりなので，本文などの長い文章には向いていますが，見出しや注目させたいテキストに使うには少し微妙です(個人の感想)。

見出しについては今までどおりのゴシック体の指定も活かしつつも本文については遊ゴシックを指定するのがいいのではないでしょうか。

というわけで？

というわけで私としては本文と見出しに以下のようなフォント指定をしたいと考えています。

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
	/* 見出し向き */
	font-family: 'Open Sans','Helvetica Neue', Helvetica, 'Arial', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}
p {
	/* 本文向き */
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, 'Arial', '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}

Open SansはGoogle Fontsで使用できる英字フォントで，他のフォントとの相性も良いフォントです。游ゴシックとも相性がいいと感じたので合わせて使うことにしました。

サンプル

このフォント指定のサンプルとしてシス研 Advent Calendar 2014の特設ページを作ってみました。

見出しの部分には旧来のゴシック体指定をしていますが，本文や一覧部分には游ゴシックを指定しています(Windows 7だと游ゴシックが入ってないのでメイリオで表示されるかと思います)。

おまけ明朝も指定しよう

游書体シリーズには明朝も存在します。なので明朝指定も考えてみました。

.serif-text {
	font-family: 'Times New Roman', Times, '游明朝体', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif;
}

Times系は他のフォントと比べて少し小さくなる傾向があるので，その辺りは好みかもしれません。

本当ならもう少し考察を交えた中身の濃い記事のつもりだったのですが，急に蔵出しすることになったので微妙なことになってしまいました。お許し下さい！

2015年7月3日コメントによる誤字修正