Typography

목적

Dot의 typography는 많은 상태와 설명을 빠르게 훑고, 긴 학습 콘텐츠를 편안하게 읽고, 행동 결과를 정확히 이해하게 한다. 장식적인 개성보다 정보 위계, 한국어 가독성, 숫자 비교, 상태의 명료함을 우선한다.

• Flexible: 운영·학습·작성 맥락에 따라 밀도와 줄 길이를 조정하되 role 의미는 유지한다.
• Link: 같은 대상·상태·행동에는 화면마다 같은 역할과 용어를 사용한다.
• Glow: gradient text나 display 표현은 드문 브랜드 안내에만 사용한다.

Font family

기본 sans-serif 순서는 다음과 같다.

Pretendard Variable → Pretendard → Inter → system sans-serif

코드, 식별자, 고정폭 비교가 실제로 필요할 때만 --dot-font-mono 계열을 사용한다.

• package는 font file이나 외부 CDN을 강제하지 않는다.
• 소비 제품은 승인된 font를 직접 제공하고 fallback에서도 layout이 깨지지 않게 한다.
• 한 화면에서 여러 brand font를 섞지 않는다.
• mono font를 숫자 지표 전체의 시각 스타일로 사용하지 않는다. 숫자 정렬에는 tabular-nums가 우선이다.

Type roles

정보 텍스트는 12px 미만을 사용하지 않는다. size를 줄여 공간 문제를 해결하지 말고 내용, 열, layout을 조정한다.

Role 선택

Display

• 한 화면에서 하나 이하로 제한한다.
• 일반 업무 화면의 제목에 사용하지 않는다.
• 캐릭터, Glow와 함께 쓰더라도 주 행동과 설명을 밀어내지 않는다.
• 좁은 화면에서 의미를 유지한 채 자연스럽게 줄바꿈한다.

Page title

• PageHeader의 현재 대상 또는 작업 이름에 사용한다.
• 페이지마다 하나의 h1만 둔다.
• 상태 badge와 함께 있을 수 있지만 제목 문구 안에 상태를 반복하지 않는다.
• 과도한 tracking이나 all caps를 사용하지 않는다.

Section title

• 하나의 사용자 질문 또는 작업 묶음을 이름 붙인다.
• card마다 장식적으로 반복하지 않는다.
• 제목 아래 설명이 필요하면 body 또는 caption 계층으로 범위와 판단 기준을 제공한다.

Body와 label

• body는 기본 읽기와 입력값의 중심 역할이다.
• label은 control 이름, 짧은 상태, table header처럼 분류 역할에 사용한다.
• 모든 본문을 500 이상으로 굵게 만들어 계층을 잃지 않는다.
• 필수 조건과 오류는 caption 크기로 낮추지 않고 맥락에 맞는 읽기 계층을 유지한다.

Caption

• timestamp, 보조 ID, 부가 설명에 사용한다.
• 위험, 비용, 되돌릴 수 없음, 필수 validation의 유일한 표현으로 사용하지 않는다.
• 여러 caption을 한 줄에 나열할 때 separator와 grouping을 일관되게 한다.

Metric

• 사용자의 판단을 실제로 바꾸는 핵심 수치에만 사용한다.
• 단위, 기간, 비교 기준을 함께 제공한다.
• 숫자만 크게 쓰고 의미를 caption에 숨기지 않는다.
• MetricStrip 안의 값은 같은 자릿수 규칙과 tabular-nums를 사용한다.

한국어 문장

• 제목과 메뉴는 짧은 명사형을 기본으로 한다.
• 행동은 결과가 드러나는 동사형을 사용한다.
• 설명과 피드백은 짧고 자연스러운 해요체를 사용한다.
• 조사와 어미를 생략해 기계적인 문장으로 만들지 않는다.
• 내부 entity나 영문 상태명보다 사용자가 이해하는 한국어를 우선한다.
• 한 문장에 여러 조건을 넣지 말고 판단 순서에 따라 나눈다.
• 영어 약어가 필요하면 처음 등장할 때 의미를 설명한다.

줄 길이와 줄바꿈

• 설명 문장은 한 줄 약 72자를 넘지 않게 한다.
• 좁은 column에서는 자연스러운 한국어 단위로 줄바꿈되게 한다.
• 제목을 한 줄로 만들기 위해 font size를 임의로 줄이지 않는다.
• 의미가 바뀌는 임의의 <br>를 반응형으로 반복하지 않는다.
• table cell의 긴 설명은 주요 식별자를 보존하고 세부 확인 경로를 제공한다.
• truncation은 필수 정보의 유일한 표시 방식이 될 수 없다.

