序

ウェブをブラウジングしていると、嫌というほど見る

• 無意味にひたすらシステムフォントを列挙している
• 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する

という苦痛極まりないフォント指定をしているCSSをよく見かける。

ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。

それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。

ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。

起

話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。

それ以降度々、「無意味なフォントの指定に無知が見える」という批判をしてきたが、次に確認したとき(去年である)には多くのサイトがそのような指定を解消していた。そして、今改めて確認すると、そのような「無意味なフォント指定」は大手サイトから消え去っていた。

だが、 依然として個人サイトやブログ、さらに言えばウェブ制作を語るようなページに至るまで、無意味かつ傲慢なフォント指定のCSSは溢れている。 震源地となった大手サイトが悔い改めたのだから、そのようなことをしている製作者は直ちに心を入れ替えるべきだろう。

なお、確認したのは2019-10-29である。

MSN Japan

body, button, input, select, textarea {
    font-size: 1.4rem;
    line-height: 1.357;
    font-family: "segoe ui",meiryo,"yu gothic","hiragino kaku gothic pron",sans-serif;
}

Wikipedia (jp)

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

Qiita

body {
    font-family: -apple-system,Segoe UI,Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif;
    font-size: 1.4rem;
    color: #333;
}

Paiza

body {
    width: 100%;
    height: 100%;
    color: #333333;
    font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Osaka, "メイリオ", Meiryo, sans-serif;
}

毎日コミュニケーションズ

body {
    height: 100%;
    line-height: 1.6;
    color: #333333;
    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    font-size: 100%;
}

技術評論社

body {
    -webkit-text-autospace: ideograph-numeric ideograph-alpha;
    -moz-text-autospace: ideograph-numeric ideograph-alpha;
    -ms-text-autospace: ideograph-numeric ideograph-alpha;
    text-autospace: ideograph-numeric ideograph-alpha;
    color: #333;
    font-size: 12px;
    font-family: gihyojp,sans-serif;
    line-height: 1.4;
    text-align: center;
}

gijyojpの中身は次の通り

@font-face {
    font-family:alphabet-sans-serif;
    src:local(-apple-system),local(BlinkMacSystemFont),local("Segoe UI"),local(system-ui);unicode-range:U+0000-05C7
}
@font-face {
    font-family:"gihyojp";
    src:local("Hiragino Sans"),local("BIZ UDゴシック"),local("メイリオ")
}
@font-face{
    font-family:"gihyojp";
    src:local(-apple-system),local(BlinkMacSystemFont),local("Segoe UI"),local("Roboto"),local("Ubuntu"),local(system-ui);unicode-range:U+0000-05C7
}

日本Microsoft

body {
    font-size: 15px;
    font-family: 'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif;
    min-width: 320px;
    color: #000;
    background-color: #fff;
}

毎日新聞

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: -apple-system,BlinkMacSystemFont,YuGothic,"游ゴシック","Yu Gothic","メイリオ",sans-serif;
    font-weight: 500;
    counter-reset: rankm ranks;
}

ニコニコ動画

body {
    min-width: 1024px;
    background-color: #fafafa;
    color: #333;
    font-family: Avenir,Lato,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,Meiryo,メイリオ,sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

以下はややアウト。カナロコ(神奈川新聞)

body {
    background: #fff;
    color: #292929;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,sans-serif;
    -webkit-text-size-adjust: 100%;
}

Yahoo! Japan

html {
    font-family: "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3",Hiragino Kaku Gothic Pro,"\30E1\30A4\30EA\30AA",Meiryo,Osaka,"\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF",MS PGothic,sans-serif;
    font-size: 62.5%;
}

私が怒っている類の指定。読売新聞オンライン

body {
    background: #fff;
    color: #1e2428;
    -webkit-text-size-adjust: 100%;
    font-family: Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,ＭＳ ゴシック,Helvetica Neue,Helvetica,Arial,sans-serif;
}

不公平感がないように、うちのも出しておこう。Chienomi:

body {
    color: #3c2c28;
    background-color: #fff;
    padding: 0;
    margin: 0;
}

Mimir Yokohama:

body, form#MailForm, form#MailForm p, #BackToTop p {
    font-family: "A-OTF UD Shin Maru Go Pr6N", "A-OTF UD Shin Maru Go Pro", "TBUDRGothic STD", "TBChibiRGothicPlusK Pro", "TBChibiRGothicPlusK", "Hiragino Maru Gothic", "Hiragino Maru Gothic Pro", "MotoyaLMaru", "Rounded-X Mgen+ 1cp", "Rounded-X M+ 1cp", "Migu 1C", "VL PGothic", "meiryo", sans-serif;
}
#TitleHeader {
    font-family: "Yasashisa Gothic", "GenEi LateMin v2", "Overlock", "GenYoRA", "A-OTF Folk Pro", serif;
}
p, article ul, article ol, article dl /* , div[data-caption]:before */ {
    font-family: 
    /* Latin */
    "Fira Sans", "Roboto", "Ubuntu", "Avenir", "Segoe",
    /* UD serif */
    "MotoyaNUDApollo", "TBUDMincho STD", "BIZ UDPMincho", 
    /* Antique */
  "A-OTF Folk Pro", "MotoyaApollo", "GenYoRAO", "GenYoRA",
    /* Commercial serif */
    "Ro Hon MinSink Pr5N", "Ro Hon Minsink Pro", "Ro Hon Minsink Std", "Ro Hon MinKok Pr5N", "Ro Hon MinKok Pro", "Ro Hon MinKok Std", "HonMinSKok-Book JIS2004", 
    /* Assuming user installed. */
    "Source Han Serif JP", "Noto Serif CJK JP",
    /* Yu Mincho is reading better than MS Mincho. */
    "Yu Mincho", serif;
    letter-spacing: 0.015em;
    line-height: 1.25;
}
pre,code { 
    font-size: 100%;
    font-family: 
        /* Assuming user installed */
        "Operator Mono", "Input Mono Compressed", "Input Mono Condenced", "Input Mono Narrow", "Input Mono", "Fira Code", "Fira Mono", "monofur", "agave", "Meslo LG S", "Anonymous Pro", "Hack", "Envy Code R", "Luculent", "mononoki", "Anka/Coder Condensed", "Anka/Coder Narrow", "Cousine", "Fantasque Sans Mono", "NK57 Monospace Rg", "Go Mono", "FreeMono", "Terminus", "Iosevka Term", "OCRB", "PT Mono", "Space Mono", "Cica", "Myricam", "Myrica", "iosevka", 
        /* Popular monospace fonts (User?) */ 
        "Ubuntu Mono", "Ricty", "Source Han Code Pro", "Source Code Pro", "Noto Mono", "Inconsolata", "Sudo", "Migu 1M", "MigMix 1M",
        /* Assuming system installed */ 
        "Roboto Mono", "VL Gothic", "Liberation Mono", "Menlo", "Osaka-等幅", "Monaco", "DejaVu Sans Mono", "Droid Sans Mono", "Consolas", "Courier New", "Courier", "Bitstream Vera Sans Mono", monospace;
        font-feature-settings: "liga" 0, "clig" 0;
        font-variant-ligatures: no-common-legatures;
}

