Webページで使うフォントサイズを決める時の拠り所、として。
いや別に、素人が顔を出す領分ではないのは、わかってます。
んが。いっつも、すっきりしなかったので。
Web サイトと言うものを読み取ろうと眺める時、何時も考えてしまうことがあります。
皆、フォントの大きさとかって、何を根拠に、どーやって決めてんの? とな。
気になるたびに色々と参照させては頂いてはみるものの、どうしてもその意思決定の過程というか、お作法なりについて、ビシッと来るものがなく、悶々としていた。
「でまぁ、結局はセンスなんだけどね」、って仰られるのは勿論受け入れますが。。。あぁ、ねぇ。
だめ。それ困る。
素人でも、いや素人だからこそ、素人なりに、拠り所 が欲しい、と彷徨っていた中。
目にしたのが、こんなお話。;
» 黄金律を使ってデザイン性の高いウェブサイトを作る方法 - GIGAZINE
Golden Ratio / eridesignご覧のとおり、当該エントリーの日付は 2014/05 とずーっと前の話(笑でして。
しかもここでとったメモは、以前、つかずーっと前になってしまいましたが、はてなブログのテンプレートを弄った時の事だったり。。
いずれにせよ結構興味深く、関連情報含め、目を通させて頂き、整理していたらすっかり忘れそうだったので、その時のメモをここに展開しておこうかと。
と言うことで、今回も今回とて情弱ばさらします。
web ページレイアウト検討の拠り所として、Φ
Φ、ファイ。
ご存知、黄金比。
この "黄金律を使って..." と、言うタイトルだけで、「あぁさもありなん」と思ったのを思い出す。自分にとっては、それくらい敷居が低かった。
勿論、ここではフォントサイズと言う視点から捉えてますが、それだけでなく、レイアウト各要素に適用できるものだと感じてます。
黄金比が何、と言う話は、ここでするようなものでもないでしょうし、
黄金比と言うものを web サイトに適用する考え方については、先の gigazine のエントリーを見るで充分でしょうし、そのエントリーで貼られているリソースに目を通すで良いと思います。
個人的には、Modular Scaleでリンク貼られたリファレンスの一つ、Tim Brown 氏のエントリ "More Meaningful Typography · An A List Apart Article" の内容が、具体的、実践的で分かり易かったです。
気になった方は、当該エントリーにある実際のサンプルを見ながら、ざっとTim さんのこのエントリーに目を通してみる事、お勧めします。
Modular Scale
で、メインのお話がこれです。Modular Scale。
使い方は、実にシンプルでして、説明するまでもない程ではあるのですが。;
- [Ideal text size]、上のテキストボックスに基準となるサイズを指定。
- ドロップダウンリストから [1:1.618 - golden section] を選択。
- ボタンを押下。*1
結果が別のページ上に展開されるので、その値を使う、と。
px を見たければ、[Pixels] の値を、em だったら [Ems] なり [Ems@16] *2 の値を使う。
で、気になるのがもう一方のテキストボックス [Important number]。
この値は、どうやって決めるのが筋なのか?
[Important number] の決め方?
[Important Number] の決め方は、黄金比の話とは特に関係なく、さらには [Ideal text size] の値とも特に関係がなくても良いものみたいです。
そして、この 2 つの値を設けたのは、サイズとして選択できる値のバリエーションがあった方が良いだろうしね、な感じみたいなことも言ってますし、こんなことも。;
I also decided to include a second, “important” number, because I wanted the flexibility of a double-stranded modular scale.
自由度を上げたい、と言う感じだそうです。
要は、[Important number] の決め方は、作業者任意の "良い" とか "使いたい" と思ったサイズを設定して良いと。
実際 Tim さんは、これに 190 px を充てるのですが、その過程を見てみますと "ヘッドラインとして適度なインパクトのあるものにしたい" と言った意図で、色々試した結果、決めてるようです。
この混在する感じ、個人的には、ちょっと気持ち悪いですが(笑
Tim さんのやり方
一応メモ。;
- 基本として使うフォントのスタイルを決める。
- 色々試しながら、基本となるサイズ [Ideal text size] を決める。
- 値のバリエーションとして、[Important number] を充てる要素と、サイズを決める。
→ Tim さんのケースでは、h2 で使う 190 px とし、これはページ内最も大きなフォントサイズのパーツとなっています。見た感じはページタイトル。Tim さんは "headline" と言ってます。 - Modular Scale を実行し、値を取得。
- 値を元に、レイアウトを詰めていく。
とこんな形でしょうか。
で一応、最後の方で何度か述べてらっしゃるのですが、[Modular scales] はあくまで、ヒントを与えるもので、その値に固執することは、ありませんよ、と。
ま、そうでしょうね。
曰く、scale が出した各値の小数点を切り捨てたりしてもいいだろうし、
各値どうしを、足したり、引いたりして使っても良い、と。
勿論、[Modular scales] がはじき出した値とは全く関係ないサイズを、一緒に使うのもアリだと。
Modular scales are a tool, they’re not magic. They’re not going to work for every measurement, and that’s okay. Math is no substitute for an experienced designer’s eye, but it can provide both hints and constraints for decision making. Consider the scale’s numbers educated suggestions.
このエントリーを読んで、Modular Scale というツールを使ったとしても、色々チマチマ試しながら検討する手続きが結構出てきていて、「あぁやっぱりそういうことは必要なんだ」と思い知らされました。
ほで、結局は最後は、経験やセンスってことね、って。。。
そうして今回も結局ー周して、再び同じ地点に戻ってきたのでした、とさ。orz
フォントサイズ決定の根拠に "黄金比" 使うと気分的に楽かも、と言う話でした、おしまい。
*1:たぶん [送信] になっていると思います。
*2:この "16" は、サイズ 16px の "16"。[Ems@16] は、16px の比率を出力していると思います。じゃこの 16px の意味と言うのは、"ブラウザが一般的にデフォルトとしての持っているサイズ" で、《ページ内でまだフォントサイズをセットしていなければ》勝手にサイズは、この 16 px なるというような値。らしいです。初めて知ったw
