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

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-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    Meiryo, 'Noto Sans JP', sans-serif;
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
  rel="stylesheet"
/>

body {
  font-size: 1rem; /* 通常は16px相当 */
}
 
h1 {
  font-size: 2rem; /* 32px相当 */
}
 
h2 {
  font-size: 1.5rem; /* 24px相当 */
}
 
small {
  font-size: 0.875rem; /* 14px相当 */
}

.button {
  font-size: 1rem;
  padding: 0.6em 1em; /* 文字サイズに応じて余白も変わる */
}
 
.button-large {
  font-size: 1.125rem;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
}
 
h2 {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  line-height: 1.3;
}

.text {
  font-weight: 400; /* normal */
}
 
.lead {
  font-weight: 500; /* 少し強調 */
}
 
.heading {
  font-weight: 700; /* bold */
}

p {
  line-height: 1.7;
}
 
h1 {
  line-height: 1.2;
}

body {
  font-size: 1rem;
  line-height: 1.7;
}
 
.small-note {
  font-size: 0.875rem;
  /* line-heightは0.875remに対して1.7倍で計算される */
}

.article {
  max-width: 42rem;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.8;
}

h1 {
  letter-spacing: 0.02em;
}
 
.tag {
  letter-spacing: 0.08em;
}

/* よくない例：本文全体に広い文字間隔を入れる */
p {
  letter-spacing: 0.08em;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.center {
  text-align: center;
}
 
.right {
  text-align: right;
}
 
.left {
  text-align: left;
}

/* 短い見出しならOK */
.hero-title {
  text-align: center;
}
 
/* 長文は左揃え */
.article-body {
  text-align: left;
}

a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
 
a:hover {
  text-decoration-thickness: 2px;
}

.label {
  text-transform: uppercase;
}

/* 通常の折り返し */
.normal {
  white-space: normal;
}
 
/* 改行を許可しない */
.nowrap {
  white-space: nowrap;
}
 
/* HTML上の改行・連続空白をそのまま表示 */
.pre {
  white-space: pre;
}
 
/* 改行はそのまま表示しつつ、幅で折り返す */
.pre-wrap {
  white-space: pre-wrap;
}

.user-comment {
  white-space: pre-wrap;
}

.content {
  overflow-wrap: break-word;
}

.message {
  overflow-wrap: anywhere;
}

.normal {
  word-break: normal;
}
 
.keep-all {
  word-break: keep-all;
}
 
.break-all {
  word-break: break-all;
}

.jp-text {
  line-break: strict;
}

.article-body {
  line-height: 1.8;
  overflow-wrap: break-word;
  word-break: normal;
}

.url-text {
  overflow-wrap: anywhere;
  word-break: normal;
}

.nav-link,
.button {
  white-space: nowrap;
}

.comment-body {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
 
.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<!-- よくない例：見た目のためだけにbrを入れる -->
<p>
  CSSで文字を整えると<br />
  読みやすいページになります
</p>

<!-- よい例：文として自然に書く -->
<p>CSSで文字を整えると、読みやすいページになります。</p>

.profile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.break-after::after {
  content: '\A';
  white-space: pre;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    Meiryo, 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #1f2937;
}
 
.article {
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
 
.article h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
  font-weight: 700;
}
 
.article h2 {
  margin-top: 2.5em;
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
}
 
.article p {
  margin-block: 1em;
  overflow-wrap: break-word;
}
 
.article a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.card {
  font-size: 0.9375rem;
  line-height: 1.6;
}
 
.card-title {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
}
 
.card-meta {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #6b7280;
}