CSSフォント指定の構造

CSSにおけるfont-familyは次の書式である

font-family: family-name[, family-name...];

この動作は一般的には次のようなものだ。

1. 先頭から順に直接に当該フォントファミリーが定義されているかをチェックする
2. 定義されていた場合、そのフォントファミリーの 最初の 物理フォントを取得し、当該ファミリーのフォントとして使用する
3. 定義されていなかった場合、または表示文字中にグリフのない文字が含まれている場合、次のファミリーを探索する
4. 全てのグリフが埋まるまでこれを繰り返す
5. グリフが埋まらなかった場合、ブラウザ側で既に物理フォントを取得しているデフォルトフォントを使用する

これはChormium(Google Chrome, Opera, Vivaldi, Braveを含む)及びFirefoxの挙動であり、Dilloなんかは全く違う挙動を示す。

注意点がいくつかある。 まず、次のような指定をし

font-family: "Arial", "MS PGothic", sans-serif;

FontConfigで次のような指定をしたとする

<match target="pattern">
  <test qual="any" name="family">
    <string>Arial</string>
  </test>
  <edit binding="strong" name="family" mode="assign">
  <string>Sen</string>
  <string>Source Han Sans JP</string>
  </edit>
</match>

この場合、最初にブラウザはArialを要求し、FontConfigがフォント情報を返すのだが、ブラウザが使うのは最初に定義されているSenたけであり、Source Han Sans JPを使用することはなく、日本語が含まれていれば次のMS PGothicを要求する。 もちろん、その場合に

<match target="pattern">
  <test qual="any" name="family">
    <string>Arial</string>
  </test>
  <edit binding="strong" name="family" mode="assign">
    <string>Source Han Sans JP</string>
  </edit>
</match>

としていれば、源ノ角ゴシックでグリフが埋まるのでＭＳ Ｐゴシックを要求することはないと考えれられる。

この挙動にはいくつか理由がある。

第一には、Windowsがこうした論理フォントの定義ができないため、必須の機能とならないということが挙げられる。 そして第二に、FontConfigはデフォルトで「単一のフォントが要求されたときにグリフを埋められるように」大量のフォントを返すようになっているので、assignしないとまず間違いなく最初に一致したフォントで描画できる。だが、CSSには複数のフォントを適用する機能があるということだ。これはもちろん、物理フォントが小さいセットから順に要求することで言語ごとに異なるフォントを表示させるという用法もあるが、unicode-rangeを使って明示することもできる。

そして最後に適用されるデフォルトフォントについてだ。 これはブラウザのデフォルトフォントとしても使われるdefault fontのことであり、sans-serifのことではない。 さらにいえば、この最終段階では最初にマッチするフォントだけを使用するルールを変更し、可能な限り表示できるようにする。例えばFontConfigを使用しているシステムであれば同名のフォントの定義が存在するか否かによらずフォントのリストにある全てのフォントを試す。 このあたりのルールは複雑であり、この段階にきた場合は「システムにグリフを持つフォントがあれば表示できる、何によって表示されるかは制御できない」が正しい説明になるだろう。

大きいセットを先に指定する愚かしさ

次の例を見てみよう。

font-family: "Arial", "MS PGothic", sans-serif;

この場合、ブラウザはまずArialを適用し、次にＭＳ Ｐゴシックを適用する。 つまりは、英字はArialになり、日本語はＭＳ Ｐゴシックになる。

では、逆にしたらどうだろうか?

font-family: "MS PGothic", "Arial", sans-serif;

ブラウザはまずＭＳ Ｐゴシックを適用し、不足するグリフがあればArialを適用する。 だが、そもそもＭＳ ＰゴシックのグリフになくてArialにあるグリフというのがないため、ＭＳ Ｐゴシックが存在する環境でArialの指定が意味をもつことはありえない。

この指定に全く意味がないかというとそうでもない。 Windows以外の環境ではＭＳ Ｐゴシックがないから、最低限Arialは適用されるはずだ。

だが、意味があるかどうかということと、適切であるかどうかということは全くの別問題である。 あなたがArialは新しい幾多のフォントの中で圧倒的に素晴らしいと考えているのであればもしかしたら良いかもしれないが、sans-serifがどのようなデザインを持ったフォントであるか予測することができないからである。Arialの英字が適用されることで、デザイン的に全くマッチしない可能性は低くない。

