Wensity Typography은(는) 무엇을 하나요?

타입은 인터페이스에서 대부분의 작업을 수행합니다. 제대로 설정하면 평범한 페이지도 디자인된 것처럼 보이지만, 잘못 설정하면 색상이나 움직임으로도 구할 수 없습니다. 이 스킬은 한 번 설정하면 모든 곳에 적용할 수 있는 시스템을 제공합니다.

아래 값은 기본값입니다. 프로젝트에 이미 타이포그래피 시스템이 있다면 유지하고 사용 방식을 개선하세요. 요청이 있을 때만 교체하세요.

1. 패밀리 선택

보통 한 패밀리면 충분합니다. 실제 무게 범위를 가진 좋은 산스체는 디스플레이, 제목, 본문 및 UI를 모두 커버합니다. 첫 번째 패밀리가 할 수 없는 역할(예: 마케팅 페이지의 개성 있는 디스플레이 산스, 코드 및 데이터용 모노스페이스)에만 두 번째 패밀리를 추가하세요.
산스만 사용: 세리프나 이탤릭은 사용하지 마세요. 제목, 본문, 인용문 및 캡션은 모두 산스체의 직립체로 설정됩니다. 웹 제품에서 세리프 제목이나 이탤릭 라인은 템플릿 코스튬처럼 보이므로, 블로그, 문서 및 럭셔리 페이지에서도 둘 다 사용하지 마세요; 무게, 크기 및 간격으로 분위기를 전달하세요.
모노스페이스를 포함해 절대 세 패밀리 이상 사용하지 마세요. 세 번째 텍스트 패밀리는 우유부단함으로 읽힙니다.
습관이 아닌 주제에 맞게 선택하세요. 모든 프로젝트에 동일한 서체를 사용하지 마세요. 제품의 세계가 인쇄물이나 하드웨어에서 어떻게 보일지 질문한 다음, 그 특성을 가진 서체를 선택하세요:

제품이 다음처럼 느껴진다면	다음을 선택하세요	무료 예시
정밀한 도구 (개발 도구, 데이터, 인프라)	타이트한 그로테스크, 데이터용 모노	Geist, Switzer, Onest; Geist Mono, JetBrains Mono
차분한 금융 또는 건강 (금융, 보험, 클리닉)	안정적인 네오-그로테스크 또는 휴머니스트 산스	Inter, Public Sans, Source Sans 3
친근한 소비자 (소셜, 음식, 여행, 교육)	더 둥근 기하학적 또는 휴머니스트 산스	Plus Jakarta Sans, Figtree, Nunito Sans, DM Sans
자신감 있는 브랜드 또는 스타트업 마케팅 페이지	디스플레이 크기에서 개성이 있는 산스	General Sans, Manrope, Bricolage Grotesque, Space Grotesk
읽기 및 출판 (문서, 블로그, 잡지)	진정한 텍스트 컷이 있는 차분한 산스, 동일 패밀리의 타이트한 제목	Inter, Satoshi, Source Sans 3
패션, 에디토리얼 또는 럭셔리	크고 타이트하게 설정된 정제된 디스플레이 산스, 제목 전용	Satoshi, General Sans, Clash Grotesque

서체가 작업을 수행할 수 있는지 확인하세요: 필요한 굵기 (보통 400, 500, 600), 표 형식 숫자, 좋은 구두점, 지원하는 언어, 여러 굵기를 사용하는 경우 가변 버전.

2. 역할 정의, 크기 정의하지 않음

텍스트를 그 역할에 따라 이름을 지정하세요. 컴포넌트는 역할 이름을 사용하고, 역할 정의만 픽셀 값을 보유합니다. 7가지 역할은 거의 모든 인터페이스를 커버합니다:

역할	사용처	마케팅 페이지	앱 UI
`display`	히어로 헤드라인, 페이지당 하나	48~~80px, 굵기 600, 행간 0.95~~1.05, 자간 -0.03em~-0.04em	거의 사용되지 않음
`title`	페이지 및 섹션 제목	32~44px, 굵기 600, 행간 1.1, 자간 -0.02em	20~24px, 굵기 600, 행간 1.25, 자간 -0.01em
`heading`	카드, 패널 및 하위 섹션 제목	20~24px, 굵기 600, 행간 1.25, 자간 -0.01em	15~16px, 굵기 600, 행간 1.4
`body`	문단	16~~18px, 굵기 400, 행간 1.55~~1.65	14~15px, 굵기 400, 행간 1.5
`label`	버튼, 입력, 내비게이션, 테이블 헤더	14~15px, 굵기 500, 행간 1.3	13~14px, 굵기 500, 행간 1.3
`caption`	도움말 텍스트, 메타데이터, 타임스탬프	13~14px, 굵기 400, 행간 1.45	12~13px, 굵기 400, 행간 1.4
`code`	인라인 코드, 코드 블록, ID	주변 텍스트의 0.9em, 모노	동일