숫자·날짜·단위

• 비교 영역에는 tabular-nums를 사용한다.
• 같은 열의 소수점 자리와 천 단위 구분을 통일한다.
• 값과 단위 사이의 spacing과 표기 규칙을 화면 안에서 유지한다.
• 날짜는 현재 맥락에 필요한 연·월·일·시간 범위를 보여준다.
• 상대 시간만 쓰지 않고 정확한 시점이 중요한 운영 이력에는 절대 시간을 확인할 수 있게 한다.
• 0, 없음, 미집계, 불러오는 중을 서로 다른 문장으로 표현한다.

행동과 상태 문구

• 버튼은 확인, 실행보다 초안 저장, 검증 실행, 학습 알림 발송처럼 결과를 말한다.
• loading 중에도 저장 중…, 검증 중…처럼 원래 행동을 유지한다.
• 상태는 성공, 실패보다 발행됨, 검증 필요, 발송 실패처럼 대상과 단계를 말한다.
• 같은 상태의 문구는 PageHeader, StatusPill, table, detail에서 일치한다.
• 한 학습 고리가 끝나면 완료 결과와 다음 배움의 방향을 짧은 문장으로 연결한다.

Brand와 character 주변 typography

• 캐릭터 위에 text나 badge를 겹치지 않는다.
• 캐릭터 옆의 문장은 캐릭터가 없어도 의미가 완결돼야 한다.
• .text-dot-gradient는 드문 브랜드 문구에만 사용하고 긴 본문, 핵심 상태, 숫자 지표에는 사용하지 않는다.
• gradient가 제거되거나 고대비 환경에서도 읽을 수 있는 fallback을 유지한다.
• 2D·3D 표현과 함께 사용할 때 지정된 관계와 여백을 지킨다.

반응형과 확대

• viewport가 좁아지면 role을 무작정 한 단계 낮추지 않고 layout과 줄바꿈을 먼저 조정한다.
• Input은 작은 화면에서 확대를 유발하지 않는 읽기 크기를 확보한다.
• browser zoom 200%에서도 제목, label, error, action이 겹치거나 잘리지 않아야 한다.
• 사용자가 font size를 키워도 고정 높이 container가 텍스트를 자르지 않는다.
• text-only zoom에서 reflow와 focus 표시를 검증한다.

상태와 접근성

• 시각적 크기와 semantic heading level을 함께 맞춘다.
• 굵기와 색만으로 heading을 흉내 내지 않는다.
• label은 control과 programmatically 연결한다.
• placeholder를 label로 사용하지 않는다.
• 오류와 도움말은 control의 accessible description 관계에 포함한다.
• icon-only control에는 accessible name을 제공한다.
• live region 문장은 짧고 중복되지 않게 한다.
• screen reader 전용 문구도 시각 문구와 다른 결과를 약속하지 않는다.

예외와 피해야 할 사용

• 정보량이 많다는 이유로 12px 미만으로 줄이지 않는다.
• 모든 제목과 값에 bold를 사용하지 않는다.
• 장식적인 letter-spacing, all caps, italic을 한국어 정보 위계에 사용하지 않는다.
• caption 색과 크기에 중요한 위험 정보를 숨기지 않는다.
• 한 화면에서 같은 상태를 여러 용어로 부르지 않는다.
• 긴 버튼 문구를 icon-only로 바꿔 문제를 숨기지 않는다.
• display와 gradient text를 일반 운영 화면에 사용하지 않는다.
• 숫자 값만 크게 보여주고 기간·단위를 제거하지 않는다.

검토 질문

• 각 텍스트가 일곱 role 중 의미에 맞는 역할을 사용하는가?
• 페이지에 하나의 h1과 논리적인 h2·h3 계층이 있는가?
• 12px 미만 정보 텍스트가 없는가?
• 버튼과 상태 문구가 대상과 결과를 설명하는가?
• 같은 상태와 행동이 화면마다 같은 용어를 사용하는가?
• 긴 한국어, 큰 숫자, fallback font에서도 layout이 유지되는가?
• caption에 중요한 조건이나 오류를 숨기지 않았는가?
• 숫자의 단위, 기간, 자리 규칙이 일관되는가?
• 캐릭터와 Glow가 텍스트의 의미와 위계를 가리지 않는가?
• zoom, keyboard, screen reader에서도 읽기 순서와 관계가 유지되는가?