Typographyモジュール

Tyopographyモジュールはリンク、行間、テキスト周りのスタイルなど文字通りタイポグラフィを中心としたモジュールです。

Vertical Rhythm

まずフォントサイズと行間の数値を変数宣言。
これにより読みやすい文章を形成することをVertical Rhythmという。


変数名は固定でピクセル入力。
$base-font-sizeにフォントサイズ。
$base-line-heightに行間のサイズ。

establish-baseline

基本となるフォントサイズと行間を出力。
sass

$base-font-size: 12px;
$base-line-height: 18px;

@include establish-baseline;

css(コンパイル後)

* html {
  font-size: 75%;
}

html {
  font-size: 12px;
  line-height: 1.5em;
}

adjust-font-size-to

adjust-font-size-to(フォントサイズ、行間、基準サイズ)
見出しサイズの設定。
第1引数以外は省略可能。
sass

$base-font-size: 12px;
$base-line-height: 18px;

h1{
	@include adjust-font-size-to(48px);
	}
h2{
	@include adjust-font-size-to(36px,2);
	}

css(コンパイル後)

h1 {
  font-size: 4em;
  line-height: 1.125em;
}

h2 {
  font-size: 3em;
  line-height: 1em;
}

adjust-font-size-to

adjust-font-size-to(フォントサイズ、行間、基準サイズ)
見出しサイズの設定。
第1引数以外は省略可能。
sass

$base-font-size: 12px;
$base-line-height: 18px;
h1{
	@include adjust-font-size-to(36px);
	}

h2{
	@include adjust-font-size-to(24px,2);
	}

css(コンパイル後)

h1 {
  font-size: 3em;
  line-height: 1.5em;
}

h2 {
  font-size: 2em;
  line-height: 1.5em;
}

leader,trailer,rhythm

leaderは段落のmargin-topを
trailerは段落のmargin-bottomを設定。
marginの代わりにpaddingにする場合は頭に"padding-"をつける。


また、段落の上下のスペースを同時に設定するには
ryhtmを使用します。
ryhtm($reader,$padding-leader,$padding-trailer,$trailer);
sass

$base-font-size: 12px;
$base-line-height: 18px;
h1{
	@include adjust-font-size-to(36px);
	@include leader(2); //margin-top
	@include padding-leader(2);//padding-top
	}

h2{
	@include adjust-font-size-to(24px,2);
	@include trailer(2); //margin-bottom
	@include padding-trailer(2);//padding-bottom
	}
h3{
	@include rhythm(1,2,1,2);
	}

css(コンパイル後)

h1 {
  font-size: 3em;
  line-height: 1.5em;
}

h2 {
  font-size: 2em;
  line-height: 1.5em;
}
h3 {
  margin-top: 1.5em;
  padding-top: 3em;
  padding-bottom: 1.5em;
  margin-bottom: 3em;
}