ゴシック体
Webデザインではディスプレイでの可読性からゴシック体の方が多く使用される傾向にある。
ヒラギノ角ゴシック
macOSおよびiOSに標準搭載されているフォント。カッチリとした安心感のある読みやすい書体である。
Windowsでの使用の場合はダウンロード製品を購入するか、もしくはモリサワのフォントライセンスを購入することで使用可能。
游ゴシック
WindowsおよびmacOSに標準搭載されているフォント。ヒラギノ角ゴと比べると少し字面が小さく、ゆったりとして上品な印象。
デバイスフォントとしてはヒラギノ角ゴ・游ゴシックの2種類が主流である。
macOSであれば、ヒラギノ角ゴ・游ゴシックの2種類、Windowsであれば游ゴシックが標準搭載されているため、デザインとコーディングどちらにも使われることが多い。
PC側に標準搭載されている書体を利用すれば、Webフォントを使用する場合に比べてページの読み込みが早いというのもポイント。
Noto Sans
日本語のWebフォントでは定番中の定番。少し丸みのある優しい字形で、可読性も優れている。
Noto Sans CJK JP、Noto Sans JPはどちらも無料でGoogle Fontsページからダウンロードできる。
Noto Sans CJK JP
Noto Sans CJK JPの「CJK」頭文字はそれぞれ
・C(Chinese=中国語)
・J(Japanese=日本語）
・K(Korean=韓国語)
「CJK JP」では、その中でJapaneseを優先的に表示する。
多言語対応による翻訳などが必要なサイトであれば、メリットはこちらの方が大きい。
Noto Sans JP
「Noto Sans CJK JP」からJapaneseのみのフォントが入っているのがNoto Sans JPである。
容量はCJKよりも少なくなっているため、多言語対応が不要であればこちらで十分。
筑紫ゴシック
とても美しく、ゴシック体にある直線的な印象になりすぎない、どこか上品で温かみが感じられるフォント。
有料フォントのため、購入するかLETSやMORISAWA PASSPORTといった年間定額サービス導入が必要。
Adobe Fontsでは丸ゴシック体の「筑紫A丸ゴシック」「筑紫B丸ゴシック」の提供がされており、こちらであればWebフォントの導入の敷居も低い。
明朝体
縦線にくらべて横線が細いのが特徴のフォント。
目が疲れにくく、小説などの長文に適していると言われている。
Webデザインでは、高級、和風、真面目などの印象を与えるフォントとして採用することがある。
ヒラギノ明朝
macOSおよびiOSに標準搭載されているフォント。
Windowsでの使用の場合はダウンロード製品を購入するか、もしくはモリサワのフォントライセンスを購入することで使用可能である。
游明朝体
WindowsおよびmacOSに標準搭載されているフォント。ゴシック体の「ヒラギノ角ゴシック」「游ゴシック」の明朝版である。
こちらもゴシック体の時と同様標準搭載されている書体となる。
速度重視の場合などは明朝体の場合もこちらの2点から選ぶのがおススメ。
Noto Serif
Noto Sansシリーズにも明朝バージョンのフォントが用意されている。
ゴシック体のほうと同じく、日本語のみの容量少なめなフォントが良ければJP、多言語対応の翻訳などがある場合はCJK JPを利用する。
Noto（no more tofu）の名の通り対応漢字の種類やウェイト（文字の太さ）が多い。
※文字化けしてしまったりうまく表示されない文字が四角く表示されることから、豆腐[tofu]と呼ばれている。
筑紫明朝
品の良い形でインクで書いたようななめらかさが特徴。読みやすいのに美しい。
有料フォントのため、購入するかLETSやMORISAWA PASSPORTといった年間定額サービス導入が必要である。
さわらび明朝
明朝体ではあるものの、程よい太さがあるので安定感があり、読みやすい。Google Fontsサービスで使用可能。
欧文Googleフォント
Roboto
Googleのデザイナーが開発したフォント。AndroidやChrome OSのシステムフォントに採用されており、Webデザインとも相性が良い。
豊富な6種類のウェイトが用意されており、italicのパターンもウェイトごとに用意されている。
Quicksand
コロコロと丸みがあり可愛らしい・親しみやすい印象のフォント。
Montserrat
平体のようなどっしり感や安定感が感じられるフォント。
見出しなどの要素で使いやすい。
Oswald
長体のような細長いフォント。
すっきりとまとまり感があり、スタイリッシュな印象になる。
DINという人気の有料フォントに似ていることもあり、代わりに採用されることも多い。
フリーフォントをWebフォントとして使用する際の注意点
フリーフォントは利用規約でウェブでの埋め込みの使用が不可能な場合もあるのでチェックが必要である。
ウェブフォントとして利用することは、フォントを「ウェブサーバーに丸ごとアップする」必要がある。アップしたデータはダウンロードが可能なため、「フォントの再配布」となってしまう。
また、軽量化のためにフォントをサブセット化する場合、「データの改変」になってしまう場合もある。
フリーフォントをウェブフォントとして使用したい場合は、ライセンスや利用規約をよく確認したうえで使用する。
ライセンスや利用規約で再配布や改変が不可、ウェブフォントとしての埋め込みが許可されていなければ、画像データとして作成するのがよい。
フリーフォント配布サイトではウェブフォントでの使用について記載されていることがほとんどなので、事前に確認しておくこと。
問題なければサブセット化などで軽量化して使用してみる。
