Style Guide

このブログは、Dress Cordingのセカンドブログとして、読みやすさと書きやすさを目的にシンプルに仕上げました。

Ruby製のサイトジェネレータMiddlemanでつくった静的ファイルをgzip化し、Herokuにアップしています。 テンプレートはSlim、記事はMarkdownで書き、スタイルにはSassを使っています。

Middleman + Slim + Herokuでブログをつくりました

Brand Colors

  • $color-1
    #181717
  • $color-2
    #f9f9f6
  • $color-3
    #004393
  • $color-4
    #DBF1F9
  • $color-text: color-1;
  • $color-background: color-2;
  • $color-link-hover: color-3;
  • $color-selection: color-4;

Font

$font-family-display:
"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif:
"Crimson Text", Georgia, serif;
$font-family-monospace:
"courier new", Courier, Consolas, "Liberation Mono", monospace;

Typography

  • $base-font-size: 16;
  • $base-line-height: 28;
  • h1 {font-size: rs(32); margin: 0 0 rs(21,32) 0;}
  • h2 {font-size: rs(28); margin: rs(21,28) 0 0 0;}
  • h3 {font-size: rs(24); margin: rs(21,24) 0 0 0;}
  • h4 {font-size: rs(21); margin: rs(21,21) 0 0 0;}
  • p {font-size: rs(16); margin: rs(21,16) 0 0 0;}
  • ul, ol, dl {margin: rs($base-lh/2) 0 0 0;}

Development

Design Concept

レイアウトは1columnのFluid Layoutで、左右にマージンをたっぷりめにとりました。

Media Queriesでスマートフォンに対応していますが、breakpointは設けておらず、viewportだけを指定しています。

配色はテキストカラーに墨黒と黒のあいだの黒、背景カラーには限りなく白に近い白を選びました。アクセントとしてリンクカラーとセレクトカラーにブルーを系を使っています。カラーは柔軟に変更できるようにSassの変数で管理しています。

文字組にはVertical RhythmをSassで計算しているのですが、日本語なので文字がパツパツになってしまったり、タイトルなどfont-sizeが大きい文字が改行されるとline-heightの間隔が空きすぎてしまいうまくいかない。なのでVertical Rhythmを少し調整してみました。

元々Vertical RhythmはDTPの技術であり、それをWebのスタイルシートで表現しようと、様々な研究がなされてきました。

古くはデフォルトスタイルのresetに始まり、px? em? rem?、:last-childなど例外のmarginなどについて言及されていてとても興味深く、最近では計算ツールやJSライブラリCompassでも提供されています。しかしそれでも昨今のスマートフォンなど様々なデバイスで美しい文字を表現するのは難しい。文字組はフォント選びはもちろん、グリッドレイアウトと切っても切り離せない関係にあるので、このあたりについては深く学びたいと思っています。