webサイトを作るときに個性を出す一つの要素としてフォントがありますよね。

こもりみは本文フォントに「Noto Sans CJK JP」を使っているのですが、今回は「Noto Sans」の日本語フォントについてメモ書き。
※追記 2019/11/14:サイトのフォントを一新しました。現在はDemiLightを使用していません。

「Noto Sans」の太さ気をつけなはれや問題

おおざっぱに言うと「Noto Sans」は2つあり、

Google Fontsで読み込み・DLできる「Noto Sans JP」、中国語や韓国語などアジア圏の文字でも難なく表示できるNotoフォント「Noto CJK シリーズ」があります。

こもりみでは後者の「Noto Sans CJK JP」フォントを使用しています。

Google Fontsから使用できる「Noto Sans JP」も大変便利ではありますが、なんとこちらは「DemiLight」という太さが無いんですよね。

RegularかDemiLightか

通常他のwebフォントであればレギュラー・ボールド・ライトにみたいな太さが用意されているんですが、「Noto Sans CJK JP」は太さのラインナップが非常に多く、問題のDemiLightはRegularより若干細いんです。

このDemiLightが太すぎず細すぎずで結構重宝しているのですが、上記の通り「Noto Sans JP」ではDemiLightは使えません。

「Noto Sans JP」はLPだったり簡単なページ作成のときにサクっとフォントを指定して使用できるので便利なんですが、普段どおりDemiLightが使えるつもりで「Noto Sans JP」を使用していることがあって危険です…

ミスを未然に防ぐには？

では実際に表示したいフォントが表示されなくなるのを防ぐにはどうしたら良いのでしょう？

• DemiLightを使わない
• 使用フォントはcssで切り分けられるようにする

DemiLightを使わない

これは一番効果的な方法だと思いますが、DemiLightとRegularの比較画像で見たときに違いってぶっちゃけあまりわかりませんでしたよね？

特に短い文章ではその違いは目立たなくなります。逆に長い文章や、フォントサイズが大きいとパット見ても違いがわかります。

なのでこの方法はサイトを選びますが、そんなに文字の太さにこだわりがなければ普段からDemiLightを使用しないようにすればいいでしょう。

それに、場合によってはRegularの太さのほうが可読性が上がってユーザビリティが改善されるかもしれません。

使用フォントはcssで切り分けられるようにする

「Noto Sans JP」を使用する場合多くはフォントの太さでRegularやBoldと切り替わるようになっていると思います。

そこで、cssでclassに応じてフォントが変化するようにすれば視覚的にミスを見つけやすくなります。

[sourcecode language=”css”]
<style>
@import url(‘https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap’);
</style>

.sansBlack {
font-family: ‘Noto Sans Japanese’, sans-serif;
font-weight: 900;
}
.sansRegular {
font-family: ‘Noto Sans Japanese’, sans-serif;
font-weight: 400;
}
[/sourcecode]

といった調子でfont-weightごとにclass分けし、HTML側でフォントを制御する方法です。

実際にこの方法で行うとHTMLソースが長くなったり汚くなってあまりよろしくないですが、視覚的に何がどのフォントなのか確認できるので、DemiLightを使っていた場合は発見しやすくなることでしょう。

まとめ

• めんどくさがらず「Noto Sans CJK JP」を読み込もう
• よくわかんないときはRegularをつかっておこう

すべてのミスやエラーは人の怠けグセが原因です。

毎回コードを書くのは大変ですが、自分のサイト構築方法や必要なフォントがわかってくるまでは一つ一つ確認しながらNoto Sansを設定することが大事ですね。

そのうちサブセット化やらサイズ軽減に血眼になる日が来ると思うので、その日が来てからでも遅くはない…（遠い目）

というわけで、みなさん「Notoシリーズ」DemiLightを使用するときは用法・容量を守って使用していきましょう！！