では次の指定はどうだろうか。

font-family: "MS PGothic", "Arial", "Hiragino Kaku Gothic Pro", sans-serif;

この場合、Windows環境でArialが適用されることは考えられないので、Arial及びヒラギノ角ゴシックはMac向けの指定だと考えられる。 ヒラギノ角ゴシックはやや細めで行も高く、文字間も広いフォントなので、英字に関しては黒めで詰めた文字のほうが美しい、という感覚があるのであれば、まぁわからないではない。

では次の指定はどうだろうか。

font-family: "MS PGothic", "Hiragino Kaku Gothic Pro", "Arial", sans-serif;

困ったことに非常によく見る指定である。この場合、Windowsの日本語フォントとMacの日本語フォントを指定しているわけだが、それらが存在する環境ではArialが使われることはない。 ではそれらが存在しない環境とはなにか。

ひとつには、Windows、あるいはMacで日本語フォントを導入していない環境が考えられる。 Macで追加フォントを入れていない環境というのも考えられるのだが、それはこのようなCSSを書いている人がヒラギノが追加フォントであることに反発を見せていることを考えるとその環境は想定していないのだろう。

だが、そのウェブサイトは日本語フォントがなくても利用できるものなのだろうか? そうであれば、欧文環境向けにArialというのはわからなくはない。適切な表記ではないが。¹²

しかし、実際そんなことはないのではないだろうか。日本語を前提としたウェブサイトであるならば、このような指定は無意味極まりない。 望んだ環境ではArialが採用されることはないのだ。

もうひとつは、WindowsでもMacでもない環境だ。

だが、Arialは商用フォントであり、WindowsでもMacでもない環境ならば、高い確率でＭＳ Ｐゴシックも、ヒラギノ角ゴシックも、Arialもない。 Arialが要求されればFontConfigの標準設定でメトリック互換な代替フォントが選ばれる可能性が高い(例えばLiberation Sansとか)けれども、それを望んでいるのだろうか。 メトリック互換であることは、あくまでもメトリック互換という以上の意味を持たないが、厳密にピクセル数を計算できるようなUI部品上でArialを要求しているのだろうか。もしそうだとするならば、日本語フォントを先に指定していることで表示崩れは不可避だろう。

論理フォント名について

CSS上ではジェネリックなフォント名として

• sans-serif
• serif
• monospace
• fantasy
• cursive

の5つが指定できる。

このうち、実際にシステム的にジェネリックなフォント名として通用するのは

• sans-serif
• serif
• monospace

の3つだけで、fantasyやcursiveという論理フォントが存在するとは限らない。

指定意図としては曖昧に「サンセリフ体」「セリフ体」などと指定しているわけだが、これが強制されるわけではない。 最近はserifと指定してもセリフ体(明朝体)にはならないケースが増えている。

WindowsもMacもこれらの抽象フォントは適切に処理されるが、Windowsの場合こうした抽象フォントを設定する方法がない。 こうしたこともあり、Chromium, Firefoxともにシステムの選択に依存せず、自前でフォントを選択するようになっている。当初フォント設定がなかったBraveもChromiumと同じ設定を使うようになった。

だが、Chromiumは現実的にfantasyやcursiveが全く使われていない状況を反映してか、これらのフォントは設定できなくなっている。

表示を確認する

まずは知識を持ち、現実を見る

大きく表示しないとわからないだろうから、画像クリックでオリジナルサイズのものを見たほうがよいだろう。ただし、非常に大きな画像(6MB)である。

内容は左から

• ＭＳ Ｐゴシック
• ヒラギノ角ゴシック (W4)
• 源ノ角ゴシック
• DFP 平成ゴシック (W5)
• メイリオ
• 游ゴシック (Windows版)
• IPA Pゴシック
• VL Pゴシック
• Migu 1C
• さざなみゴシック
• 東風ゴシック
• 小杉ゴシック

である。一応、説明すると次のようになる。

つまり、いずれも環境によって標準フォントとなりえるものである。Osakaを入れたかったのだが、私はMacユーザーではないため、Osakaのオリジナル版を持っていないから。

グリフ形状、特徴で比較する

グリフで分類すると次のようになる

伝統的角ゴシック体

ＭＳ Ｐゴシック, 平成ゴシック, IPA Pゴシック, さざなみゴシック, 東風ゴシック

長体の伝統的角ゴシック体

游ゴシック

モダンな角ゴシック体

ヒラギノ角ゴシック, 小杉ゴシック, メイリオ

丸ゴシック体

VL Pゴシック, Migu

角ゴシック体でモダンなものは、払いを細く表現したり、グリフのボックスをフルに使うような丸みがあったりとやわらかい印象になっているのが特徴的。こうした特徴は、さらに新しいUDゴシック系になるとより際立つ。

(コンピュータに限らないUIフォントのトレンドとしては、伝統的角ゴシックからモダンなゴシックになり、丸ゴシックを経て現在はUDゴシックになっている)

フォントにまるで関心のない人からすれば同じように見えるかもしれないが、実際のところUIなどで表示が変わると誰もが印象を変えるものではある。 特に、フォントのカテゴリが変わるとさすがに感じるものがある。LinuxではUIがさざなみからVLゴシック、あるいはM+/Migu(当時はM+IPA+Gという名前)に切り替わったときなど、どこのディストリビューションのユーザーコミュニティでもまぁまぁ話題になった。

