dtn.jpの各サイトでバラバラとなっていたフォントを統一してみることにしました。

日本語のフォントといえばWindows 標準の「MS P ゴシック」や「メイリオ」レベルしか気にしたことがありませんでしたので、これまでサイトのフォントも無頓着でやっておりましたが、本業でサイト制作のデザインミーテイングに顔を出した際、フォントのことですったもんだやっているのを聞いてフォントも非常に奥が深いということがよく分かってきたので、改めてサイトのフォントも整えてみることにしてみました。

新しく設定したフォント

色々と試してみて最終的に設定をしたのがこの欧文webフォント(IBM Plex Sans)と標準フォント(游ゴシック)の組み合わせです。

font-family: 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: 500;

標準フォント「游ゴシック」

この「游ゴシック」はWindows 8.1頃からWindowsの標準フォントになっていたようです。Windows10マシンのコンパネをみたら、この游ゴシックだけでなく游明朝というものもしっかり入っておりました。

游ゴシックは書体デザインを専門に手がける「字游工房」さんが制作したフォントが元になっているようで、かなりスッキリしたプロっぽい印象があります。

游ゴシックはすらっとした大人っぽい雰囲気です

メイリオとの違い

下の画像はWindowsでおなじみのメイリオですが、游ゴシックと見比べてみるとだいぶカジュアルな印象を受けるフォントだということが分かります。

メイリオは横に幅広いゆったりした印象

メイリオは欧文との混在に適するようにマイクロソフトが開発した日本語フォントだったようですが、改めて字游工房さんが作ったプロ向けのフォントと見比べると、字体の美しさというよりは見やすさ重視のフォントといった印象があります。

MacとWindowsの両方で標準フォント

游ゴシックの字体の完成度の高さもあってか、Windows 8.1 以降のWindowsやOS X以降のMacOSで標準フォントになっていたようですが、この游ゴシック体がMacとWindowsで標準フォントとなるまでは、両システムで共通の標準フォントというものが存在していなかったようです。

これまで全く気にしたこともありませんでしたが、ウェブデザイン職の方々には待望のフォントが登場という感じだったのかもしれません。

ちなみに、この字游工房さんは他にもヒラギノとか教科書用フォントも制作しており、さすがはプロが作ったフォントということで、どれもすごい読みやすい印象があります。更に、あの「モリサワ」のグループ会社にもなっているようです。自社フォントをここまで世に広げたというのも凄い話ですね。

font-weightに多少の違いがある

游ゴシック体の登場で、MacとWindowsで共通の標準フォントが登場したということはとても素晴らしい話と思いますが、使うにあたっては多少ポイントがあるようです。

Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」(「中」は、Windows10から搭載)。

そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。

https://www.cherrypieweb.com/903

フォントは同じでも太さが異なるので注意が必要ということのようです。

下記のようにfont-weightに指定を入れれば多少解決することは可能のようですが、これでも100%同じとはいかないので、こちらのブログでは何年もこの話題で検討を重ねているようです。フォントは本当に奥が深い世界ということがよく分かります。

この “font-weight: 500;” という指定が肝で、この数値を指定してやると、Macでは「ミディアム」、Windows10では「中(ミディアム)」が使用されます。

これで、Windowsでも読みやすく表示されます。

(追記)ただし、Windows8.1では「標準」が使用されるので改善されません。

https://www.cherrypieweb.com/903

iOSとAndroidでは非対応

MacOSとWindowsで標準フォントとなった游ゴシック体ですが、スマホOSまでには対応がされていないようです。このため、最終的に全デバイスで同じフォントにするとなると、webフォントのお世話になるしかないようで、先ほどの字游工房さんでは「游ゴシック体 Pr6N M」というwebフォントを使っているようでした。

body {
    font-family: 'YuGothicPr6NM';
    font-weight: 500;
}

もちろん、游ゴシック体は有料のフォントですので、利用するにあたってはお金が必要になります。

有料webフォント配信サービス

先程の「游ゴシック体 Pr6N M」フォントはこちらの月額有料サービスを使って配信されているようですので、お金に余裕があるのであればこのような方法もアリのようです。とはいえ、WordPressのテンプレートすら買えない私のような人間は、OS標準フォントのみで対応するしかありません。

