夢みるゴリラ
夢みるゴリラ
  • 最終更新日：

WEBサイト制作に使えるフォントの選び方と美しく見える設定方法

WEBサイト制作に使えるフォントの選び方と美しく見える設定方法

WEBサイトを制作する上で重要になってくるのがフォント選び。どの機種、どのブラウザでも同じフォントで見えることが望ましいですが、それがなかなか難しい。有料WEBフォントを使わない限り、同一のフォントでサイトを見てもらうことは不可能です。

そこで、できれば共通のフォントを使い、それができない場合は似ているフォントで代用する設定を考えてみました。

  • 基本はwindowsやMac、iphoneにある共通の標準フォントを使う
  • 共通の標準フォントがない場合、google fontから似ているフォントを使う
  • Androidは無視、もしくはgoogle fontから代用
この記事の目次

WEBサイト制作に使えるフォントの選び方

WindowsやMac、iphoneのiOSが標準で持っているフォントは『游ゴシック体』と『游明朝体』です。ベースとしてはどちらかを使うことになります。Androidについてはどちらのフォントも搭載されていないため、基本はデフォルトのフォントで対応します。

WEBサイトに游ゴシック体を使う場合

游ゴシック体をそのまま使うとwindowsで見たときだけ薄くかすれて表示されます。MacでもWindowsでもきれいに表示したいのであれば以下のように設定する必要があります。

Windowsでは『游ゴシック Medium』を使うことで文字ははっきり表示されます。

font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, "游ゴシック", "Yu Gothic", sans-serif;

ただし、Windowsで游ゴシックMediumと同時にfont-weight: bold;を使った場合、文字が潰れてしまいます。そこでboldを使うときは『游ゴシック』を使うようにします。Sassを使って以下のようにmixinを作っておけば面倒ではないでしょう。

$font-family-bold: Arial, '游ゴシック体', YuGothic, "游ゴシック", 'Yu Gothic', sans-serif;

@mixin font-bold {
  font-family: $font-family-bold;
  font-weight: 700;
}

.box{
   @include font-bold;
}

WEBサイトに游明朝体を使う場合

游明朝体の場合、游ゴシック体と違ってMediumがないのでそのまま以下のように指定します。ただし、font-weight: 500;を使わないようにしましょう。見え方にバラつきができてしまいます。使うweightはnormalかboldのみです。

理由は以下の記事を参照してください。

参考
font-familyに游明朝を使用してはいけない理由
Qiita

アンドロイド端末でも明朝体を表示させたいのであれば、google fontにある『Noto Serif JP』を使います。明朝体でクセも少なく、weightも200〜900まであります。weightを選択しすぎると読み込みが遅くなるので、２つくらいに絞って使いましょう。

アンドロイド端末は『Noto Serif JP』、それ以外は『游明朝体』で表示させる設定は以下です。游明朝体にこだわりがなければ、すべてNoto Serif JPでも良い気がします。

//Noto Serif JPの読み込み（weightはお好みで追加してください）
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');
font-family: "游明朝体", 'Yu Mincho', 'YuMincho', 'Noto Serif JP', serif;

WEBサイトにヒラギノ角ゴシックを使う場合

ヒラギノ角ゴシックは、Macやiphoneなどのiosにしか入っていないため、Windowsでは表示されません。そこでWindowsではヒラギノ角ゴシックに似てるフォントとして、google fontにある『Noto Sans JP』を使用します。もちろんAndroid端末も同じです。

//Noto Sans JPの読み込み（weightはお好みで追加してください）
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
font-family: Arial, "Helvetica Neue", 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;

WEBサイト制作でフォントを美しく見せる設定方法

フォントをできるだけシャープにする設定をbody、もしくはhtmlに書きます。また、端末によってはフォントサイズが一部効かなくなることがあるので、それを防ぐ設定も書きます。

html{
    /* フォントサイズの正確に */
    -webkit-text-size-adjust: 100%;
    /* 文字をシャープに */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* カーニングとリガチャ（合字）を調整 */
    text-rendering: optimizeLegibility;
}

次に、文字詰めの設定をします。CSSでも以下のように文字詰めできる設定はできますが、ちょうど良いものがありません。paltを良く使いますが、約物（。や「」など）が詰まりすぎてしまいます。

  • font-feature-settings: 'pwid';
  • font-feature-settings: 'palt';
  • font-feature-settings: 'pkna';

それぞれの見え方については以下の記事がわかりやすいかったです。

参考
font-feature-settings の文字詰めを考察する
スープアップデザインズ株式会社

そこでちょうど良い文字詰めをするために、YAKU HAN JPを読み込みます。YAKU HAN JPはデザイナーのQrac（クラク）さんが開発したもので、すべての約物を詰めるバージョンと、カッコだけ詰めるバージョンの２種類が用意されています。ゴシック体や明朝体、丸ゴシックにも対応しています。

私はカッコのみ詰めるほうがバランスが良いと思うので、まずは選んでいるフォントに合わせて以下をhtmlファイルに読み込みます。

<!-- ゴシック体・カッコのみ文字詰めなら以下 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp_s.min.css">

<!-- 明朝体・カッコのみ文字詰めなら以下 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp_s.min.css">

<!-- Noto Sans JP・カッコのみ文字詰めなら以下 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp_s-noto.min.css">

<!-- Noto Serif JP・カッコのみ文字詰めなら以下 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp_s-noto.min.css">

次にfont-familyに以下のように追加します。これでYAKU HAN JPが適用されます。

//ゴシック体なら以下
font-family: YakuHanJPs, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, sans-serif;

//明朝体なら以下
font-family: YakuHanMPs, 'Yu Mincho', 'YuMincho', serif;

//Noto Sans JPなら以下
font-family: YakuHanJPs_Noto, 'Noto Sans JP', sans-serif;

//Noto Serif JPなら以下
font-family: YakuHanMPs_Noto, 'Noto Serif JP', serif;

約物の設定ができたら、あとはletter-spacingで文字同士の距離を調節すればすべての設定は完了です。

IEで游ゴシック体と游明朝が上にズレる問題について

游ゴシック体と游明朝体はIEでみると上に2、3px上がって表示されます。普通のテキスト部分は気になりませんが、ボタンなどボックスに囲まれている箇所はあきらかに不自然に表示されます。対策としては、IEだけ位置をpaddingで調整するしかありません。

cssで調整するなら以下。

.button{
    padding: 4px 12px;
}

/*--IE11用--*/
_:-ms-lang(x)::-ms-backdrop,
.button {
  padding: 8px 12px 2px;
}

jQueryを使って調整する場合は以下。IEで表示されたときに対象箇所のpaddingを上書きします。

$(function(){
      var userAgent = window.navigator.userAgent.toLowerCase();
      if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
         $( '.button' ).css( 'padding' , '8px 12px 2px' );
      }
});

IEだけ個別に設定するのが面倒な方は、游ゴシックや游明朝を使わず、google fontの『Noto Sans JP』や『Noto Serif JP』でフォントを統一するのも１つの手です。ただしサイトは重くなるので注意しましょう。

安定したフォント設定はどれ？

ブラウザやディバイスの変化に対応できて、安定した表示を提供してくれる設定は以下になります。見え方が大きく異なる游ゴシック体は避けることが結論です。

body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

//太字を使うときは以下のように具体的な数字で設定する
h2{
  font-weight: 600;
}

とても詳しい説明をics.mediaさんで紹介されているの読んでおくことをおすすめします。

参考
2020年に最適なfont-familyの書き方
ics.media

こちらの記事も読まれています