web typography

私が印刷とウェブのデザインの比較について興味を持ち始めたのは、まだ私が学生だった頃なので、もう 10年近くも前になります。当時、Josef Muler Blockmannの『Grid System』をもとに、ウェブデザインへのグリッドシステムの応用を考えていました。その頃から「メディアによる再現性の違いを理解し、一つの理論をそれぞれに展開する」という考えをベースに、実用的なツールをつくりたいと思っていました。

グラフィックデザインには、グリッド・システムというデザイン手法が存在します。グリッドシステムとは、書籍デザインにおいて、全ページを同じグリッド上で展開することで、ページ全体に統一性を持たせ、レイアウト上の判断を効率的に行うツールとして、全世界のデザイナーに使われています。

最小単位である文字サイズをベースに、各々のデザイン要素を決定し、それに沿って、グリッドを制作していきます。このように、文字を基本単位として作成するグリッドのことをタイポグラフィック・グリッドと呼びます。タイポグラフィック・グリッドは、ウェブサイトにかなり適しているのではないかと思っています。文字サイズをベースとしているので、他の要素を文字をベースとした単位である　「em」で指定しておけば、文字を拡大縮小しても、レイアウトが崩れる事がない。また、あらゆるスクリーンサイズでもレイアウトが担保される。等、非常に相性が良いように感じています。

このWeb Typographyは、ウェブデザインのグリッド作成時の補助ツールとして、制作しました。

ブラウザ上で、文字サイズ、行送り等のの見え方を確認しながら、文字のパラメーターを決めていきます。選択した各パラメーターに沿ったグリッドを表示します。

現段階では、実用的なものにはほど遠いですが、今後、アップデートしていきたいと思っています。

＜使用方法＞

1.各パラメーターを設定します。

・font：書体

・size：文字サイズ

・line height：行高

（印刷の場合「行送り」ですが、ウェブの場合は「line-height」で設定します。「行送り」は、前の文字のベースラインから次の文字のベースラインまでの距離を指しますが、「line-hight」は、行の高さを指します。文字は「line-height」の中央に置かれます。)

・color：文字色

・weight：ウェイト

・letter space：文字間

・text align：（右寄せ／左寄せ／ジャスティファイ）

・1ユニットの文字数：●文字を横方向への1ユニットとし、グリッドを作成します。

・ユニット数：1ユニットの文字数×ユニット数がテキストの幅となります。

・bgcolor：背景色

2.「MAKE DATA」で各パラメーターのデータを出力します。

3.「GRIDを表示する」：グリッドを表示します。

「GRIDを非表示する」：グリッドを非表示にします。