いまさら聞けないあれこれ 「Webフォント」

DTPで使われているフォント、ウェブサイトでも表示出来るって知ってました?
ソフト使って画像にして、ぺたぺた貼ったり…ではなく、見せたいように、それぞれ、あれこれ、自由自在に使えます。

今回は、Webフォントについて解説します。

Webフォントとは

いきなりでdisっててなんですが「Webフォント」という字面だけ見ると、具体さに欠けてる気はします、それも相当なレベルで。Webもフォントもいろいろありますし、大雑把すぎますよね実際。

で、Webフォントとは、ウェブサイト側で用意したウェブサイト表示用のフォントです。

これも大雑把すぎって感じですが、説明するとややこしい話しになるので、これぐらいが良いハズです多分。

普通はPC側のフォントを使ってるんですよね、MSゴシックとかメイリオ、ヒラギノゴシックとか。これは単純に、回線やら処理速度の都合から見る側に任せてたという話です。

ところが最近の回線速度やハードウェアの向上に合わせてウェブ関係の仕様もリッチでモリモリ全部乗せになっており、これまでユーザ側で肩代わりしてきたフォント周りも、デザイン優先でフォントデータを送りつけてしまえーい、とまぁ、そういう流れでのWebフォントということです。

これまでDTPフォントをウェブサイトで使用するためには、なんやかんやで画像化してウェブサイトに配置配置。しかし画像だから検索にひっかけたりテキストをコピペには向いておらず、テキスト打ち変えの手間もけっこうなものでした。

Webフォントにしてしまえば、いろいろな面倒さからは開放される、って感じでございます。

フォントの指定自体は昔から有りまして

「このあたりのテキストはMS明朝かヒラギノ明朝使ってね、ここはMSゴシックで!」、そんな感じの指定です。ただ、そのフォント指定もユーザ都合優先、というか、無ければしょうがないという、かなり緩いの指定です。

ユーザがどういうフォントをインストールしているか分かりませんし、そもそも「フォントってインストールするものなの!?」って人が大半というか人類の9割5分とかそういうレベルなので、おまじないレベルではあります。

それにWindowsやOSXの違いだけでなく、今はiOSやAndroidなどのスマホも考えなきゃいけないわけで、そうなると中途半端なおまじないのほうが地雷になる可能性が。

そしてフォントを変えたいというのは「ここ超強調したい!」とか、そういうニーズなわけですが、OSにはブッ太いフォントなんて付いてきません。年賀状ソフトとか入れてればそういうこともありますけどネ。

そういうわけで、素地としてはすでに用意されてましたが、インフラやら規格やらが追いついて追い越して、デザイン都合で無理を通せる時代になってようやく、というのがWebフォントの話です。

ちなみに、ウェブサイトでの指定方法にはほとんど違いは無く、適切なフォントを用意しておけば数行追加で小綺麗なDTPフォントが利用可能になります。

フォントはどこからやってくるの?

フォントのデータ容量もピンキリです。欧文フォントと常用漢字を含む日本語フォントでは相当違いますしネ。

ウェブサイトにフォントデータを置いてウェブサーバが読み出す方式から始まりましたが、今ではフォントメーカーやウェブサービスのWebフォント提供サービスから呼び出す方式に移っています。クラウドってやつですね。
日本語はデータ容量が多いため、必要な文字のフォントデータだけ送る技術が有用であったりして、単にサーバに置いて…というわけにはいかなかった経緯があります。

使い方の大雑把な流れとして

  1. 提供サービスでWebフォントを利用したいウェブサイトを登録
  2. ウェブサイトに、提供サービスを呼び出すおまじないを追加
  3. ウェブサイトでフォント指定を、ちまちまか、ざっくりと
  4. 提供サービスの契約にあるアクセス数を越えない限りはWebフォントが表示!

こんな感じでしょうか。どのフォントを使えるかは、Webフォント提供サービスに寄ります。

処理の都合上、フォント表示に若干のタイムラグが発生することもありますが、ウェブサーバのほうでゴニョゴニョしたりする必要があるかもしれません。

DTPが云々言うてるんですから、このへんを使いますわな

DTPフォントのメーカー各社が、DTPフォントをWebフォントとして使えるサービスを提供しています。

以前はWebフォントとDTPフォントのライセンスが別でしたが、最近では年間ライセンスにWebフォント使用も含まれており、わりと気軽に利用出来る環境と言えるでしょう。また、フォント数やPVを限定した無料お試し登録なんてのもありますので、とりあえず使ってみるのも良いのでは。

モリサワ:TypeSquare

フォントワークス:FONT PLUS

アマナイメージ Webフォント
※フォントメーカーではなく販売代理店ですが、有名デザイナーのデザインフォントなど大手メーカーのパッケージに無いフォントが多数あります

三共グラフィックの取り組み

ウェブサイト構築と合わせてのWebフォント利用、またWebフォント利用について、お気軽にお問い合わせ下さい。

 

カテゴリー: 今さら聞けない用語, 用語解説