WEBサイトをデザインする際、フォントはWEBサイトのイメージや見やすさを左右する重要な要素になります。

今回は、フォント選択の幅が広がるWEBフォントについて解説していきます。

 

WEBフォントとは？
あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、指定のフォントを表示させる技術です。
本来、WEBブラウザは各端末にインストールされているフォントで文字を表示するようになっているので、見るデバイスによって異なるフォントが表示されてしまう場合があります。
指定のWEBフォントを使用することで、どのデバイスで見てもデザイナーが意図したフォントでユーザーに表示することが可能になります。

WEBフォントを使用するメリット
1　どのデバイス・ユーザーが見ても同じデザインが見えるので、企業ブランディングに効果的
2 　文字を画像で表示せずに済み、SEO的にも強くなる
3 　文字の修正や更新が簡単にできる

 

代表的なWEBフォントサイト

和文フォントや欧文フォントなど様々なWEBフォントが制作されています。

 

Google Fonts
https://fonts.google.com

TypeSquare（モリサワ）
https://typesquare.com

Adobe Typekit
https://fonts.adobe.com

fonts.com
https://www.fonts.com/ja

 

Google Fontsについて

上記のサイトの中でもGoolgeが提供しているGoogle Fontsはすべて無料で利用でき、商用利用にも対応してるため導入しやすいです。
明朝体やゴシック体、手書き風フォントなど種類によって絞り込んで検索がしやすいのも魅力です。

またWEBフォントとして使用するだけでなく、ダウンロードしてイラレやフォトショップで使用することもできるのでカンプを作成する際にも便利です。

↑使いたいフォントを選択して、右上の矢印からダウンロード

 

WEBのフォントのサイズ

適切なサイズで使用することがユーザーが読みやすいサイト構築につながります。

●PC
本文 14〜16pt
可読性を重視する情報系サイトや年配の方がユーザーに想定されるサイトなどは大きめの16,15px
デザイン性が重視されるサイトでは小さめの14pxが使用されていることが多いです。

●スマホ
本文 15〜16pt
（イラレなどでカンプを作成する際はRetinaディスプレイ対応で作成するので2倍）
ちなみにスマホサイトではpcサイトに比べ、ディスプレイが小さい分、文字のジャンプ率を低くしてデザインすることで見やすくなります。

文字色について

WEBサイトの本文では一見「黒」を使っていることが多いですが、いわゆる墨100のような「真っ黒」はあまり使われていません。背景の白とのコントラストが強すぎて、目に負担がかかってしまうからです。
少しでも目に優しくするために、文字色をグレーにしたり、黒系でない色に変えたりして調整することで、ユーザーのことを考えたサイトにすることができます。

今回はWEBのフォントについて解説させていただきました。
プランニングAではWEBフォントを使用した、見やすく機能的なサイト作成を行っております。
WEBサイトの新規制作、リニューアルをご検討の方はぜひ当社へご相談ください。