스케일 규칙:

단계는 명확해야 합니다. 인접한 역할은 크기가 최소 약 20% 차이가 나거나, 크기 단계와 굵기 단계의 조합으로 차이가 나야 합니다 (14px 500 레이블이 13px 400 캡션 위에 있는 것은 괜찮지만, 15px 400과 16px 400이 다른 작업을 하는 것은 안 됩니다).
비율이 도움이 되지만, 테이블이 우선입니다. 마케팅 페이지는 단계 간 1.25~~1.333 비율이 적합하고, 조밀한 앱 UI는 1.125~~1.2가 적합합니다. 정수 픽셀로 반올림하세요.
최대 세 가지 굵기: 일반(400), 레이블용 중간(500), 제목 및 디스플레이용 세미볼드(600). 계층은 크기, 색상 및 공간에서도 비롯되므로 다섯 가지 굵기가 필요하지 않습니다. 큰 디스플레이 라인에서 600이 너무 무겁게 보이면 네 번째 굵기를 추가하는 대신 디스플레이에 500을 사용하세요.
마케팅 페이지의 디스플레이 및 제목에만 유동 크기 사용: font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem). 본문 및 UI 텍스트는 고정으로 유지하여 조밀한 레이아웃이 예측 가능하도록 하세요.
본문 텍스트 최소 크기: 마케팅 및 읽기 페이지에서는 16px, 조밀한 앱 UI에서는 14px. 모바일에서 입력 텍스트는 16px로 설정하세요. 그렇지 않으면 iOS Safari가 필드에 포커스될 때 페이지를 확대합니다.

Tailwind CSS v4에서는 역할을 한 번 정의하세요 (패밀리 이름을 선택한 것으로 대체):

@theme {
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.035em;
  --text-display--font-weight: 600;

  --text-title: 2.25rem;
  --text-title--line-height: 1.1;
  --text-title--letter-spacing: -0.02em;
  --text-title--font-weight: 600;

  --text-heading: 1.25rem;
  --text-heading--line-height: 1.3;
  --text-heading--letter-spacing: -0.01em;
  --text-heading--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.6;

  --text-label: 0.875rem;
  --text-label--line-height: 1.3;
  --text-label--font-weight: 500;

  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.45;
}

그런 다음 마크업에서 text-[44px] 또는 text-4xl leading-tight tracking-tight 체인 대신 text-display, text-title, text-body를 사용하세요. Tailwind v3에서는 동일한 값을 theme.extend.fontSize 아래에 [size, { lineHeight, letterSpacing, fontWeight }] 튜플로 넣으세요.

3. 행간 및 자간

행간은 크기가 커질수록 작아집니다. 디스플레이 0.95~~1.05, 제목 1.1~~1.2, 본문 1.5~~1.65, 레이블 1.2~~1.35. 행간 1.5의 64px 헤드라인은 별도의 줄로 분리됩니다.
큰 텍스트에는 타이트한 자간, 본문에는 자간 없음. 디스플레이 -0.03em~-0.04em, 제목 -0.02em, 제목 -0.01em, 본문 및 레이블 0. -0.05em보다 더 타이트하게 설정하지 마세요. 글자가 서로 닿기 시작합니다. 선택한 서체에 맞게 눈으로 조정하세요.
소문자 본문 및 인터페이스 텍스트에는 양의 자간을 사용하지 마세요. 양의 자간은 모두 대문자 텍스트에만 도움이 되며, 모두 대문자 텍스트는 드물어야 합니다 (섹션 6 참조).
넓은 줄은 더 많은 리딩이 필요합니다. 본문 텍스트가 75자에 가까우면 행간 1.6 이상을 사용하고, 50자에서는 1.5면 충분합니다.
어두운 배경의 밝은 텍스트는 더 무겁고 타이트하게 보입니다. 다크 테마에서는 본문 행간에 약 0.05를 추가하세요.

4. 측정 및 줄바꿈

본문 텍스트: 줄당 60~75자. 페이지 전체가 아닌 문단에 max-width: 65ch를 설정하세요. 캡션 및 도움말 텍스트는 더 좁게 설정할 수 있습니다.
디스플레이 헤드라인: 줄당 약 12~20자. 1440px 화면 가로질러 한 줄로 표시되는 헤드라인은 형태가 없습니다. ch 단위의 max-width 또는 컨테이너 너비로 제한하세요.
제목 균형 맞추기, 문단 예쁘게 줄바꿈:

