Mimir Yokohamaのウェブサイトのフォントについて

ポリシー

Mimir Yokohamaではウェブ上のフォントについて次のようなポリシーを持っています。

  • 利用者に隠れた負担の大きいwebフォントを使用しない
  • 必要もなく利用者の意図・設定を上書きしてしまうシステムデフォルトの指定をしない
  • 意図に添っていて、見やすいフォントをユーザーが持っている場合、それを使用するように指定する
  • 意図に添ってみやすい選択・調整を行う

この指定は2020年1月のデザインリニューアル時に大きく変更されました。

本文フォント

基本的なコンセプトとして「見出しはゴシック、本文は明朝」という、書籍や新聞で一般的なデザインを採用しています。

また、本文は英語の長文を読み慣れていない日本人の完成として、Serif体よりもSans Serif体(特にヒューマニストサンセリフ)が読みやすいということを踏まえて、各プラットフォームでよく利用される欧文ヒューマニストサンセリフを採用しています。

Windows/Macのユーザーの方はまずBIZ+UD明朝を、そして游明朝を指定しています。 それ以上深い指定はしておらず、游明朝が採用される以前のシステムをご利用の方はなんらかの明朝体が採用されるように指定しています。

ただし、それだけではLinuxなどFontConfig環境において、「serif要求に対して欧文は別の欧文書体を指定する」というスタイルを採用している方の場合、明朝体が採用されなくなってしまいますので、さらにUnix系プラットフォームで一般的な明朝体を追加で指定しています。

見出し / UI

以前は「丸ゴシックを使用したい」という意向で指定していましたが、現在は単純にゴシック体の指定になっています。

コード部分

説明

プログラミングを行う場合、文字が識別しやすい単一幅の特別なフォント(コーディング向きのモノスペースフォント)を利用します。

モノスペースフォントそのものはWindowsにもインストールされていますが、コーディングに適したフォントが含まれていませんでした。

Windowsのコーディング用フォントとしてはCourierおよびCourier Newが広く使われていたようです。 現在はConsolasがコーディング向けの欧文フォントとして導入されています。

しかしWindowsには日本語用のコーディング向き等幅フォント(デュアルスペースフォント)が含まれておらず、monospaceを指定すると “MS ゴシック” が使用されます。 このフォントはデュアルスペースフォントではありますが、コーディング向きではないため、プログラムを読むのには適していません。

Macにはコーディング向きのフォントとして “Menlo” と “Monaco” が導入されています。 また、 “Monaco” を含む日本語デュアルスペースフォントとして “Osaka-等幅” も導入されています。

このことから、Mimir Yokohamaのコード部分のフォントの優先度は

  1. Operator Mono (人気の商用コーディングフォント)
  2. Menlo
  3. Sanfrancisco Mono
  4. Osaka-等幅
  5. Monaco
  6. Consolas
  7. monospace (汎用の指定)

となっています。

実際の指定は次の通り:

pre,code { 
    font-size: 100%;
    font-family: 
        "Operator Mono", "Menlo", "SF Mono", "Osaka-等幅", "Monaco", "Consolas", monospace;
        font-feature-settings: "liga" 0, "clig" 0;
        font-variant-ligatures: no-common-legatures;
}

初学者の学習を妨げないよう、リガチャ(合字)は無効にしています。

もしあなたがプログラミングの勉強をしたいなら

プログラミング系の記事をしっかり読んで勉強したい、と思っているのであれば、コーディングに向いたフォントをまず導入すべきです。

特にこれはWindowsのユーザーにとって重要なことです。

あなたがもしMacのユーザーで、特にこだわりがないのであれば “Osaka-等幅” が日本語デュアルスペースフォントになっています。 あるいは日本語とのバランスを無視して “SF Mono”, “Menlo” や “Monaco” を指定しても構いません。

Windowsユーザーの場合は、日本語を無視して “Consolas” を指定するのが唯一の方法です。 あるいは好みによって “Courier New” や “Courier” を指定しても構いません。

いずれにしても日本語環境で monospace とした場合に使用される “MS ゴシック” などを適用されてしまうことを避けるようにMimir YokohamaのCSSは書かれているため、その点を心配する必要はありません。少なくともそれなりには表示されるはずです。

しかしWindowsユーザーであっても「Consolasに満足しない」という選択肢はあるはずです。

人気の高いコーディングフォントは次のようなものがあります。

  • Input Mono
  • Fira Code / Fira Mono
  • Inconsolata
  • Roboto Mono
  • Ubuntu Mono

もし日本語も統一感のあるデュアルスペースフォントが欲しい場合は、次のようなフォントを探すと良いでしょう。

  • Source Han Code JP
  • Ricty
  • Migu
  • VLゴシック
  • Cica