まして、フォント指定を気にするような “デザイナー” であるならば、フォントのグリフデザインコンセプトの違いには敏感なはずだ。そして、そんな人がＭＳ Ｐゴシックとヒラギノ角ゴシックのデザインが全く逆方向にあることを理解できないとは思えない。 というよりも、もしそんなデザイナーがいたならば、私はその人のことを全く信用できない。³

デザイン的観点から言えば、

font-family: "Hiragino Kaku Gothic", "meiryo", sans-serif;

はわかる。「あぁ、モダンデザインのフォントを使ってほしいんだな」と。 逆に

font-family: "Osaka", "MS PGothic", "DFPHSGothic-W5", "DFGHSGothic-W5", "DFHSGothic-W5", sans-serif;

というのもわかる。ここはかっちりとしたトラディショナルなゴシック体がほしいんだな、と理解する。 だが、

font-family: "MS PGothic", "Hiragino Kaku Gothic", sans-serif;

なんて指定をされたら、デザインのことを考えているとは微塵も思えない。 その書体がどのようなコンセプトでデザインされ、そのフォントがどのような印象を与えるか、というのが、指定されているフォントがまるで反するものを一緒にしているからだ。

グリフサイズで比較する

画像において、それぞれ縦の長さが異なるが、個々の画像の幅(=画面幅)は一定なので(テーブルのはみ出た分は除く)、グリフの空間が広い(文字間であれ行間であれ)と縦長になり、詰めているフォントだと短くなる。 そして、ここからわかるのが、「詰まっている」順に

ということである。

最も縦長の游ゴシックだが、これはフォントが長体でグリフに高さがある上に、行間も広いためで、一行に何文字書けているか、ということを見ると幅では小杉ゴシックとヒラギノ角ゴシックが最も幅をとっている。游ゴシックの幅は割と標準的だ。 逆に幅が最も狭いのはIPA Pゴシックで、ついでＭＳ Ｐゴシック。上位4つは幅も狭ければ行間も狭い「詰め詰め」であり、「東風ゴシック」「ＭＳ Ｐゴシック」「平成ゴシック」の3つに関しては非常に詰まった印象が強く、黒々としている。

「ＭＳ Ｐゴシック」と「ヒラギノ角ゴシック」の両方を指定する人が口にする理屈として、「レイアウト崩れ」というのをよく聞くのだが、 ＭＳ Ｐゴシックは最も字間・行間ともに詰まっていてグリフも密な類であり、逆にヒラギノ角ゴシックは字間・行間とも非常に広い部類に入るので、この両方がレイアウト上望ましいということはありえない。

ＭＳ Ｐゴシックの詰まりっぷりはArialと同様で、代替を探すのが難しいくらい密である。日本語フォントとしてはぎっちぎちと言っていい。「みちみちで見づらい」とか言われることのあるIPA Pゴシックよりもぎっちぎちである。 (IPA Pゴシックがみちみちなのは、恐らくはＭＳ Ｐゴシックを意識しているのだと思うが)

対してヒラギノ角ゴシックは、「行間が広い」という批判もある源ノ角ゴシックよりも行間は広い。ゆとりあるデザインだ。

レイアウト的に考えても、この両方を指定するというのは理屈に合わないし、無理がありすぎる。そして、それらでなければ表示が崩れるというならば、それらを含まない環境(LinuxでもUnix環境でも、追加フォントをインストールしていないMacでもいい)では表示が崩れてもいいということだろうか? テキストのデザインとして、まともに読めないデザインをするデザイナーにどれだけの価値があるのか。

webのデザインというのが厳密には制御できず、「なり」であることを前提としている、というあたりから勉強し直したほうが良いのではないか。 というよりも、じゃあ他のメトリクスではどのように問題で、それらのメトリクスではどう問題ではないのか、ということも聞きたいし、じゃあWindowsにヒラギノ角ゴシックが入っていたらレンダラの違いによって異なる表示がされることについてはどうなのか、とも思う。

なので、レイアウト的な理由から言っても両方指定というのはセンスが死んでいる。というか、センスが死んでいるで済めばまだよくて、ウェブ上のフォントについてまともに勉強すれば「フォントに指定でレイアウトを強制するのは現実的なことではない」ということは結構すぐわかることだし、「特定のフォントが入っていることを前提としたレイアウトはしてはならない」ということもすぐわかることなので、知識や意欲や努力の問題として疑われることとなるだろう。

この問題は英文の場合は全く違った話であるということを理解しておかなければならない。

Helveticaは1957年に誕生したフォントであり、Arialは1982年にHelveticaの代替(互換)フォントとして誕生した。

ArialはHelveticaとメトリック互換であり、字形は少し異なる。Swiss 721というHelvetica代替フォントも存在するが、こちらは字形は似ているがメトリックが少し異なる。

Bitstream製のSwiss 721とURW++製のNimbus Sans LはデザインがHelveticaに準じているが、Liberation SansはメトリクスがHelveticaの互換である。Helveticaはスクリーンフォントとして初期から存在するものであるため、例えばM+ BitmapフォントのM+hlvなど、Helvaticaの互換フォントというのはたくさん作られた。

余談だが、ステンペル社による1983年の改訂版HelveticaはNeue Helvetica。割と最近Macに標準採用になったmonotype社とAdobe systems社による新しいHelveticaはHelvetica Neue。この名前の違いは前者がLinotypeが販売するもの、後者がAdobeが販売するもので、データフォーマット的には少し違いがあるが、「デザイン自体はほぼほぼ同じ」であるらしい?(明確な資料は見つけられなかった) Monotypeが2019年にリリースした新しいHelveticaは”Helvetica Now”。 さらに、GenevaはHelveticaをスクリーンフォントとして丸っこくした派生書体。

まだフォントが当たり前に存在するのでなく、貴重だった時代にHelvetica, Arialはリファレンスであった。 スクリーンフォントといえばHelvetica=Arialという時代があったのだ。

