写真とともにグラフィックデザインの重要な構成要素といえるタイポグラフィ、その多くはレタープレス（活版印刷）のころから普遍のものです。文字を機能性と美しさの両側面から並べていくというタイポグラフィの本質的な部分は、もちろんコンピューターの時代でも受け継がれています。

インターネット/ウェブデザインにおけるタイポグラフィは、おもにテクノロジーの制約上の理由で、制限を受けてきました。使用できるタイプフェイス（フォント/書体）の制限であったり、レイアウトを組む上での制限であったり。しかし近年、テクノロジーの進歩やデザイナー/プログラマー達の知恵により、そういった制限がかなり解消されてきています。

例えば、いくつかの異なる文字の大きさを混在させても行間を揃えるというベースグリッドの概念をウェブページ上でも可能にするフレームワーク。今回このサイトでは、『Blueprint』というフレームワークを採用していますが、完璧とはいえないまでもかなりの確度でベースラインを揃えることに成功しました。

各ページ右上に配置されてる『Show/Hide Grid』をクリックすると背景にあるグリッドが表示され、その成果を実感頂けると思います。このページ右側のコラムとページ下部にて紹介しているHタグ文字(見出しなどに使われる文字)は、ベースラインを揃えるための文字の大きさと行の高さ/行間の組み合わせのパターンの一例です。この文章そのものが、Pタグ（一般的な文章に使われる文字の大きさ）の例となります。

※ベースラインに関しては、もちろんこの設定に縛られるというわけではなく（場合によってはベースラインを崩してでも）臨機応変に対応していきますし、ベースラインを揃えることに対する考え方は人それぞれで、賛否両論あるということもここで触れておくべきかもしれません。

さて、これまでウェブタイポグラフィへの一番の制限ともいえる使用できるフォントの種類に関して。これはより多くのユーザーのパソコンにインストールされているフォントしか使えないということから生じていました。結果として、いわゆるウェブフォントと呼ばれる（おもにOSにプリインストールされてる）数種類のフォントのみを使用するのが通例ということになってました。

それらのフォントもどれも素晴らしいものですし、タイポグラフィの本質はそもそもタイプフェイスの数に頼るものでは無いという王道的な考え方もありますが、やはり場合によってはもっと色んな種類のフォントを試したいという欲望を持つ人は多かったと思います。

その欲望を適えてくれるべき台頭してきたのが、CSSの『@font-face』という方法です。相手側のパソコンにインストールされてなくても、ブラウザーに仮インストールしたような状況を作り出して、それらのフォントを表示させることができます。

ライセンスの問題で使えないフォントも多々ありますが、ライセンスを代行して仲介してくれるサービスもあったり、無料で誰でも使用できるフリーフォントの中にも素晴らしいものがたくさんあるので、今後はウェブタイポグラフィーの可能性が広がりそうです。

今回のこのサイトでも早速いくつかのフリーフォントを試しています。このページ下部には従来からのウェブフォントと@font-faceのフリーフォントのサンプルをピックアップしてご紹介してますので、ご参照頂ければと思います。

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

見出し語 1

見出し語 2

見出し語 3

見出し語 4

見出し語 5

見出し語 5

ウェブ上のタイポグラフィというものは、ページ上に表示されるものだけではなくその裏に存在するもの、コードの書き方やアクセシビリティも含めたものだといえるでしょう。そのことに関しては”Accessiblity & Semantic”のページを、またウェブに限定されたものではないタイポグラフィの本質的な部分に関しては、”Legibility & Readability”のページもご参照頂ければ幸いです。