글자 계층

이 글은 예전에 따로 적어두었던 글자 계층 메모를 옮기면서 다시 정리한 버전입니다.. 원문이 짧은 편이라, 나중에 다시 볼 때 덜 끊기게 핵심 흐름만 조금 붙여뒀습니다.

:root {
  font-size: 16px; /* 1rem 기준 */
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
}

h4 {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
}

h5 {
  font-size: clamp(1.125rem, 2vw, 1.75rem);
}

h6 {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

p, li, span {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.6;
}

small, .caption {
  font-size: clamp(0.8125rem, 1vw, 1rem);
  color: #666;
}