黄金比などでフォントのサイズを計算できるツール「Modular Scale」と制作者TIm Brownのプレゼンテーション

こんにちは、taku-workです。
海外サイトではwebフォント、タイポグラフィーへの意識が高いものが多い気がしますね。もっと見習わないとなー。

ということで、今回は黄金比などでフォントのサイズを計算できるツール「Modular Scale」と制作者TIm Brownのプレゼンテーションのおはなし。
ウェブサイトでのタイポグラフィーの参考になればと。

まずはTypekitのマネージャーでもあるTim Brownによるプレゼンテーションを見てみましょう。

この中でタイポグラフィーの考え方としてModular Scaleというものについて話しています。
昔からよく使われてきた考え方で美しいタイポグラフィーを作る際に利用されてきたとのこと。
基本となるフォントサイズをもとに黄金比（1:1.618）などでフォントサイズを用意してみようという考え方です。

基本フォントサイズを16pxとして、黄金比でのModular Scaleでならべると以下のようになります。

• 41.887
• 25.888
• 16
• 9.889
• 6.112

同じように14pxのModular Scaleもつかって2つのスケールをあわせることでフレキシブルなスケールを作ることも言っています。
フレキシブルなスケールはWebなどで本文と見出しなどを考えるとよさそうですね。

これらのModular Scaleを簡単に計算できるツールとして「Modular Scale」というページを作成してみたようです。

Modular Scale
http://modularscale.com/

その他にも気にとめておきたいこととして

• Viewport limitation
• Reset styles

をあげたり、一緒によく使う概念として

• Grid systems
• Baseline rhythm
• Responsive design
• Image crops/size

についても言っています。
これらも考えなくてはいけないことですね。
もちろんwebならではの概念としてビューはユーザーに決定権があることなども重要かと思います。

ということで、
なんでもかんでも黄金比にすれば美しくなるわけではないとは思うのですが、自分が美しいと思う比率を探して自分のデザインにあうModular Scaleを考えてみるというのはよいかもしれませんね。
日本の書体は縦横1:1の枠の中に設計されています。畳はおよそ1:2です。なにか関係があるのかな、なんて具合にいろいろ考えるのも面白いですね。