このようなリファレンスが存在する状況においては「品質に劣っていても使える代替品」が必要とされた。だから、豊富にHelvetica=Arialの代替品が存在する。そのため、Helvetica=Arialが存在するとみなしても良かったのである。 勘違いしてはいけないのは、これは「Helveticaのほうが先であり、Arialは代替フォントなので、Helvaticaを要求されたときにArialを返し、Arialもないのであれば代替フォントをHelveticaとして使用する」という話である。ただ、スクリーンフォント名の指定としてはArialのほうが一般的で、歴史的にHelveticaではなくArialが指定されてきた時代のほうが(ビットマップ時代を含めて)長い。

別の言い方をすると、「sans-serifやserifという値は最初からあったわけではない」ということだ。 今であればsans-serifを要求すると、モダンなシステムのLinux, Unix, Windows, Macでは適切にフォントを選択する。だが、古いシステムにおいては使用するフォントは明示する必要があり、場合によってはそれが固定的に使われた⁴。

XLFD(X Logical Font Description)の話をすると⁵、フォントは例えば次のように指定することになる。

-*-dejavu sans mono-medium-r-normal--*-80-*-*-*-*-iso10646-1

この方式では基本的にフォント名を明示しなければならない。XLFDはワイルドカードを使うことができ、フォントファミリー名に対してもワイルドカードが有効である。 だから、フォントファミリー名を*にしてしまえば「なんでもいいよ」という意味になる。

だが、このことからもわかるように「プロポーショナルなフォントがいいんだよなぁ」みたいな指定が効かない⁶。そこで登場するのがarialなわけだ。

DOSでフォントを指定できるアプリといえばEmacsだが、EmacsもXLFDでフォントを指定する。 具体的な指定を要求するものだとTeXなどがある。

つまりは、arialという指定が、「指定する方法がないので、有名で代表的なフォントを指定する」という形で古代において現代のsans-serifの意味合いで使われてきたのだ。

こうした歴史を経てきているから、Helvetica、あるいはArialを要求することには支障はないと考えられる。Arialを代替する手段がない環境というのが稀だからだ。歴史を踏まえていない新しいシステムなら可能性はないではないが、Liberation FontにArialの代替品があることで実質的に困る要素がない。

非常に幅の狭いUIに収めたい場合などArialを要求したいケースというのはなくもないし、その意味で英文環境においてArialを指定すれば意図は達成できる。だから、レイアウトのためにArial、あるいはHelveticaを指定すること自体はちゃんと成立する。

それに対して 日本語にはそのようなリファレンスフォントがない⁷ ので、存在することを前提とすることができない。ＭＳ ＰゴシックはあくまでWindowsだけのものだし(リコーで販売はしているけれども)、Windows以外の環境では成立しない。そもそもここまでWindowsとMacに共通の和文フォントというのは登場してこなかったし、ＭＳ Ｐゴシックのメトリック互換フォントというのは存在はするのだけど、ほぼ「2ちゃんねる」における表示(ＭＳ Ｐゴシックを前提とした「アスキーアート」の表示のため)であり、その文化の衰退と共にＭＳ Ｐゴシックメトリック互換フォントそのものが衰退している。⁸

それだけではない。欧文の場合、monospaceといったら本当に幅は固定であり、文字はマス目にならぶ。 だから、monospaceを使う場合でも簡単に文字レイアウトを意図した通りに固定できる。

しかし日本語フォントの場合、「等幅」といいつつ実際にはdual spaceフォントであり、フォントが綺麗にマス目に並ぶとは限らない。単純に欧文:和文が1:2という関係に収まっていればいいのだが、現実はレダリングの都合もありそうならない。付け加えるならば、源ノ角CodeJPは比率が2:3である。

こうした事情から日本語環境において文字レイアウトを固定しようというのは無理がありすぎる。 できないことを強要するよりは、仕様どおり「なり」の表示をできるように心がけるほうがずっと良いだろう。

もし、「意図したフォントでないと題字が折り返されてしまう」なんてことがあるとして、「ビューポートの幅はデバイスによる上にユーザーの任意なのだから、フォントファミリーの指定で折り返されないようにするなんて絶対に不可能」というのが答えになる。 そのような場合は明らかにビューポート幅に対するスケーラブルなサイズに指定すべきだし、そもそもヒラギノ角ゴシックを指定して折り返されないようになっていれば、これよりも幅のあるフォントなんてそうそうないから問題は起きないはずだ。

もうひとつ注意点。Arial/Helveticaの話でしたのは、あくまで「レイアウト上の理由がArialあるいはHelveticaなら成立する」という話であって、デザイン的な是非(前節の内容)には一切触れていない。

なお、レイアウト上の問題を含め難しい側面を持つArial/Helveticaが適切かどうかという点については過去の記事で論題としているので、そちらを参照していただきたい。 要約すると、「デザイン的にはArial, Helveticaは読みづらいが、メトリック的には非常に詰まった密なフォントで、代替が難しく、メトリック上これらが存在することを期待するのは現実的に可能な状況にあることからArialそのものを置き換えること難もある」という話で、Arialを指定することの是非には触れていない。根本的には推奨はできないが。

游ゴシックのフォントファミリーはちょっとおかしい…

余談だが、これを調べている間に気がついたのが、「游ゴシックのフォントファミリー名が特殊」ということだ。 例えば源ノ角ゴシックなら

