CSSのフォント指定と谷崎潤一郎

CSS の font-family プロパティで「いろいろなサイトはどんなフォントを指定しているのかな？」を調べた際に感じたφ(..)メモメモの備忘録だ。最後に、今日時点での font-family 決定版を記しておいた。

前提
・指定するのはゴシック体のみ
・明朝体は「さようなら」
・できるだけ多くの人が読みやすいフォントを選ぶ

我が国で一般に用いられている活字の大きさが小型に過ぎることは、前にも申し上げた通りであります。
（前略）、我が国の如く美術的な文字を有し、楷、行、草、隷、篆、変態仮名、片仮名等、各種の字体を有する国が、それらの変化を視覚的効果に利用しないのは、間違っております。
谷崎潤一郎は文章に対して、さまざまなコダワリがあったことで知られている。例えば、文章の頭で1マスあけない、など。「文章読本」も、これに則って書かれている。

引用した部分は「活字の形態の問題」という章だ。内容は雑誌や書籍などの活字についてだけれど、もし今、谷崎潤一郎が生きていたら、Webのフォントにも注文をつけていただろう。

noteのフォント

font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;

身近なところで、noteのフォントを例に挙げてみる。今のトレンドを押さえたオーソドックスなフォント指定の例だと思う。少しばかり、カンタンな説明を加えておく。

-apple-system

Macの欧文フォント指定。Chromeなどのブラウザで San Francisco を表示してくれる。ヒラギノの英字がキレイではないので、アルファベットは San Francisco でお願いってやつだ。

BlinkMacSystemFont

同じく、Macの欧文フォント指定。SafariやFirefoxなどのブラウザで San Francisco を表示してくれる。

Helvetica Neue

これも、Macの欧文フォント指定。San Francisco はOS X 10.11(
El Capitan)と iOS 9 以降でないと意味がない。なので、それ以前のMacには Helvetica Neue を指定している。

Segoe UI

Windowsの欧文フォント指定。Windows 7 以降で反映される。Windowsでアルファベットや数字を表記させるなら、これがベターな選択だと思う。

Hiragino Kaku Gothic ProN

Macの日本語フォント指定。Macintosh OS X 10.5（Leopard）以降と iOS なら、ヒラギノ角ゴ ProN W3 が優先される。日本語のヒラギノ角ゴ ProN W3 もカキコミされているが、これは古いバージョンのブラウザ用だ。

Meiryo

Windowsの日本語フォント指定。Windows Vista以降でメイリオを反映してくれる。Windows 7以降なら、Meiryo UI もあるのだけれど、ひらがなの幅がせまくなる点が今ひとつです。

Arial sans-serif !important

Arial と sans-serif は上記に入らないパターン用です。 sans-serif は「とりあえず何でもいいから、サンセリフ（日本でいうところのゴシック体）を表示しとけよ」という意味だ。最後の !important は「これ（フォント指定）は強制的ね、よろしく」の「！」。

游ゴシックは嫌われもの？

noteに限らず、游ゴシックを指定していないサイトが多くある。游ゴシックはWindows 8.1以降ならPCに同梱されている。なぜ、選ばれていないのか、その理由は単純だ。めっちゃ汚い、かすれて読みにくい、漢字とひらがなのバランスが悪い……要は美しくない。

font-familyにChromeでも読みやすい游ゴシックを指定する方法

qiita.com

そこまでして游ゴシックを指定するメリットはないと思う。

Webフォントは重い？

Webフォントの利点は環境（OSやブラウザなど）のちがいに関係なく、どのデバイスでも同じ表示ができることだ。よく使用されるWebフォントの例としてはGoogleの Noto Sans あたり。ただ、サーバから引っ張り出してくる仕組みなのでページの表示が遅くなってしまう。

Google Fonts + 日本語　早期アクセス

googlefonts.github.io

特に、日本語フォントは欧文フォントとくらべてデータが重い。また、日本語フォントの数も少なく、もし利用するとしても一部に日本語フォントか、欧文フォントぐらいまでかな。現状では「Webフォントはパス」が無難だと思う。

逆に言えば
・無料
・軽い（重くない）
・魅力ある日本語フォント
をすべてクリアすれば font-family に加えてみたい。

font-family 決定版と谷崎潤一郎

前提
・指定するのはゴシック体のみ
・明朝体は「さようなら」
・できるだけ多くの人が読みやすいフォントを選ぶ
・游ゴシックはパス
・Webフォントもパス（現時点では）

font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

Webの専門家でもない、ただのド素人がチョイスしたフォント指定だ。いろいろなサイトをチェックしてみて、これに落ち着いた。明日になったら心変わりしているかもしれない。間違いがあれば指摘していただければ。細かい説明は省いておく。

「フォントなんて、文字が読めれば何でもいいんじゃない？」。そう突っ込まれたら身も蓋もなく終わりなんだけどね。もう一度、谷崎潤一郎の「文章読本」から引用しておく。

（前略）口語文といえども、文章の音楽的効果と視覚的効果とを全然無視してよいはずはありません。なぜなら、人に「分らせる」ためには、文字の形とか音の調子とか云うことも、与って力があるからであります。読者自身は或はそれらの関係を意識しないで読んでいるかも知れません。しかしながら、眼や耳から来る感覚的な快さが、いかに理解を助けるものであるかと云うことは、名文家は皆よく知っているのであります。既に言葉と云うものが不完全なものである以上、われわれは読者の眼と耳とに訴えるあらゆる要素を利用して、表現の不足を補って差支えない。

フォントひとつ取り上げたとしても、テクストにとって重要なファクターに成り得る。他者に伝えるのが文章の役割であるとするなら、文字を表すフォントの存在は無視できない。何よりも、あらゆる事柄への些細なコダワリはとても大切な回り道だ。

そう、思っている。

※参考
「文章読本」谷崎潤一郎　（中公文庫）