テキスト・フォント・改行制御 — 読みやすさを設計する

body {
  font-family: 'Noto Sans JP', sans-serif;
}
 
/* システムフォントスタック（読み込み不要で高速） */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif;
}

body   { font-size: 16px; }   /* ベースサイズ */
h1     { font-size: 2rem; }    /* 32px相当 */
h2     { font-size: 1.5rem; }  /* 24px */
small  { font-size: 0.875rem; } /* 14px */

font-weight: 400; /* normal */
font-weight: 700; /* bold */
font-weight: 300; /* light（フォントが対応していれば） */

/* 本文：1.6〜1.8が読みやすい */
p { line-height: 1.7; }
 
/* 見出し：タイトルは詰める */
h1 { line-height: 1.2; }

/* 見出しを少し広げると読みやすくなることがある */
h1 { letter-spacing: 0.02em; }
 
/* ALL CAPS のとき広げると可読性が上がる */
.tag { letter-spacing: 0.1em; }

.center { text-align: center; }
.right  { text-align: right; }
.left   { text-align: left; }  /* デフォルト */

/* 改行を許可しない（1行に強制） */
.nowrap { white-space: nowrap; }
 
/* HTML上の改行・連続空白をそのまま表示（preタグ相当） */
.pre { white-space: pre; }
 
/* 改行はそのまま表示しつつ、幅で折り返す */
.pre-wrap { white-space: pre-wrap; }
 
/* 通常の折り返し（デフォルト） */
.normal { white-space: normal; }

/* 長い英単語やURLが枠をはみ出すのを防ぐ */
.break-word {
  overflow-wrap: break-word;
}
 
/* 日本語で使う：どこでも改行を許可 */
.break-all {
  word-break: break-all;
}
 
/* 日本語の自然な禁則処理を維持しつつ、長い単語だけ折り返す（推奨） */
.break-keep {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* URLやファイルパスが含まれるテキスト */
.url-text {
  overflow-wrap: break-word;
  word-break: break-all;
}
 
/* 日本語メインのコンテンツ（禁則処理を維持） */
.jp-text {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
 
/* 強制的に改行させない + はみ出し省略 */
.no-break {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flexboxで縦並びにする */
.vertical { display: flex; flex-direction: column; }
 
/* ::after で改行を挿入 */
.break-after::after {
  content: "\A";
  white-space: pre;
}

/* 1行で省略 */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 
/* 複数行で省略（-webkit- prefix が必要） */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}