% fc-list | grep -F "Source Han Sans JP"
/usr/share/fonts/adobe-source-han-sans/SourceHanSansJP-Normal.otf: 源ノ角ゴシック JP,Source Han Sans JP,Source Han Sans JP Normal,源ノ角ゴシック JP Normal:style=Normal,Regular
/usr/share/fonts/adobe-source-han-sans/SourceHanSansJP-Regular.otf: 源ノ角ゴシック JP,Source Han Sans JP:style=Regular
/usr/share/fonts/adobe-source-han-sans/SourceHanSansJP-ExtraLight.otf: 源ノ角ゴシック JP,Source Han Sans JP,Source Han Sans JP ExtraLight,源ノ角ゴシック JP ExtraLight:style=ExtraLight,Regular
/usr/share/fonts/adobe-source-han-sans/SourceHanSansJP-Medium.otf: 源ノ角ゴシック JP,Source Han Sans JP,Source Han Sans JP Medium,源ノ角ゴシック JP Medium:style=Medium,Regular
/usr/share/fonts/adobe-source-han-sans/SourceHanSansJP-Bold.otf: 源ノ角ゴシック JP,Source Han Sans JP:style=Bold
/usr/share/fonts/adobe-source-han-sans/SourceHanSansJP-Heavy.otf: 源ノ角ゴシック JP,Source Han Sans JP,Source Han Sans JP Heavy,源ノ角ゴシック JP Heavy:style=Heavy,Regular
/usr/share/fonts/adobe-source-han-sans/SourceHanSansJP-Light.otf: 源ノ角ゴシック JP,Source Han Sans JP,Source Han Sans JP Light,源ノ角ゴシック JP Light:style=Light,Regular

というように、源ノ角ゴシック JPとSource Han Sans JPという名前が共通で存在し、それとは別にウェイト別の名前が存在する、という形式なのだが、Windows版游ゴシックのフォントファミリーは游ゴシックという名前を持つフォントが他に持っている名前はYu Gothic MediumとYu Gothic Lightであり、それぞれYuGothM.ttc及びYuGothL.ttcというファイルである。 そして、Yu Gothicという名前を持っているフォントはYuGothR.ttcというファイルで、このファイルを指している名前は他にYu Gothic UIがある。

$ fc-list | grep -F -e 'Yu Gothic' -e '游ゴシック'
C:/WINDOWS/fonts/YuGothB.ttc: Yu Gothic UI,Yu Gothic UI Semibold:style=Semibold,Regular
C:/WINDOWS/fonts/YuGothR.ttc: Yu Gothic:style=Regular
C:/WINDOWS/fonts/YuGothM.ttc: Yu Gothic UI:style=Regular
C:/WINDOWS/fonts/YuGothR.ttc: Yu Gothic UI,Yu Gothic UI Semilight:style=Semilight,Regular
C:/WINDOWS/fonts/YuGothB.ttc: Yu Gothic:style=Bold
C:/WINDOWS/fonts/YuGothM.ttc: 游ゴシック,Yu Gothic Medium:style=Medium,Regular
C:/WINDOWS/fonts/YuGothB.ttc: Yu Gothic UI:style=Bold
C:/WINDOWS/fonts/YuGothL.ttc: Yu Gothic UI,Yu Gothic UI Light:style=Light,Regular
C:/WINDOWS/fonts/YuGothL.ttc: 游ゴシック,Yu Gothic Light:style=Light,Regular

というわけで、「日本語で指定するか、英語で指定するかでウェイトが変わる」という仕様。 游ゴシック指定だとLight、Yu Gothic指定だとRegularになるはずなので、英語で書いたほうが少し太くなる。画像では英語で指定しているのでRegularになっている。けれど、目立って細いフォントなので、Mediumのほうが自然な気がする。

指定しないとどうなるか

どうもならない。 というか、 ユーザーに純粋な自由と選択権を与えることになる。

フォントが選択されていない場合にどのように描画するかはブラウザに依存するが、 それで文字が表示できないブラウザというものはない。

ChromiumやFirefoxの場合は、そうしたケースではUser Agent Stylesheetというものが適用される。 その上で適用すべきフォントの指定が何もなければデフォルトフォントの適用が行われる。

Dilloの場合は指定されていなければDilloの設定として存在するsans-serifを適用する。

最も望ましいのはsans-serifまたはserifを指定することである。

これらはユーザーが設定によって任意のフォントを指定することができる。 特に、ユーザーがフォントにこだわりをもってスクリーン用に商用フォントを購入している場合、具体名でフォントを指定することでユーザーが自分の好きなフォントを使用するという選択権、自由を奪うことになる。 どうしてもそうせざるをえない合理的理由があればそれもやむを得ないが、どうしてもということでなければそのような傲慢なことはすべきでなく、そのような振る舞いは品性に悖る。

また、w3mのようなブラウザではフォントの指定に関わらず環境で使用されるフォントを使う。

指定すると何が問題なのか

わかりやすいのは、「Windowsユーザーで高品位なフォントを購入している場合に、ＭＳ Ｐゴシックが強制されて自由なフォントが使えない」である。

それにとどまらず、「好ましくないスタイルのフォントが適用されることを防げない」というのがある。割とよくあることだと、日本語のページなのにグローバルなCSSを適用するから、中国語フォントが強要されてしまい中国語の字体になるなどだ。

好ましくないスタイルのフォントが適用される、というのは、行間や字間、太さや字形などの判読性に関わる要素において、「読みやすいフォントを選択する」ということができないという問題もある。 例えばディスレクシアの人が、自分でも読めるようにとUDフォントを購入したとしても、UDフォントで読むという権利を剥奪することになる。それはつまり、「障害者の排除」を行っていることに他ならない。

そこまででなくとも判読性に関しては個人差も大きいので、「なんか読みづらいな…」という事態は発生しやすい。例えば個人的にはPC版Discordのテキストはとても読みづらい。 それに対して「読みやすいフォントを要求する」という任意性も剥奪することになる。