Webフォント配信サービスのREALTYPE

無料のwebフォントサービス

無料で使える日本語webフォントのサービスもあり、最もメジャーなものがgoogleが提供するフォントサービスのgoogle fontsのでした。今現在で日本語フォントは12フォントが無料で提供されています。

google fontsでも日本語webフォントが提供されています

欧文webフォント

せっかくここまでフォントについて調べてきたので、標準フォントの游ゴシックだけでなく、webフォントも少し試してみることにしました。

日本語フォントは文字数も多いので表示速度にも影響しそうでしたので、欧文フォントで気に入ったものを探してみたところ、この「IBM Plex Sans」と名が付いたフォントが良さそうだと思いまして欧文にこちらを設定してみました。数字のシンプルさがなかなか良い感じです。

IBM Plex sansフォント

このフォントを調べてみると、どうやらIBMが相当気合いを入れて作ったフォントだったようで、こんなフォント紹介ページまで用意がしてありました。これまでフォントのライセンスに毎年100万ドルかかっていたので自社開発したようですが、金額を考えるとこの完成度もなるほど納得です。

「IBMのブランド精神と歴史を捉え、印刷物・ウェブ・モバイルインターフェースでも読みやすく、国際的に通用する書体」を目指して、IBM Plexを開発した

https://gigazine.net/news/20180330-ibm-plex-corporate-font/

欧文フォントにこの「IBM Plex sans」を適用させてから、日本語フォントの「游ゴシック」を適用させたかったので、このような優先順でフォント指定をしてありました。

font-family: 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: 500;

おわりに

まだ運営サイトを全て修正ができていませんが、このフォント指定を設定したサイトを見ると、中身のプログラムなどは何も変わっていないものの、なにやら洗練された印象になりました。たった数行CSSをいじっただけでこうできるとは、もっと早くに考えておけばよかったです。

もちろん、表示が強い方が見やすいので「MS P ゴシック」や「メイリオ」の方がいいという方もいらっしゃるとは思いますが、dtn.jpでは当面このフォント指定でやってみようと思います。

PHPが学べるおすすめプログラミングスクール

この運営ブログをみて、もしdtn.jp管理人のようにサイトをゼロから作ってみたいという思いに駆られた方は、サイト開発やプログラミングをオンラインで受講できるプログラミングスクールの活用をしてみてはいかがでしょうか。サーバ/WordPress/HTML/CSS/JS/PHP/SQLなどの基本さえ分かれば、ゼロからサイト立ち上げもポンポンできるようになって、今なら仕事や転職にも役立つのでオススメです。

PHPも学べるオンラインスクール

  • CodeCampAWS Cloud9を使ったクラウド上のIDEが用意されているので、ネットにつながればスタート開始可能というゴージャスなスクールです。講師も選べて、Webマスターコースならプログラミング経験0でも一気にフロントエンドからバックエンドまでマスターできます。
  • ウェブカツJava言語やRuby言語なんぞ教えん!という、初心者にありがちな挫折ポイントがよく分かってるスクールです。フロントエンドエンジニアに必要なスキルセット&PHPがマスターできます。
  • フリークス HTML/CSSから始まり、MySQLやLinuxからPHPの変数や分岐やループ、クラスやPDOに最後はMVCまで教えてくれるので、そこまで分かればなんでもできそうです。メンターに質問もし放題がいいですね。
  • テックアカデミー法人のIT研修もやってる業界最大手・受講者数No.1のスクールです。メンターとの定期オンライン面談やチャットサポートなどもあり、大手ならではインフラ環境がウリです。PHPと合わせてjQueryもマスターできる、PHP/Laravelとフロントエンドコースがおすすめです。

オンラインスクールのデメリット

孤独になりがちなサイト制作も、優しいメンターがそばにいてくれれば凄い楽しそうですが、もちろんデメリットもあります。お金がかかるという点です。ひたすらググって、本を読んでよりは確実にコストがかかってしまいます。とはいえ、多少の余裕があるなら、こんなご時世なので時間と労力を買った方が良いと思います。