Font Families
기본 텍스트와 코드에 사용되는 폰트 패밀리입니다.
--doc-font (Pretendard Variable)
다람쥐 헌 쳇바퀴에 타고파 The quick brown fox jumps over the lazy dog
--doc-mono (JetBrains Mono)
const greeting = "Hello, World!";
Heading Scale
제목에 사용되는 크기 스케일입니다.
H1 2.25rem
제목 스타일 Heading
H2 1.5rem
섹션 제목 Section
H3 1rem
서브 제목 Subtitle
Body Text
본문에 사용되는 텍스트 크기입니다.
Base (0.95rem)
기본 본문 텍스트입니다. 가독성을 최우선으로 고려하여 설계되었습니다.
Small (0.875rem)
작은 텍스트로 보조 정보나 캡션에 사용됩니다.
XS (0.75rem)
라벨, 배지, 메타 정보 등에 사용되는 가장 작은 크기입니다.
Font Weights
텍스트 강조에 사용되는 굵기 스케일입니다.
Line Heights
다양한 컨텍스트에 맞는 줄 간격입니다.
Tight (1.25) - 제목용
줄 간격이 좁은 제목 스타일
두 번째 줄 예시
Normal (1.5) - 일반 본문
일반적인 본문 텍스트에 사용되는 줄 간격입니다. 대부분의 읽기 환경에서 적절한 가독성을 제공합니다.
Relaxed (1.625) - 긴 본문
긴 문단이나 문서에서 사용되는 여유로운 줄 간격입니다. 장시간 읽기에 적합합니다.
Loose (1.75) - 주석/설명
가장 넓은 줄 간격으로, 주석이나 부가 설명에 사용됩니다.
CSS Variables
타이포그래피에 사용되는 CSS 변수 목록입니다.
:root {
--doc-font: 'Pretendard Variable', system-ui, sans-serif;
--doc-mono: 'JetBrains Mono', monospace;
--doc-font-weight-normal: 400;
--doc-font-weight-medium: 500;
--doc-font-weight-semibold: 600;
--doc-font-weight-bold: 700;
--doc-font-weight-extrabold: 800;
--doc-line-height-tight: 1.25;
--doc-line-height-normal: 1.5;
--doc-line-height-relaxed: 1.625;
--doc-line-height-loose: 1.75;
}