Webブラウザ上で“活版向け”フォントを表示させてみる
- 2014/11/09 14:12
- 齋藤公二
Windows 8.1とOS X Mavericks(10.9)には、字游工房の「游明朝体」と「游ゴシック体」が標準で搭載されています。Webブラウザの表示フォントとしても利用できます。実際にどんなふうに見えるか試してみます。
残念なことに、Webサイトで利用できるフォントはそう多くはありません。Windows環境なら「MSゴシック」と「メイリオ」、OS X環境なら「ヒラギノ」くらいです。ディスプレイの解像度や画面上での読みやすさ、多くの環境で読めるかどうかなど考慮すると、だいたいその辺に落ち着きます。
もう10年くらいこうした“貧困”が続いていたのですが、游明朝体と游ゴシック体が標準搭載されたことで、ちょっとだけ豊かになりました。ただ、実際にサイト上で利用しているケースはほとんどないようです。いったいどんな印象になるのでしょうか。
サイト上でフォントを変えるときは、スタイルシートを使います。スタイルシートというのは、Webサイトのレイアウトを決めるファイルです。たとえば、サイトを標準の「MSゴシック」でなく、「MS明朝」で表示させたい場合は、「font-family: "ＭＳ 明朝"」などと指定します。すると、サイトを訪れた人には、明朝体で表示されます。
「游明朝体」をスタイルシートに指定してみます。結果は、以下です。ただし、Windows 8.1、OS X Mavericks以降である必要があります。iOS 6以降でもフォントを追加すれば表示できるとのことです。
游明朝体の表示
(サイズ: 16px)
「モロッコ・ムーア様式とフランス・コロニアル様式の、“白い家々（カサ・ブランカ）”の町並みに舞う、北アフリカの強い陽光。酒場の喧騒をよぎる外人部隊の面影。アラブ情緒漂う「地の果て」の港町。
(サイズ: 20px)
「アフリカの星！」ローマ帝国時代のローマ人は、モロッコの美しさをそう称えた。イスラム帝国時代のアラブ人はアフリカ大陸の西北端、北方は地中海、西方は大西洋に面したこの国を「エル・マグレブ」と呼んだ。
游ゴシック体の場合は以下です。
游ゴシック体の表示
(サイズ: 16px)
「モロッコ・ムーア様式とフランス・コロニアル様式の、“白い家々（カサ・ブランカ）”の町並みに舞う、北アフリカの強い陽光。酒場の喧騒をよぎる外人部隊の面影。アラブ情緒漂う「地の果て」の港町。
(サイズ: 20px)
「アフリカの星！」ローマ帝国時代のローマ人は、モロッコの美しさをそう称えた。イスラム帝国時代のアラブ人はアフリカ大陸の西北端、北方は地中海、西方は大西洋に面したこの国を「エル・マグレブ」と呼んだ。
品があって読みやすいです。游明朝のサイトから紹介文を引用します。
游明朝体ファミリーは「時代小説が組めるような明朝体」をキーワードに、単行本や文庫などで小説を組むことを目的に開発した游明朝体Rを核とした明朝体ファミリーです。 文字の大きさの揃った現代的な明るい漢字と、伝統的な字形を生かしたスタンダードなかなの組み合わせは、これまでの明朝体とは違う、游明朝体の大きな特徴です。
游明朝や游ゴシックは、電子書籍リーダー「iBooks」や紀伊國屋書店「Kinoppy」でも使われているフォントです。スタイルシートの指定は、WindowsとOS X両方で利用できるように、以下のようにするといいそうです。
游明朝体のスタイルシート指定
font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
游ゴシック体のスタイルシート指定
font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
ちなみに、電子書籍リーダーで利用されているフォントは、Kindle Paperwhiteの場合は「モトヤ明朝」のブラッシュアップ版、楽天koboの場合は「モリサワ リュウミン」とのこと。Webブラウザ上での読書環境も、活版文化のいいところを取り入れながら、どんどん充実していってほしいですね！