エディトリアル / マガジンフォントスタック

エディトリアル / マガジンフォントスタック

マガジンやエディトリアルのWebサイトには、タイポグラフィの洗練さが必要です。このスタックは、インパクトのある見出し用のディスプレイセリフフォントと、高い可読性を持つ本文セリフを組み合わせます。

見出しスタック

.heading {
  font-family: "Playfair Display", Didot,
    "Bodoni MT", "Noto Serif Display",
    "URW Palladio L", P052, Sylfaen, Georgia, serif;
}

本文スタック

.body {
  font-family: "Source Serif 4", "Libre Baskerville",
    "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, "Times New Roman", serif;
}

コントラストとリズム

エディトリアルタイポグラフィは、見出しと本文テキスト間のタイポグラフィックコントラストに依存します。見出しスタックはハイコントラストのディドンフォント（太い/細いストロークの変化）を使用し、本文スタックは持続的な読書の快適さのためにより均一なストローク幅のオールドスタイルセリフを使用します。

マガジンレイアウト用CSS

.heading {
  font-family: "Playfair Display", Didot, Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.7;
  max-width: 65ch;
}

.drop-cap::first-letter {
  font-family: "Playfair Display", Didot, Georgia, serif;
  font-size: 3.5em;
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
}