인터페이스 타이포그래피

1) 제품에서 타이포그래피의 역할

• 스캔 속도를 높이고인지 부하를 줄입니다
• 계층 구조를 형성하고 상태를 탐색하는 데 도움이됩니다
• 변환 (CTA, 양식) 을 증가시키고 오류를 줄입니다
• 인터페이스에 액세스 할 수 있고 현지화에 저항력이 있습니

2) 기본 매개 변수

핀 (본문): 데스크톱의 경우 16-18 px, 모바일의 경우 15-16 px.
선 높이: 1. 45–1. 텍스트는 6, 1입니다. 2–1. 제목은 35.
줄 길이 (측정): 45-80 자; 사이드 바에서-36-60.
추적: 일반 텍스트의 경우 0-1%; 캡슐 용 - + 2-4%.
대비 (WCAG) -일반 텍스트 5:1, 거친/지방이 3:1.
등록: 영구적 인 모든 CAPS를 피하십시오. 태그/칩에 사용하고 추적을 보상하십시오.

3) 계층 및 크기 척도

8-pt grid + typographic scale의 모듈 식 접근 방식을 권장합니다.

• 디스플레이: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• 바디/L: 18/28 (1. 55)
• 바디/M: 16/26 (1. 55)
• 몸/S: 14/22 (1. 5)
• 캡션: 12/18 (1. 5)
• 모노/UI: 12-14/18-20

• 인접 레벨 사이-눈에 띄는 단계 (최소 12-16%).
• 계층 구조는 크기, 무게, 리딩, 색상 (대비를 고려하여) 및 인접 블록까지의 거리의 조합으로 구축됩니다.

4) 캡 높이, 기준 및 광학

요소를 헤더의 캡 높이에 정렬합니다 (아이콘에 편리함).
4/8-pt 텍스트 기준선을 유지하십시오. 리듬조차도 쉽게 읽을 수 있습니다.
광학 반입: 블록 위의 제목이 아래보다 큽니다 (예: 위의 + 4-8 px).

5) 스타일 및 가변 글꼴

최소 세트: 일반, 중간, SemiBold (굵은 글씨).
UI에서 Ultra-Light/Thin을 사용하지 마십시오.

• 몸: 420-470 (광학적으로 400보다 평평합니다).
• UI 레이블: 500-550.
• 헤더/CTA: 600-650.
• 크기가 줄어들면 무게가 약간 증가합니다 (보상).
• UI 번호의 장식 합자 사용하지 않기; 표준 키릴 자모/라틴 합자를 보유하십시오.

6) 숫자, 표 및 날짜

금액, 계수, 타이머, 등급에 대한 표 형식을 포함하십시오.
+/- 부호는 항상 보이고 충분한 대비로 보입니다. 색상 (아이콘/화살표/굵게 표시) 뿐만 아니라 음수를 강조하십시오.
화폐 값의 경우 좁은 공간을 얇은 비트 분리기 (또는 로컬 형식) 로 사용하십시오.
표에서 소수점에 정렬하십시오. 모노 열 - 단일 글꼴.
축 서명 그래프는 12 px (모바일) 및 3-14 px (데스크톱), LH 1입니다. 3; 전설은 4 이상입니다. 5: 1을 배경으로.

7) 양식, 입력, 메시지

레이블 12-14 px, LH 1. 3–1. 4, 일반 또는 중간.
장소 홀더는 "회색 공기" 가되어서는 안됩니다. 목표는 배경에 3: 1이며 텍스트와 시각적으로 구별됩니다.
오류/성공/도움말 텍스트 12-14 px; 색상 (아이콘/텍스트) 에만 의존하지 마십시오.

8) 어두운/빛 테마

어두운 주제에서 # 000의 # FFF를 피하십시오. 배경을 L λ0으로 올리십시오. 14–0. 18로 텍스트를 낮추십시오. 9-눈부심이 적습니다.
어둠 속에서 선두는 + 0이 될 수 있습니다. 편안함을 위해 위의 05.
어두운 링크/악센트-채도를 줄이고 가벼움을 0으로 증가시킵니다. 02–0. 04.

9) 현지화 및 다국어

