Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

サイズの決定

文字サイズ -> 行間 -> 幅や高さ、余白

こんな順序で決めていったらいいんじゃないかと思ってる。

文字サイズはサイトの基本的なレイアウトを作成後、一行に入る文字数を考えながら決定する。 このブログでは一行に全角文字が 40字入るようになってる。

行間は主な文章が和文になるか英文になるかをまず考え、あとはコンテンツを見た印象として凝縮された感じを出したいときは狭めに取るし、抜け感を出したいときはちょっと広めに取る。 このブログでは和文が多いのと全体的に少し抜け感を出したいと思ったので、サイト全体を line-height: 1.65 、見出しは少し狭めに line-height: 1.25 、英文を使う場合が多い pre 内では line-height: 1.3 にしてる。

幅や高さは文字サイズをベースに決める。アイコンを作るとき、文字サイズが 18px のときはアイコンサイズも 18px にする事が多い。アイコンを大きめ、小さめにするときは文字サイズのX倍にしてる。
余白は行間をベースに決める。また、面の内側(ボタンや入力エリアなどの padding )の余白は行間を見ながらどのサイズを使うか決めることが多い。

余白のサイズはいくつか決めておいても忘れることが多いので、できるだけドキュメントに残してる。
はじめにこのように決めておいても、例外にあたるものは途中で必ず出てくる。そういったものも書き残すようにしてる。

// Size & Space
// line-height: 1.65 を基準にしたサイズ。
// 小数部第三位以下は四捨五入する。

- xx-large ... 6.6em
- x-large ... 3.3em
- large ... 2.48(2.475)em
- midium ... 1.65em
- small ... 0.83(0.825)em
- x-small ... 0.41(0.4125)em
- xx-small ... 0.21(0.20625)em

// 例外
...

このブログではこんな風に各サイズを決定して、それが中々良かったからこうやって書き出してみた。今はボーダーの幅をどう決定したら良いかわからずに悩んでる。