타이포그래피

원칙

• 크기가 아니라 역할을 고르세요. 역할은 크기, 줄 높이, 자간을 함께 정하므로 어디서든 글이 똑같이 읽힙니다.
• 제목 레벨과 역할은 따로 정하세요. HTML 레벨은 개요를, size는 모양을 정하므로 디자인이 바뀌어도 개요가 맞습니다.
• 굵기는 두 가지만 쓰세요. 제목, 버튼, 링크, 강조는 500이고 나머지는 모두 400입니다.
• 읽는 줄은 짧게 두세요. 줄이 길면 다음 줄을 찾기 어려우므로 읽기 텍스트는 정해진 줄 길이를 지킵니다.
• 글이 커져도 버티게 하세요. 역할 크기는 rem이고 줄 사이가 넉넉해서, 확대하거나 텍스트 간격을 넓혀도 레이아웃이 깨지지 않습니다.

글꼴

문자마다 글꼴이 따로 있습니다. 다른 언어의 블록에는 lang을 지정해 그 언어의 글꼴에서 글리프를 가져오게 하세요.

글꼴 파일은 Google Fonts와 각 글꼴의 패키지에서 받으세요. 글꼴을 재배포하기 전에 라이선스를 확인하세요.

타입 역할

글이 하는 일에 맞춰 역할을 고르세요. display와 title은 화면에 따라 커지고, 나머지 역할은 크기가 하나입니다.

아래 견본에서 소제목, 강조, 버튼은 500입니다.

body에 surf-typography를 두면 대화상자, 메뉴 같은 포털도 역할을 따릅니다.

import '@surflane/design-tokens/tokens.css'
import '@surflane/css/foundations.css'
import '@surflane/css/typography.css'
// Load the actual font files once in the application entry.
<body className='surf-typography'>{application}</body>

<Heading level={3} variant='subsection'>
  Card subhead
</Heading>
<Text variant='caption'>400 / Manrope / +0.01em</Text>
<Text variant='mono'>400 / JetBrains Mono / 0</Text>

줄 길이와 줄 높이

읽기 텍스트는 --surf-layout-reading-measure(54ch)에서 줄을 바꿉니다. 라틴 문자 약 70자, 한글 약 50자입니다. Prose와 Markdown이 문단과 목록에 적용하고, 테이블, 코드, 이미지는 전체 너비를 씁니다.

줄바꿈되는 글은 줄 높이를 1.5 이상으로 두고, 제목은 커질수록 1.4에서 1.2로 좁힙니다. 글자를 200%로 키우거나 텍스트 간격을 넓혀도 레이아웃이 유지됩니다(WCAG 1.4.4, 1.4.12).

한국어 조판

한국어 글에는 lang="ko"를 지정해 아래 규칙이 적용되게 하세요.

• 줄은 어절 사이에서 바꿉니다(word-break: keep-all). 한 줄보다 긴 어절만 안에서 나뉩니다.
• 어절 사이 공백은 --surf-type-hangul-word-spacing(0.05em)만큼 넓혀 Pretendard의 공백 폭에 맞춥니다.
• 한글에는 기울임꼴이 없습니다. 강조는 굵기 500으로 하세요.

관련 문서

• 레이아웃 — 컨테이너, 그리드, 간격, 컴포넌트 크기를 정합니다.
• 색 — 색 역할, 대비 기준, 팔레트 만드는 법을 정합니다.
• 콘텐츠와 현지화 — 인터페이스 문구, 숫자와 날짜 형식을 정합니다.
• 문서 페이지 — 본문, 목차, 코드, 콜아웃, 언어 전환을 구성합니다.