そして、やや特殊な例だが、FreeType環境(Linux, FreeBSD, Android, iOSなど)においては潜在的にＭＳ Ｐゴシック及びOsakaフォントの指定は特定条件下で特定の文字が破損する(壊れたグリフで表示される)可能性がある。

いずれにせよ、CSSでフォントを具体的に指定することは「ユーザーの自由を剥奪する行為である」ということを踏まえて、なお必要であるかということを検討しなければならない。

指定せざるをえないフォント

丸ゴシック

かっちりした印象を与えたくなくて、やわらかい印象のフォントを使って欲しいという場合にはsans-serifもserifも適切な指定といえず、丸ゴシックを指定したくなるのだが、それを指定する方法がない。

欧文だとRealist sans-serifとかNeo-grotesqueとかTransitional sans-serifなんていう「丸いサンセリフ」の書体分類があり、Helveticaもこの類。似たような分類があるのだから、指定できるようにしてくれてもいいのに…という気持ちにはなる。

Macにはヒラギノ丸ゴと筑紫[AB]丸ゴシックが搭載されている。Windowsの場合はMeiryoが一応丸ゴシックテイスト。こうした標準採用のフォントがあることから「丸ゴシックを使って欲しい」という指定をしたくなることもある。

font-family: "A-OTF UD Shin Maru Go", "MotoyaLMaru", "Hiragino Maru Gothic", "TBChibiRGothicplusK", "TsukuARdGothic-Regular", "TsukuBRdGothic-Regular", "HCP Maru Gothic", "WadalabChumarugo2004emojijp", "Migu 1C", "M+ 1p", "VL PGothic", Meiryo, sans-serif;

アンチック体

ゴシック体と明朝体の中間フォント。アポロ/フォーク/タイポス/スキップなどの「鱗のない明朝体」のようなものと、漫画でよく見る丸みある鱗のない明朝体ひらがなとゴシック体漢字の組み合わせとなっているフォントの二系統があるアンチック体。要は「明朝体とゴシック体の中間」である。

可読性が非常に高くて本文フォントに指定したいことはあるのだが、汎用性のある指定方法がない。 欧文でいうとSlab体という、sans-serifとserifの中間っぽいフォントがあるので、やっぱり指定方法を用意してもいいのではないかという気持ちになる。

もっとも、標準採用のフォントはなく、「入れている人限定」になるから、アンチック体を指定していった上でserifにフォールバックするというのは比較的自然に書ける。

手書きフォント

これは「cursiveがあるじゃん!」という気持ちになるのだが、cursiveを指定して設定してもいないのに日本語手書きフォントになる環境は見たことがない。というか、そもそもcursiveに対応するのは草書体である。

手書きフォントは導入されていることを期待するのも難しいので、雰囲気重視のウェブサイトでどうしても手書きフォントを使いたいならwebフォントを使うのが無難。

コーディングフォント(monospace)

codeやsampなどいくつかのHTML要素がデフォルトでmonospaceフォントになるが、実はここに少し問題がある。

monospaceフォントを要求するケースというのは、ほとんどの場合レイアウト上の等幅ではなく、判読性の高いコーディングフォントを求めたいときである。このようなフォントは現在、WindowsではConsolas、MacではMenlo, SF Mono, Monaco, さらにMonacoの欧文グリフを含むOsaka―等幅―が収録されている。monospaceといったときに期待するのはこれらのフォントである。

ところが、実際にはそのようなフォントは選択されない。特に、WindowsでのデフォルトはＭＳゴシックであり、判読性に利点がない。

一応、言語として英語を指定するとCourierになるためいくらか改善されるが、CourierではなくConsolasで表示してほしいのである。

もちろん、これも設定できるフォントなのだが、monospaceを設定している人は少なく、 指定するのが和文フォントではないという意味でも要求される知識が厳しい 。

こうした事情から、コードを掲載するようなウェブサイトにおいてはコーディングフォントを明示したほうが良いという状況にある。 これを踏まえて、Chienomiでも全体のフォントは指定なしに対して、コード部分は

code {
  font-family: 'Operator Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
}

という指定になっている。

もっとも、Chienomiの読者はリテラシー高い人が多いので、ひょっとしたらこのような指定は無粋なのかもしれない、という気持ちもある。

縦書き

縦書きでは「縦書きグリフを持っているフォント」で出してもらわないといけないので、明示しないとえらいことになる。

縦書きサイトでアクセシビリティと両立するには、ブラウザに搭載されているリーダーモードとの親和性を高めるのがほとんど唯一の道。

冒頭のCSSの検証

MSN Japan

font-family: "segoe ui",meiryo,"yu gothic","hiragino kaku gothic pron",sans-serif;

欧文はWindowsに搭載されており、MicrosoftロゴでもあるSegoeのUI版のみを希望する形。 日本語はメイリオ, 游ゴシック(Windows向け)を要求し、その上でヒラギノ角ゴシックを要求。システムに搭載されているものから「良いモノ」を選択するもので、希望するものがなければユーザーに委ねる。

Windowsの場合はユーザーの任意性を剥奪するが、設定できない初心者にも美しい表示を提供しつつ、当該フォントがないときは余計なことは言わずにサンセリフを適用するバランスの良い設定。

Wikipedia

font-family: sans-serif;

ユーザーを尊重している。

Qiita

font-family: -apple-system,Segoe UI,Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif;

ややゆるやかにシステムデフォルトフォントを指定する形。 システムデフォルトフォントの中で「可読性が高いもの」を選択しており、選択的なのは確か。それ以外のシステムに対してはユーザーに委ねる。

Paiza

font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Osaka, "メイリオ", Meiryo, sans-serif;