키릴 자모/라틴어/그리스어, 악센트 표시 및 통화 지원이있는 가족을 선택하십시오.
RTL: 거울 아이콘/정렬이지만 숫자와 라틴어는 아닙니다. 테스트 전송.
긴 컨텐츠 영역에만 포함하도록 자동 전송 ('하이픈: 자동'); UI 버튼에서-전송 금지.
터키어/아제르바이잔 어의 경우 "²/ı" 양식을 확인하십시오.
그루지야 어와 태국어의 경우 기본 핀을 1px 올립니다 (스타일 기능).

10) 가용성 (A11y)

텍스트 대비: § 2를 참조하십시오.
초점 스타일-색상없이 보이는 밑줄, 테두리, 그림자, 오프셋.
글꼴 크기는 체계적으로 조정됩니다 (OS 텍스트 크기 지원).
색상/무게를 통해서만 의미를 인코딩하지 마십시오. 명시 적 캡션과 아이콘을 추가하십시오.

11) 글꼴 로딩 및 성능

목표: 막힘을 최소화하려면 예측 가능하고 안정적인 CLS를 제공하십시오.

하위 집합: 라틴어, 키릴 자모, 숫자/기호-개별 파일.
형식: 'woff2' (메인), 'woff' 를 폴백으로 사용합니다.
'글꼴 표시: 교환' (또는 중등 가족을위한 '선택적').

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

3-4 정적 대신 가변 글꼴-종종 무게가 더 수익성이 높습니다.
예산: 임계 경로에 대해 총 150-200 KB입니다 (gzip/brotli 후).
렌더: 텍스트에서 여러 그림자/마스크를 피하십시오. 드물게 사용 시스템 효과.

12) 타이포그래피 토큰 (디자인 시스템)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) 레이아웃과 리듬

8pt 수직 모듈; 단락 = 1 배 기본 단계 사이의 거리.
목록-마커의 들여 쓰기는 텍스트의 기준선과 정렬됩니다.
버튼 및 필드-하이츠는베이스 라인 그리드 라인의 배수입니다 (예: 40/48/56 px).

14) iGaming의 특이성 (워크샵)

승률/승률, 밸런스, 타이머-임계 열로 표시된 표로 된 숫자를 사용하십시오.
리더/등급: 카테고리별로 레벨링, 통합 통화 형식, 명시 적으로 "인증되었습니다".
중요한 알림 (18 +, 한계, 위험) -대조적으로 최소 AAA는 모든 CAPS를 사용하지 않습니다.
프로모션 배너: 대비 제어 슬립/오버레이에서만 텍스트.

15) 반 패턴

작은 핀에 가벼운/얇은.
대비 확인없이 색상 배경에 회색 텍스트.
"아름다움을위한" 두 개 이상의 헤드셋.
긴 선 (> 90 자) 및 밀도가 높은 선 높이 <1. 35.
테이블/" 점프 "합계의 비례 폭 수.
버튼/라벨을 누르십시오.

16) 검토 점검표

읽기 가능성

• Bodysuits 16-18 px; LH 제곱 1. 45.
• 문자열 길이는 45-80 자입니다.

계층

• 증분 12% 이상 확장; 그리드와 일치하는 indents.

숫자/테이블

• 합계/계수에 대한 표식 숫자; 소수점 정렬.

가용성

• WCAG 대비 달성; 초점 스타일은 색상없이 볼 수 있습니다

성능

• 서브 세트/woff2; '글꼴 표시: 교환'; 예산 약 200KB입니다.

현지화

• 키릴 자모/라틴/RTL 지원; 하이픈/분음 부호를 확인했습니다.

17) A/B 및 메트릭

테스트: 바디 λ1 px 핀, 헤딩 스케일 피치, CTA 무게, 리딩.
측정: 읽기 시간, 스크롤 깊이, CTR CTA, 양식 오류, CLS (텍스트 안정성).

간략한 요약

타이포그래피는 인터페이스의 골격입니다. 예측 가능한 스케일을 설정하고, 대비와 리듬을 유지하고, 가변 글꼴과 표 숫자를 사용하고로드를 최적화하십시오 그런 다음 UI를 빠르게 읽고 안정적으로 작동하며 테마와 언어로 확장합니다.