Webフォント

フォント例

ホームページで情報発信するにおいては、文章の構成や表現力が重要であることは当然ですが、それに加えて「見た目」も重要な要素の一つではないでしょうか?

文章の見た目を左右する要素の一つに「フォント」があります。このフォントを変えるだけでもイメージががらっと変わります。

実はホームページで情報発信する際に、ホームページ制作サイド側で、ユーザー側に表示する文章のフォントを指定することが可能であります。

例えばワードやエクセルなどで文章作成する際に、「MSゴシック体」や「MS明朝体」等の様々なフォントを選ぶことができますが、ホームページにおいても、制作者側で、ユーザーが使用するブラウザに表示させるフォントをあらかじめ指定しておくことが可能です。

ワードやエクセルなどのアプリケーションにおいては、アプリケーション開発元であるマイクロソフトにてデザインしたフォントがあらかじめアプリケーションに内蔵されているわけですが、ホームページにおいては、ユーザー側のブラウザに様々なフォントデータが用意されているわけです。

そして、ウェブ制作者側でフォント指定しておけばユーザー側のブラウザがその指定に沿ったフォントで表示してくれるわけです。

しかし、一般的にブラウザであらかじめ用意されているフォント(ブラウザで表示可能なフォント)は、日常よく使われる一般的なフォントが大半です。例えばsans-serif(いわゆる明朝体)やserif(いわゆるゴシック体)等の一般フォントと呼ばれるフォント類です。

そして、ホームページ制作者側でフォント指定しても、ブラウザ側に制作者が指定したフォントが内蔵されていないと、制作者側の意図したとおりには表示されないという問題がありました。

それを解消するべく、現在ではWebフォントという仕組みが存在します。

マーケティング

特殊な、デザイン性のあるフォントを制作し、有償、無償でWebフォントとして配布しているフォントデザイナーが世界中に存在しており、そのWebフォントを制作者側で指定しておけば、ユーザーがブラウザでホームページを読み込むと同時に、ネットワーク上にあるフォントデータをダウンロードすることができるため、どのユーザーに対しても制作者側が意図したフォントで表示することが可能となります。

そしてWebフォントには一般フォントにはない独創的なフォントがたくさん存在します。丸みを帯びたアニメ調やフォーマルかつバランスの取れたフォント等、様々です。

いくつか例を挙げてみます。

※フォント:M PLUS 1pの場合、

彼らの機器や装置はすべて生命体だ。

※フォント:M PLUS Rounded 1cの場合、

彼らの機器や装置はすべて生命体だ。

※フォント:Noto Sans JPの場合、

彼らの機器や装置はすべて生命体だ。

※フォント:Noto Serif JPの場合、

彼らの機器や装置はすべて生命体だ。

※フォント:Sawarabi Gothicの場合、

彼らの機器や装置はすべて生命体だ。

※フォント:Sawarabi Minchoの場合、

彼らの機器や装置はすべて生命体だ。

この例として挙げたフォント類は、フリーのWebフォントでありまして、「グーグルウェブフォント」というグーグルが提供するサービスサイトにアクセスすることで使用可能となります。

他にもWebフォントを配布しているサイトとしては、「Adobe Fonts(有料フォント)」等他にも多数あります。

アドビフォントの場合、フォトショップ等のライセンスを取得すると無料で使用可能なようですので、アドビ製品をお持ちの方は一度調べてみてはいかがでしょうか。