타이포그래피
타이포그래피는 대부분 절제입니다: 합리적인 스케일, 편안한 간격, 충분한 대비. 레이블, 테이블 셀, 마케팅 헤드라인, 기사 단락은 모두 동일한 규칙 세트를 공유하지 않습니다.
검토할 때는 코드를 스캔하는 대신 렌더링된 페이지를 읽으세요. 잘못된 줄바꿈, 미망인, 생략은 실제 콘텐츠 길이에서만 드러납니다.
모든 수정은 프로젝트의 스타일링 시스템으로 작성하고, 아래의 정확한 값을 익숙해 보이는 대체값 대신 사용하세요. 치트 시트는 각 선언을 Tailwind 대응값에 매핑합니다.
단어 자체는 better-writing에 속합니다. 시맨틱 제목 구조는 better-accessibility에 속합니다. 공간적 RTL 레이아웃과 논리적 속성은 better-layout에 속합니다. 대비 측정은 better-colors에 속합니다. 이 스킬은 텍스트가 혼합 방향 콘텐츠에서 어떻게 렌더링되고, 줄바꿈되며, 동작하는지를 담당합니다.
올바른 형식 제공
웹에서는 Brotli 압축과 광범위한 지원을 위해 .woff2를 사용하세요. .woff는 매우 오래된 브라우저를 위한 대체재입니다. .ttf와 .otf는 웹 압축이 없는 데스크탑 형식입니다. 파일이 로드되는 방식은 프로젝트의 책임입니다.
원시 태그보다 속성 사용
CSS 속성이 존재하면 이를 사용하세요. font-variation-settings: "wght" 650 대신 font-weight: 650. "opsz" 대신 font-optical-sizing: auto. font-feature-settings: "tnum" 1 대신 font-variant-numeric: tabular-nums.
속성은 가변 폰트가 아닌 대체 폰트가 렌더링될 때도 계속 작동합니다. 고유한 속성이 없는 사용자 정의 축("GRAD" 80)이나 틈새 기능("ss01" 1)에 대해서만 원시 태그를 사용하세요. 축과 기능 태그는 variable-fonts-and-opentype.md에 나열되어 있습니다.
의도된 굵기와 스타일 로드
브라우저는 활성 패밀리가 제공하지 않는 굵기나 스타일을 합성하여 실제 폰트를 왜곡합니다. 디자인이 사용하는 폰트를 로드하세요.
font-synthesis: none은 합성을 끄지만, 강조를 보고하는 대신 지웁니다. 모든 필수 굵게, 기울임꼴, 작은 대문자, 위첨자, 아래첨자 형태가 대체 스택 전체에서 구별되는지 확인한 후에만 설정하세요.
더 적은 폰트, 크기 및 굵기
세 가지 이상의 폰트는 거의 사용하지 마세요. 굵기와 크기가 계층을 정의합니다. 과도하게 사용하면 가독성이 빠르게 떨어집니다. 유사성이 아닌 대비를 위해 짝을 맞추세요: 산세리프 본문 위의 세리프 헤드라인은 의도적으로 읽히지만, 거의 동일한 두 개의 산세리프는 실수로 읽힙니다.
18px 미만에서는 굵기 400 이상을 유지하세요. 300 미만의 굵기는 28px 이상에서만 디스플레이용입니다. 텍스트 크기에서는 사라집니다. 페어링 가이드는 choosing-fonts.md에 있습니다.
시맨틱 이름이 있는 타입 스케일 사용
작은 크기 세트를 정의하고 가능한 한 거의 벗어나지 마세요. 시스템이 없는 하드코딩된 크기는 규모가 커지면 무너집니다.
text-sm과 같은 단독 기본 이름은 사용 규칙이 명확할 때 괜찮습니다. 팀에서는 용도별로 크기 이름을 지정하세요(text-body-sm). 그러면 규칙이 다른 사람에게서도 유지됩니다. 스케일 구성은 spacing-and-sizing.md에 있습니다.
제목 크기는 레벨에 따라 내려감
제목 레벨을 타입 스케일의 내림차순 단계에 매핑하여 시각적으로 하위인 제목이 상위를 압도하지 않도록 하세요. 인접한 레벨은 스케일의 작은 쪽 끝에서 크기를 공유할 수 있으며, 굵기나 간격으로 구별되는 한 괜찮습니다. 시맨틱 요소는 better-accessibility의 책임입니다. 이 스킬은 시각적 처리만 설정합니다.
역할별 줄 높이
제목은 더 좁게, 약 1.1. 본문은 1.5에서 1.6. 단위 없는 값을 선호하여 줄 높이가 글꼴 크기에 따라 조정되도록 하세요. 고정된 24px는 그렇지 않습니다.
좁은 줄 높이는 짧은 텍스트용입니다. 세 줄 이상으로 줄바꿈되는 모든 텍스트는 높이가 제한된 행에서도 최소 1.4가 필요합니다.
크기별 자간
큰 제목은 종종 약간의 음수 자간이 더 좋아 보입니다. 작은 대문자 레이블은 약간의 양수 자간이 필요하며, 그렇지 않으면 글자가 좁아 보입니다. 읽기 크기의 본문은 둘 다 필요 없습니다.
측정값 제한
긴 줄은 눈이 다음 줄을 찾기 어렵게 만듭니다. 긴 형식의 텍스트를 줄당 약 60-75자로 제한하세요. 어떤 단위든 작동하며, 제한이 존재하고 줄 길이가 범위 내에 있는 한 괜찮습니다. 단위 선택 및 픽셀 등가물을 참조하세요.
의도적으로 줄바꿈
네 가지 선언, 네 가지 작업:
text-wrap: balance는 텍스트를 여러 줄에 고르게 분배합니다. 제목에 사용하세요.text-wrap: pretty는 마지막 줄에 짧은 단어 하나만 오는 것을 방지합니다. 설명에 사용하세요.overflow-wrap: break-word는 긴 단어, 링크 또는 ID가 컨테이너를 벗어날 수 있는 곳에 사용합니다.white-space: nowrap은 줄바꿈이 깨져 보이는 레이블과 배지에 사용합니다.
긴 형식의 텍스트에서는 balance와 pretty를 건너뛰세요.
변경되는 값에는 표 형식 숫자
숫자는 기본적으로 너비가 다르므로 타이머, 카운터 및 가격이 업데이트될 때 레이아웃이 이동합니다. 변경되는 모든 값에 font-variant-numeric: tabular-nums를 적용하세요.
콘텐츠 손실 없이 생략
한 줄의 경우 text-overflow: ellipsis와 함께 overflow: hidden 및 white-space: nowrap을 사용하세요. 여러 줄의 경우 line-clamp를 사용하세요. 생략은 콘텐츠를 숨깁니다. 누락된 텍스트가 중요할 때는 툴팁이나 확장된 보기에서 전체 값을 접근 가능하게 유지하세요.
텍스트는 자연스럽게 작성하고 CSS로 스타일링
텍스트를 자연스러운 대소문자로 저장하고 text-transform으로 표현을 제어하여 리디자인이 복사본을 다시 작성하는 일이 없도록 하세요.
렌더링된 텍스트에서 스마트 구두점을 사용하세요:
- 본문에는 곱은 따옴표, 코드에는 직선 따옴표.
- 범위에는 엔 대시:
2010–2020. - 마침표 세 개가 아닌 단일 줄임표 문자.
를 사용하여16 px를 줄바꿈에서 함께 유지.­를 사용하여 긴 단어가 줄바꿈될 수 있는 위치를 표시.
폰트에서 밑줄
기본 밑줄은 브라우저가 결정하는 곳에 위치합니다. text-underline-position: from-font와 text-decoration-thickness: from-font로 폰트 자체 메트릭에서 위치와 두께를 가져옵니다. text-decoration-thickness, text-underline-offset 및 text-decoration-skip-ink로 수동 조정합니다.
text-decoration-style은 선을 점선, 파선 또는 물결선으로 그립니다. 점선 밑줄은 약어나 정의된 용어와 같이 단어에 추가 정보가 있음을 나타내는 일반적인 힌트입니다.
색상만이 실제 밑줄에서 안정적으로 애니메이션되는 부분입니다. 따라서 애니메이션되는 유일한 것이 색상이 아니라면 text-decoration을 사용하는 대신 밑줄을 별도의 요소로 구축하세요.
모바일에서 16px 입력
iOS Safari는 입력 텍스트가 16px보다 작으면 전체 페이지를 확대합니다. 두 가지 수정 방법은 크기를 16px로 유지하고 다르게 보이므로 디자인이 원하는 것을 물어보세요:
- 모바일에서 입력 크기를 키웁니다(
text-base sm:text-sm). 작은 화면에서 보이는 방식이 변경됩니다. font-size: 16px를 유지하고transform: scale()로 의도된 크기를 렌더링하며, 너비와line-height를 보정합니다. 모든 뷰포트에서 동일하지만 유지 관리할 코드가 더 많습니다.
두 레시피 모두 details-and-accessibility.md에 있습니다.
크기 및 대비 최소 기준
긴 형식의 본문 텍스트는 브라우저 기본값인 16px부터 시작하세요. 명확한 이유가 있을 때만 변경하세요: 서체가 작게 보이거나, 측정값이 좁거나, 제품이 조밀한 전문 도구인 경우.
UI 텍스트는 더 작을 수 있습니다. 14px는 입력 및 메뉴의 유용한 시작점이고, 13px는 캡션에, 드물게 12px 미만입니다. 입력은 여전히 모바일에서 16px가 필요합니다.
텍스트가 저대비로 보일 때는 better-colors를 사용하여 렌더링된 쌍을 측정하고 better-accessibility를 사용하여 요구 사항을 분류하세요. 요청받지 않는 한 색상을 그대로 두세요.
루트에서 폰트 스무딩
macOS에서는 텍스트가 의도보다 더 무겁게 렌더링됩니다. 루트 레이아웃에 한 번 -webkit-font-smoothing: antialiased와 -moz-osx-font-smoothing: grayscale을 적용하고, 컴포넌트별로는 절대 적용하지 마세요. Tailwind의 antialiased는 둘 다 다룹니다.
언어 및 양방향 동작
lang을 설정하여 브라우저와 보조 기술이 올바른 발음, 따옴표 및 하이픈 넣기를 선택하도록 하세요. 방향이 변경되는 문서 또는 콘텐츠 경계에 dir을 설정하세요. 숫자 순서를 유지하고 <bdi>를 사용하여 혼합 방향 값을 분리하세요. 공간적 미러링 및 논리적 CSS 속성은 better-layout에 속합니다.
유용한 텍스트 선택 가능하게 유지
기본적으로 텍스트를 선택 가능하게 유지하세요. ::selection은 선택된 조합이 읽기 쉽게 유지되는 한 브랜드를 읽기 경험에 가져올 수 있습니다.
user-select: none은 실수로 선택이 방해가 되는 드래그 가능하거나 제스처 기반 표면에 속합니다. 인터페이스 전반에 걸쳐서나 버튼 레이블이 강조 표시될 수 있기 때문에 절대 사용하지 마세요.
마치기 전에
| 실수 | 수정 방법 |
|---|---|
| 합성된 폰트가 디자인과 다름 | 실제 폰트 로드; 확인된 합성 모드만 비활성화 |
| 하위 제목이 시각적으로 상위를 압도 | 해당 섹션의 계층을 내림차순 스케일 단계에 매핑 |
| 기본 크기로 제목 요소 선택 | 시맨틱을 먼저 선택한 다음 CSS에서 크기 설정 |
| 문단 마지막 줄의 외톨이 단어 | text-wrap: pretty |
| 두 줄 제목의 균형이 맞지 않음 | text-wrap: balance |
| 인터페이스에서 양쪽 정렬된 텍스트 | text-align: start; 정렬은 특정 편집 레이아웃에 예약 |
| 밑줄이 내림자 자름 | text-decoration-skip-ink: auto, from-font 메트릭 |
| 혼합 방향 값이 잘못된 순서로 렌더링 | 올바른 lang/dir; <bdi>로 값 분리 |
| 애플리케이션 전체에서 선택 비활성화 | 복원; 드래그나 제스처와 충돌하는 곳에서만 억제 |
| 시각적 단서 없는 추가 정보 힌트 | text-decoration-style: dotted를 통한 점선 밑줄 |
14px UI 텍스트에서 가는/가는 굵기 | 18px 미만에서는 굵기 400+; 가는 굵기는 디스플레이 전용 |
세 줄 카드 설명에서 leading-none | 3+ 줄로 줄바꿈되는 모든 텍스트에 최소 1.4 |
보고
심각도. 높음은 텍스트를 읽을 수 없게 만들거나 복구 방법 없이 콘텐츠를 자릅니다. 중간은 타입 시스템이나 제목 계층을 깨뜨립니다. 낮음은 고립된 세부 조정입니다.
확인. 브라우저 없이: 각 제목 수준에 대해 계산된 크기와 굵기, 내림차순 확인; 선언된 줄 높이와 측정값; 실제 문자열 길이에 대한 생략 규칙. 브라우저 사용 시: 뷰포트 크기를 조정하여 실제 콘텐츠 길이에서 줄바꿈, 미망인 및 생략을 포착합니다. 실행할 수 없는 모든 검사는 확인되지 않음으로 보고합니다.
형식. 각 원칙을 위반하는 항목을 심각도 순서로 그룹화하고, 각 근본 원인에 대해 나타나는 모든 위치를 나열하는 행 하나:
| 심각도 | 위치 | 이전 | 이후 | 이유 |
|---|
위치는 경로/대/파일:줄 형식입니다. 이유는 원칙과 사용자 영향을 명명합니다.
높음이 남아 있으면 차단으로 끝내고, 그렇지 않으면 승인으로 끝내되 나머지는 수행할 작업으로 테이블에 남겨둡니다. 검사하지 않은 범위는 절대 승인하지 마세요. 보고할 내용이 없으면 "실행 가능한 타이포그래피 발견 사항 없음"이라고 명시하고 확인 내용을 보고합니다.