今回ご紹介するすべてのCSSフォント設定まとめ

先に今回ご紹介するフォント設定をまとめたCSSコードをご紹介します。

@font-face {
	font-family: "YuGothic-M";
	font-weight: normal;
	 src: local("YuGothic-Medium"),
		  local("Yu Gothic Medium"),
		  local("YuGothic-Regular");
}

@font-face {
	font-family: "YuGothic-M";
	font-weight: bold;
	 src: local("YoGothic-Bold"),
		  local("Yu Gothic");
}

html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
	font-size: 1.6rem;/* 16px */
	font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}

このCSSコードを記述しておくことにより、レスポンシブデザインに対応したフォント設定が完了します。モバイルに対応させたいサイトは設定しておいた方が良いでしょう。

このコードについては、以下で個別に説明していきます。

WinとMac、フォントを統一できるfont-family

@font-face {
	font-family: "YuGothic-M";
	font-weight: normal;
	 src: local("YuGothic-Medium"),
		  local("Yu Gothic Medium"),
		  local("YuGothic-Regular");
}

@font-face {
	font-family: "YuGothic-M";
	font-weight: bold;
	 src: local("YoGothic-Bold"),
		  local("Yu Gothic");
}

body {
	font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

font-familyは、いつでも話題として出てくるもので、いつの時代でも論議されてきております。なので、ここで紹介するものは現段階での最適なfont-familyの指定となり、好みも若干反映されておりますが、ぜひ参考にしてみてください。

今回のfont-familyの指定は、日本語を游ゴシックにしてWindowsでもMacでも同じスタイルのフォント設定にする方法です。

また、綺麗な英数字フォントのSan Francisco（OS X 10.11以降）にするため、-apple-system, blinkMacSystemFontを指定してます。これらを記述しておくことで、San Franciscoというフォントのウェイトを最適化して表示してくれます。

また、@font-faceで独自のfont-familyを作成しております。これはWindowsの游ゴシックの細文字対策です。游ゴシックを指定するとWindowsではかすれた文字で表示されるため、可読性の悪い状態の設定になってしまうのです。

それを回避するため、游ゴシックのmidium指定の独自フォントを用意して、指定してます。
詳細は、以下のスライドをご覧ください。とても分かりやすく説明されております。

マルチデバイスに対応するfont-size設定はremで指定

html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
	font-size: 1.6rem;/* 16px */
}

フォントサイズは、レスポンシブデザインを採用しているのであれば、ぜひremを指定しましょう。フォントサイズの単位としては、px、em、%などもありますが、マルチデバイスに対応させるために、これからはremで設定しておいた方が利便性が高くなります。

これまでpxで指定していたという方は多いかと思いますが、レスポンシブデザインの場合だとブレイクポイントごとにフォントサイズの指定が必要になってきます。

しかし、remを使用することにより、デバイス毎のデフォルトフォントサイズを基準にして指定できるので、ブレイクポイントごとのフォントサイズ指定は不要になります。

また、上記のCSSコードでは、デフォルト（html）のフォントサイズ（16px）を62.5%と指定することにより、16px x 0.625 = 10px となり、ベースのフォントサイズを1rem(=10px)としてます。

これを設定しておくことで、親要素の影響はなく、htmlで指定したベースのフォントサイズがすべての要素の基準として考えることができます。つまり、すべてのフォントサイズは1rem=10pxにて指定することができるのです。これはpxの指定方法と同じスタイルなので、取り入れやすいですね。

ちなみに、この1rem(=10px)の基準は、margin padding width heightなどにも反映されますので、幅や余白などすべての単位をremにて指定することができます。

WebKitのバグ回避

body {
	-webkit-text-size-adjust: 100%;
}

WebKitのバグ回避のためのCSSコード。スマホの高解像度画面などで表示の際に、テキストを拡大表示できない仕様になっているので、それを拡大できるように設定しておく必要があります。

ちなみに、-webkit-text-size-adjust: none;に設定すると拡大表示ができないので、確実に100%に設定するとのこと。

CSSでテキストの文字詰めができる自動カーニング

body {
	font-feature-settings: "palt";
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}

この記事を執筆中に良いコードを見つけましたので、合わせてご紹介します。

テキストの文字詰めを自動でおこなってくれて、テキストの見た目を引き締めてくれるコードです。上記CSSコードを記述しておくだけで自動でカーニングをしてくれます。

ただ、すべてのフォントでカーニングできるというわけではなく、

• OpenTypeフォント
• プロポーショナルメトリクス情報が含まれていること

この2点が必要とのこと。

『ヒラギノ角ゴシック』『ヒラギノ明朝』『游ゴシック』『游明朝体』など、デフォルトフォントは対応しているようです。

Safariで少々バグがあるので、Safariのみ仮名文字をカーニングする指定にしておりますが、このバグが無くなれば1行で指定できてしまう簡単な仕様。簡単ではあるが、デザインへの影響はとても大きいのです。

この詳細については、以下の記事をご覧ください。

番外編:Googleフォントを活用しよう

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

h1, h2, h3, h4 {
	font-family: 'Open Sans', sans-serif;
}

これは完全に好みやデザインテイストに合わせる部分なので、ベースのフォント設定には組み込めないかもしれませんが、今年のフォント設定の話題には入れておきたいのでご紹介。

Googleフォントも遅延が少なく、日本語フォントにも対応したため、利用しやすくなりました。可読性も良く、すべてのデバイスでフォントを統一させて表示できるメリットは、とても大きいです。

積極的に利用していって良いフォントではないでしょうか。
手軽に導入できるのもポイントですね。

以下の記事にて実際の表示や設定方法についてご紹介してますので、ぜひ参考にしてみてください。

現段階で最適なフォント設定

今回ご紹介したフォント設定は、游ゴシックをベースとした現段階で最適な設定です。

@font-face {
	font-family: "YuGothic-M";
	font-weight: normal;
	 src: local("YuGothic-Medium"),
		  local("Yu Gothic Medium"),
		  local("YuGothic-Regular");
}

@font-face {
	font-family: "YuGothic-M";
	font-weight: bold;
	 src: local("YoGothic-Bold"),
		  local("Yu Gothic");
}

html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
	font-size: 1.6rem;/* 16px */
	font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}

ですが、いずれ新しいデバイスやOSの登場で、再度変更が伴うことでしょう。その都度、最適化を図らないといけないのがフォント設定なのですが、以前と比べればWinとMacでフォントを統一できたり、テキストのカーニングができたり。フォント設定しやすい環境が整ってきております。

今後の動向も伺いつつ、フォント最適化は続けていきたいと思います。
まぁ、当分はこの設定で大丈夫でしょ…。