Foundations

타이포그래피

한글은 Pretendard, 영문 디스플레이는 Outfit, 코드는 JetBrains Mono. 타입 스케일은 9단계로 고정합니다.

폰트 패밀리

각 폰트의 역할과 적용 범위를 나타냅니다.

다람쥐 헌 쳇바퀴에 타고파

본문·UI 전반

--e-font-sans

EOND Design System 0123456789

영문 디스플레이·숫자

--e-font-display

const eond = 'ui';

코드·토큰 표기

--e-font-mono

9단계의 정확한 폰트 크기와 라인 높이를 유지합니다.

.e-display 40px 업무를 바꾸는 디자인

.e-h1 32px 주요 제목과 페이지 헤드

.e-h2 26px 섹션 소제목

.e-h3 20px 카드 제목과 리스트 항목

.e-body-lg 18px 두드러진 부제나 강조 문구

.e-body 15px 본문 기본 단락으로, 가장 많이 사용하는 크기입니다.

.e-body-sm 13px 보조 정보와 인풋 라벨

.e-caption 12px 작은 캡션과 메타 정보

.e-overline 11px SECTION LABEL

한국어의 가독성을 높이는 기본 원칙입니다.

본문 컨테이너에 word-break: keep-all을 적용해 어절 단위로 줄바꿈합니다. 단어 중간에서 끊기지 않습니다.

제목에는 text-wrap: balance, 문단에는 text-wrap: pretty를 권장합니다.

body { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

각 굵기 단계의 역할과 사용 예시입니다.