The Wheels

Typography

見出し・本文・強調・リスト・長文幅（40ch）・focus

見出しと本文

本文は Inter と Noto Sans JP のスタックを使います。行の長さはおおよそ 40 文字以内になるよう、max-width: 40ch で抑えています。 この段落が折り返す位置を確認してください。

強調（strong）はハイライト色、 注釈（em）はキャプション色で小さく表示されます。 インラインリンクの見た目も合わせて確認できます。

リスト

  • 箇条書きも本文と同じタイポ規約です
  • max-width と行間が揃っているかを見ます
  • 日本語と Latin が混在しても破綻しないこと
  1. 番号付きリストの一行目
  2. 二行目も同じスタイル

Focus

Tab キーでフォーカス環（outline）を確認してください。

フォーカス可能なリンク

補助クラス

.heading-1

.heading-2

サンプルコード

HTML

<h1>見出し 1</h1>
<h2>見出し 2</h2>
<p>
  本文は <code>max-width: 40ch</code> で抑えます。
  <strong>強調</strong>と <em>注釈</em>、<a href="#focus">リンク</a>も確認できます。
</p>
<ul>
  <li>箇条書き</li>
  <li>日本語と Latin</li>
</ul>
<p class="heading-1">.heading-1</p>
<p class="heading-2">.heading-2</p>

CSS

@import "@b4moss/the-wheels/style";