h1, h2, h3, .text-display, .text-title { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

둘 다 점진적입니다: 오래된 브라우저는 무시합니다. balance는 헤드라인 줄을 균등하게 만듭니다; pretty는 문단의 마지막 줄에 단어 하나만 남는 것을 방지합니다.

구문 사이에서만 수동 줄바꿈을 하고, 텍스트가 렌더링되는 모든 너비에서 확인하세요. 폰에서 중간에 위치하는 <br>은 기본 줄바꿈보다 더 나쁩니다. <br>보다 max-width를 선호하세요.
사용자 콘텐츠의 긴 단어 및 URL은 컨테이너에 overflow-wrap: anywhere가 필요합니다. 그렇지 않으면 모바일에서 레이아웃을 옆으로 밀어냅니다.
자르기는 최후의 수단입니다. 타이트한 UI에서 한 줄 레이블을 자릅니다 (Tailwind에서 truncate). 숨겨진 부분이 중요하면 키보드와 터치로 전체 텍스트에 접근할 수 있도록 하세요 (포커스 가능한 요소의 툴팁, 확장 가능한 행, 상세 보기); title 속성만으로는 충분하지 않습니다. 본문 텍스트나 사용자가 작업을 수행하기 위해 읽어야 하는 것은 절대 자르지 마세요.
다중 줄 클램프 (line-clamp-2): 클램프된 텍스트의 행간을 1.3 이상으로 유지하여 디센더(g, y, p)가 잘리지 않도록 하세요. 클램프 내부에 하단 패딩을 추가하지 마세요. 다음 줄의 상단이 표시됩니다.

5. 텍스트 색상 및 대비

세 가지 텍스트 색상으로 충분합니다: 기본(제목 및 본문), 보조(지원 텍스트, 캡션, 플레이스홀더), 비활성화. 토큰으로 정의하세요. 즉석에서 불투명도를 낮추어 네 번째를 만들지 마세요.
대비 기준 (WCAG 2.2 AA): 본문 및 작은 텍스트의 경우 4.5:1, 24px 이상 텍스트(또는 18.66px 볼드)의 경우 3:1. 보조 텍스트 및 플레이스홀더 텍스트도 4.5:1이 필요합니다. 비활성화된 컨트롤의 텍스트만 예외입니다.
어두운 배경에서는 긴 텍스트에 순수한 흰색 대신 오프-화이트를 사용하세요 (약 90~94% 밝기). 거의 검은색 배경의 순수한 흰색은 눈부심을 유발합니다.
색상이 있거나 색조가 있는 표면에서는 보조 텍스트를 중성 회색 대신 표면 색조 쪽으로 색조를 조정하세요. 중성 회색은 색상에서 더러워 보입니다.

6. 피해야 할 것

눈썹 및 킥커: 제목 위의 작은 대문자 자간 레이블 ("FEATURES", "WHY US", "HOW IT WORKS"). 사용하지 마세요. 템플릿 UI의 가장 명확한 신호입니다. 제목에 맥락이 필요하면 더 나은 제목을 작성하세요.
일반적으로 모두 대문자 레이블, 사이드바, 설정 패널, 카드, 푸터 및 데모 컨트롤의 작은 섹션 제목을 포함합니다. 문장 케이스가 더 빠르게 읽힙니다; 대신 작은 제목에 굵기(500 또는 600)와 보조 텍스트 색상을 부여하세요. 실제 약어(API, URL)에만 대문자를 사용하세요.
그라데이션 텍스트 및 헤드라인의 한 단어 색상 처리. 강조는 크기, 굵기 및 배치에서 비롯되며, 페인트가 아닙니다.
이탤릭, 어디서든. 강조에는 굵기를 사용하고, 인용문은 그 옆에 규칙이나 더 큰 크기로 직립체로 설정하세요.
세리프 서체. 디스플레이 세리프와 텍스트 세리프 모두 웹 제품에서 코스튬으로 읽힙니다. 대신 개성이 있는 산스를 선택하세요.
장식으로서의 모노스페이스. 모노는 코드, 데이터, ID, 키보드 키 및 열의 숫자를 위한 것입니다. 마케팅 페이지의 모노 레이블은 코스튬입니다.
두 줄보다 긴 중앙 정렬 문단. 짧은 헤드라인과 한 줄 CTA만 중앙 정렬하세요.
웹에서의 양쪽 정렬 텍스트. 하이픈 없이 공백의 강을 만듭니다.
링크 외의 밑줄.

7. 숫자, 코드 및 데이터

정렬하거나 업데이트되는 모든 것의 표 형식 숫자: 테이블, 가격, 타이머, 카운터, 통계. font-variant-numeric: tabular-nums; (Tailwind tabular-nums). 이 설정이 없으면 숫자 너비가 변경됨에 따라 카운팅 숫자가 옆으로 흔들립니다.
슬래시 0 0과 O를 혼동할 수 있는 ID 및 코드의 경우: font-variant-numeric: tabular-nums slashed-zero;.
테이블 셀 끝에 숫자 정렬 (text-align: end)하여 소수점이 정렬되도록 하세요. 텍스트 열은 시작 부분에 정렬합니다.
코드: 주변 텍스트의 약 0.9em 크기의 모노스페이스로 x-높이가 일치하도록 합니다. 인라인 코드는 미묘한 배경과 0.2em 수평 패딩을 받고, 테두리는 없습니다. 코드 블록은 행간 약 1.6과 수평 스크롤을 받고, 들여쓰기를 깨뜨리는 줄바꿈은 절대 하지 마세요.
키보드 키 (<kbd>)는 캡션 크기의 모노 서체로 설정합니다.

8. 링크

실행 텍스트 내의 링크에 밑줄을 긋습니다. 색상만으로는 색맹 사용자에게 실패합니다. 내비게이션 목록과 버튼에 밑줄이 그어지지 않도록 산문에 범위를 지정하세요 (.prose는 기사 또는 긴 형식의 콘텐츠를 감싸는 요소입니다):

:where(p, td, dd, figcaption, blockquote) a,
:where(.prose, article) li a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

내비게이션, 버튼 및 카드 링크에는 밑줄이 필요하지 않습니다. 그 위치가 이미 상호작용 가능함을 나타냅니다.

9. 레이아웃 이동 없이 글꼴 로드

Next.js: next/font (next/font/google 또는 next/font/local)를 사용하세요. 자체 호스팅, 사전 로드 및 일치하는 메트릭으로 대체 글꼴을 생성하여 페이지가 글꼴이 도착할 때 점프하지 않도록 합니다. CSS 변수로 노출하고 @theme inline으로 테마 글꼴을 매핑하세요 (변수가 사용되는 곳에서 읽히도록 하려면, :root에서 한 번 해결되지 않도록):

// app/layout.tsx
import { Onest } from "next/font/google";
const sans = Onest({ subsets: ["latin"], variable: "--font-brand", display: "swap" });
// <html lang="en" className={sans.variable}>

@theme inline {
  --font-sans: var(--font-brand), ui-sans-serif, system-ui, sans-serif;
}

광학 크기: opsz 축(Inter, Roboto Flex, Fraunces)이 있는 서체는 로드할 때만 얻을 수 있습니다: Inter({ subsets: ["latin"], axes: ["opsz"] }). font-optical-sizing: auto를 유지하여 작은 텍스트가 더 견고한 컷을, 큰 텍스트가 더 미세한 컷을 얻도록 하세요.
기타: WOFF2 자체 호스팅, font-display: swap, 위쪽 접힌 부분 위에서 사용되는 하나 또는 두 개의 파일만 사전 로드하고, 로컬 대체 서체에 size-adjust, ascent-override 및 descent-override를 설정하여 스와핑이 레이아웃을 변경하지 않도록 하세요.
사용하는 것만 로드하세요. 6개의 정적 굵기보다 하나의 가변 글꼴 파일을 선호하세요. 제공하는 스크립트로 서브셋팅하세요.

10. 렌더링 세부 사항

다크 테마에서 -webkit-font-smoothing: antialiased는 macOS에서 밝은 텍스트가 덜 부풀어 보이도록 합니다. 라이트 테마는 기본값으로 두세요.
::selection을 브랜드 색조로 설정하고 가독성을 유지하세요. 브라우저의 기본 파란색은 페이지가 완성되지 않았음을 나타냅니다.
카피에 실제 구두점을 사용하세요: 곱슬 따옴표 (“ ” ‘ ’), 생략 문자 (…), 및 치수의 곱셈 기호 (×).
사용자 설정을 존중하세요: rem 단위로 텍스트 크기 조정, 확대 차단 금지, 200% 텍스트 크기 및 더 큰 글자 및 줄 간격에서도 텍스트가 여전히 맞는지 확인하세요.

Wensity Typography