Qiitaと似ているが、指定がMacに偏っている。 Windowsだけで考えれば可読性の高いメイリオが優先されることでユーザーの任意性を剥奪しつつ表示を改善しているが、Macに関してはOsakaの指定が入っていることで台無しになっている。Macに対しては「Macのフォント」を無闇に(無意味に)指定している印象。

毎日コミュニケーションズ

font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;

完全にMac寄りで、Windowsに対してはメイリオだけの指定。 Lucida GrandeはMacのUIフォントだが、それを指定するのは好みによるだろう。 ヒラギノはMacに搭載されている可能性のある高品位な商用フォントであり、「ヒラギノは良いフォントだ」という考えであれば不思議はなく、メイリオの指定については前述の通り。

技術評論社

font-family: gihyojp,sans-serif;

範囲も明示したカスタムフォントファミリーの指定を行う非常にこだわりの強い指定。 ただ、私が試した限りでは、このようにローカルフォントを選択するCSSは、(理論上正しいが)正しく動作しない。

日本Microsoft

font-family: 'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif;

SegoeはMicrosoftのイメージフォントだからその優先は納得で、その後ＭＳ Ｐゴシックを避けるような指定がなされている。

Microsoft的にＭＳ Ｐゴシックが美しくないから避けたいと思うのなら、WindowsのデフォルトフォントにＭＳ Ｐゴシックを強制するのをやめてほしい。

Helvetica NeueはMacに標準搭載されているフォントであり、これ以降は日本語フォントの後に指定されている欧文フォントだが、これ以前が「Windowsのフォント」であることを考えるとMacに対する指定が続いている形で、和文フォントには関知せず、欧文フォントはイメージに沿ったものを使用してもらおうということだろう。

毎日新聞

font-family: -apple-system,BlinkMacSystemFont,YuGothic,"游ゴシック","Yu Gothic","メイリオ",sans-serif;

Appleシステムフォントの指定は疑問だが、これがMacにおいてのみ適用されることを考えると、「Appleの表示はデフォルトで美しい」という考えだろうか。 それ以降はMacには適用されないためWindows向けになる。だから、Mac向けであるところのYuGothicの指定は無意味である可能性が高いが、いずれにせよ游ゴシックがあるなら游ゴシックを使いたいということだろう。そしてメイリオということで、ＭＳ Ｐゴシックを外すような指定。

設定しないモダンシステムの人向けに書いてある感じである。

ニコニコ動画

font-family: Avenir,Lato,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,Meiryo,メイリオ,

AvenirはiOS/Macに搭載されている欧文フォント。Latoはヒューマニストサンセリフ。Google Fontsにもあるので、ひょっとしたらウェブフォントになっているかもしれない。 この2つを指定するのに、なぜSegoeは指定しないのか、という激しい片手落ち感を感じてしまう… そしてネオグロテスクであるところのHelvetica Neueが続いてしまうのはちょっと台無し感がある。

日本語は「Macはできればヒラギノ、Windowsはメイリオで」というシンプルな希望を伝えてくる。

カナロコ, Yahoo! Japan

カナロコがこれ

font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,sans-serif;

Yahoo!はこれ

font-family: "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3",Hiragino Kaku Gothic Pro,"\30E1\30A4\30EA\30AA",Meiryo,Osaka,"\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF",MS PGothic,sans-serif;

恐らくminifiedの結果としてASCII化されている。デコードすると

font-family: "ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック",MS PGothic,sans-serif;

游ゴシックを避けたいということであればわからなくもないが、「日本語システムデフォルトフォントを指定しているだけ」という形で必然性が全くなく、悪い指定であるか、センスのない指定である。

ポイントはＭＳ ＰゴシックとOsakaを指定していること。これらはそれ以前の「モダンなデザインでスペースの広い可読性の高いフォント」とは真逆の、「レトロなデザインで高密度で一覧性の高いフォント」であり、その両方を指定しているからだ。

読売新聞

font-family: Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,ＭＳ ゴシック,Helvetica Neue,Helvetica,Arial,sans-serif;

ヒラギノはともかくとして、メイリオはWindows Vistaから採用されているもので、Windowsではそれ以前のWindowsか、もしくは非日本語のWindowsに限られる。

そして、次にＭＳ Ｐゴシックを強制する。「それ以前のWindows」に対しては高品質なフォントがあったとしても、そのユーザーから選択権を単純に剥奪する。

そして、Helvetica NeueはMac向けの指定であり、ヒラギノがなければ適用される。 Helvetica NeueがMacに搭載されたのは比較的最近なので、古いMacではその次のHelveticaが適用される。また、非日本語のWindowsも同様である。 だが、そうなるとArialを指定しているのは全くの無意味である。

そして、この指定の中でHelvetica系のデザインを要求する指定にそれ以前のセクションがなっておらず、欧文フォントの指定が指定しているだけで、デザイン的な要素もレイアウト的な要素もまるでない。

Chienomi

全体は指定なし。いくつかのパートはserifを指定し、タイトルロゴとコード部分は具体的指定。

当初のものはこちらで解説している。

Mimir Yokohama

見出しなどは丸ゴシックの指定、そして本文は明朝体の指定になっている。コードも細かく指定されている。

その意図と詳細はこちらを参照。

Mimir Yokohamaを訪れる人は特性的にコンピュータに苦手意識の強い、リテラシーの低い人が多いので、任意性を奪ってしまうことになるが、こちらで好ましい表示を指定するという方法になっている。 また、UDフォントを優先し、なるべくアクセシビリティを保つようにしている。

指定の中にスキップやタイポスがないのは、font family nameがわからないため。

全く指定していないウェブサイト

インプレス, 秀和システム, 朝日新聞デジタルは本文に対する一切のフォント指定が存在しなかった。