이 편에서 만드는 파일

portfolio/
└── css/
    └── tokens.css        ~ --text-* 토큰을 clamp()로 재작성

개념 정리

지금까지 --text-lg, --text-3xl 같은 타이포 토큰은 고정 rem 값이었습니다. 그래서 미디어 쿼리 구간이 바뀌는 순간(768px, 1024px) 글자 크기가 한 번에 툭 뛰었습니다. clamp()는 이 계단을 없애고 폭에 비례해 연속적으로 바뀌게 합니다.

min() / max() / clamp() 문법

clamp()는 사실 max(최소, min(선호값, 최대))와 같습니다. 선호값 자리에 뷰포트 단위를 넣으면 “화면이 커질수록 선호값도 커지다가, 최대값에서 멈춘다”는 동작이 만들어집니다.

뷰포트 단위 조합 공식

선호값을 1rem + 2vw처럼 고정값 + 가변값으로 씁니다. vw만 단독으로 쓰면 두 가지 문제가 생깁니다.

1. 뷰포트 폭이 0에 가까우면 글자도 0에 가까워질 수 있음(최소값 없이 vw만 쓸 때).
2. 사용자가 브라우저 설정에서 기본 글자 크기를 키워도(rem에 반영되는 설정) vw는 반응하지 않아 확대 배율이 무시됨.

그래서 rem(사용자 설정 반영)과 vw(화면 폭 반응)를 더해서 씁니다.

--text-3xl: clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);

읽는 법: 최소 1.875rem(30px), 화면이 넓어질수록 1.3rem에 2.4vw만큼 더한 값을 쓰다가, 3.5rem(56px)에서 멈춘다는 뜻입니다.

기울기 계산 방법

두 뷰포트 폭에서 원하는 글자 크기를 정하고 그 사이를 잇는 직선의 기울기를 구합니다.

기울기 = (최대 글자 크기 − 최소 글자 크기) ÷ (최대 폭 − 최소 폭) × 100. 위 표 값으로 계산하면 약 2.4vw가 나오고, y절편은 최소 글자 크기에서 최소 폭 × 기울기를 뺀 값으로 약 1.3rem이 됩니다. 이 두 수를 그대로 clamp()의 선호값 자리에 넣습니다.

토큰별 값

--text-xs, --text-sm은 본문 보조 텍스트라 화면 폭에 따라 거의 안 바뀌어도 되므로 고정 rem을 유지합니다.

실습

/* portfolio/css/tokens.css (@layer tokens 안, 타이포 섹션) */
:root {
  /* ...색 토큰은 13편에서 만든 light-dark() 그대로 유지... */
 
  --font-sans: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
 
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);
  --leading: 1.6;
}

/* portfolio/css/styles.css (@layer components 안) */
.hero h1 {
  font-size: var(--text-3xl);
  line-height: 1.15;
}
 
/* 삭제 대상 예시 — 이제 필요 없음
@media (max-width: 767px) {
  .hero h1 { font-size: var(--text-2xl); }
}
*/

npx serve portfolio

확인 1. 개발자 도구 반응형 모드에서 폭을 375px부터 1152px까지 천천히 늘리며 히어로 제목 크기가 계단 없이 커진다
확인 2. 1152px보다 넓혀도 3.5rem에서 더 커지지 않는다(최대값 고정)
확인 3. 375px보다 좁혀도 1.875rem 아래로 줄지 않는다(최소값 고정)
확인 4. 브라우저 설정에서 기본 글자 크기를 20px로 올리면(rem 기준 변경) 모든 clamp() 값도 함께 커진다

직접 해보기

1. --text-lg의 최소·최대값을 각각 10퍼센트씩 키운 새 토큰 --text-lg-loose를 만들어 프로젝트 카드 제목에만 적용해 봅니다.
2. 컨테이너 최대 폭(--container-max: 72rem)을 넘는 초대형 모니터에서 제목이 지나치게 커 보이지 않는지 1440px 폭으로 확인하고, 필요하면 --text-3xl의 최대값을 낮춰 봅니다.

/* portfolio/css/tokens.css */
--text-lg-loose: clamp(1.2375rem, 1.1rem + 0.55vw, 1.5125rem);

/* portfolio/css/styles.css */
.project-card h2 {
  font-size: var(--text-lg-loose);
}

자주 하는 실수

확인 문제

참고 자료

• MDN — clamp()