ぜひシェアをお願いします!

Noto Sans Japaneseが綺麗でとっても読みやすい!

pc

ブログのフォントは読み手に好印象を与えるための大事な要素の一つです。読みにくければ本末転倒ですし、表示が綺麗であれば気持ちがいいでしょう。個人的には細くて綺麗なフォントが大好きです。

今回は、調べている中で出会った Noto Sans Japanese について紹介したいと思います。

スポンサーリンク

フォントの種類

フォントには様々なものがあります。使っているデバイスによってインストールされているものも異なっています。

フォントは何も設定していなければ、デフォルトのものが使用されます。しかし、デザインに凝っている人なら、フォントの見た目さえも統一したいと考えるはずです。

因みに、このブログでは Noto Sans Japanese, ヒラギノ角ゴシック ProN, メイリオという優先順位を設定しています。そのため、読者のデバイスにインストールされているフォントの中で優先順位の高いフォントを使うようになっています。

有料フォント・無料フォント

フォントには有料のものと無料のものがあります。フォントを買うほど余裕はないので、今回は無料のものを使いますが、それだけでも様々なフォントがあるので困ることはありません。

紹介する Noto Sans Japanese も無料で使えるフォントです。

フォントは必要に応じて有料のものと無料のものを使い分けるといいでしょう。

人気のフォント

色々見ていると、先ほど挙げた ヒラギノ角ゴ ProN や メイリオ は結構人気があるようです。

ビジネスマンの中では MS Pゴシック が一番人気という記事をかつて読んだことがありましたが、見慣れていて親しみやすいフォントに人気が集まるのかも知れません。

フォントを利用するときの注意点

フォントは特に著作権に厳しいので、利用時に著作権の帰属を表示しないといけない等確認して使う必要があります。

これは有料・無料に限らないので、導入するときは注意しましょう。

私はヒラギノ角ゴシック体に憧れた。

先ほど、読者のデバイスにインストールされているフォントの中で、といいました。しかし、ブログ側でフォントを読み込んでおけば、インストールされていないフォントを表示することもできます。

つまり、自分の好きなフォントで表示することができるのです。

そこで一番最初に考えたのが、ヒラギノ角ゴシック体でした。

Apple製品のみ表示できる

Macintosh を使っていると、そのフォントの綺麗さに圧倒されます。

しかし、ヒラギノ角ゴシック体は Windows には提供されていません。また、フォントを Apple 製品から抜き出して使用することも、当然ながら規約で禁止されています。

似ているフォントは?

そこで類似するフォントはないか探していると、Osaka フォントを見つけました!

サーバにアップロードして CSS を書いて読み込み…なぜか導入できず。

やり方が間違っていたのかよくわかりませんが、もう少し簡単に導入できるものがないかと更に探し、ようやく見つけました。

Google Noto Sansを利用する

自分でサーバに上げる必要なく、好きなフォントを簡単に導入する方法として用意されているのが Google Noto Sans というサービスです。

Noto Sans Japanese という選択肢

Osaka フォントが思うように使えなかったので、別のフォントを探していると、読みやすいフォントとして紹介されている Noto Sans Japanese に出会いました。

これは Google と Adobe が共同で開発したフォント!Adobe 側では 源ノ角ゴシック と呼んでいます。しかも、フォントの太さも複数対応しているという素晴らしさ!

実は、このフォントとは 2 度目の出会いです。

前のブログに導入しようとしましたが、導入後「ある問題」に直面し、断念したフォントでした。

それは後で述べるとして、とりあえず導入してみましょう。

導入方法

CSSに以下のコードを記述します。

HTMLでも書くことができます。

次に、ブログ全体にこのフォントを使いたかったので、次のように CSS に記述を追加しました。

これで Noto Sans Japanese を優先的に表示させることができます。

太さも設定できますが、個人的に細いフォントが好みなので、その記述も加えます。

指定方法は複数ありますが、数字では 100, 200, 300, …, 900 で設定するので、3番目に細いフォントを選びました。

フォントを導入する上での問題

確かにデバイスにインストールされていないフォントを使って表示することはできるのですが、そこには大きな問題があります。

読み込み速度の遅さです。

日本語フォントは種類が多いので、読み込みに時間がかかってしまいます。デザインを採るか、読み込み速度を採るか。

最後に

綺麗なフォントではありますが、若干重いというのが玉に瑕。

デバイスにインストールされている場合のみ表示する、ということで妥協しました…

スポンサーリンク

ぜひシェアをお願いします!

mktia は、Amazon.co.jp を宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazon アソシエイト・プログラムの参加者です。