• 最終更新日:

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, sans-serif;


 

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


%bold{
    font-family: '游ゴシック体', YuGothic, 'Yu Gothic', sans-serif;
    font-weight: bold;
}
.box{
   @extend %bold;
}


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

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

理由は以下の記事を参照してください。
font-familyに游明朝を使用してはいけない理由

 

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

アンドロイド端末は『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: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',  'Noto Sans JP', sans-serif;


使うフォントが決まったら、次はフォントをきれいに表示させる設定をしていきます。

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

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


html{
    //フォントサイズの正確に
    -webkit-text-size-adjust: 100%;
    //文字をシャープに
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


 

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

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

それぞれの見え方については以下の記事がわかりやすいかったです。
font-feature-settings の文字詰めを考察する

 

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

私はカッコのみ詰めるほうがバランスが良いと思うので、まずは選んでいるフォントに合わせて以下を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;
}
@media all and (-ms-high-contrast:none){
      .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』でフォントを統一するのも1つの手です。

以上の点を参考にして、サイトのイメージにあったフォントを選んでみてください。