Typography

Pretendard 하나로 본문부터 60px 온도 숫자까지. 굵기 대비(400 ↔ 800/900)를 크게 벌려 현장 조명과 심사관의 A4 인쇄 모두에서 위계가 읽히게 합니다.

가Aa

Regular 400Bold 700ExtraBold 800Black 900

서체

정상 -18.4℃Regular 400 · 본문·표 셀

정상 -18.4℃Medium 500 · 사이드 항목

정상 -18.4℃Bold 700 · 라벨·배지·버튼

정상 -18.4℃ExtraBold 800 · 제목·큰 버튼

정상 -18.4℃Black 900 · 숫자(metric)

역할	스택	비고
기본 `--fna-font-family`	'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif	웹은 Pretendard 가변 웹폰트(동적 서브셋), 없으면 Noto Sans KR → 맑은 고딕. RN 은 시스템 서체(Pretendard 번들 예정)
고정폭 `--fna-font-family-mono`	ui-monospace, Consolas, 'D2Coding', monospace	화면 ID·센서 ID·코드. 숫자 정렬에는 쓰지 않는다(tabular-nums 로 충분)

Pretendard 는 Google Fonts 에 없습니다. 웹은 jsDelivr CSS 로 불러오고, 그 요청이 막힌 환경(아티팩트 뷰어 등)에서는 Google Fonts 의 Noto Sans KR 이 대신 나옵니다. 두 서체의 굵기 900이 모두 존재하도록 링크에 900을 포함하세요.

크기 단계

기본 14px. 모든 크기는 --fna-scale(기본 1, 큰글씨 1.25)을 곱합니다. 단계 밖의 크기(11.5, 13.5 …)는 만들지 않습니다.

xs · 11배지 · 표 보조줄 · 드로어 섹션 제목 — 냉동창고 A 마지막 수신 3분 전

sm · 12표 헤더 · 필드 라벨 · 캡션 — 냉동창고 A 마지막 수신 3분 전

md · 13표 셀 · 버튼 · 탭 · 모달 본문 — 냉동창고 A 마지막 수신 3분 전

base · 14웹 본문 · 입력값 — 냉동창고 A 마지막 수신 3분 전

lg · 15카드 제목 · RN 본문 — 냉동창고 A 마지막 수신 3분 전

xl · 17모달 제목 · 앱바 제목 · 큰 버튼 — 냉동창고 A

2xl · 20화면 제목 — 냉장·냉동 현황

3xl · 24시니어 시트 제목 — 결재를 제출할까요?

4xl · 28스탯 숫자 — 142건

metric · 36-18.4℃

시그니처: 큰 숫자

온도·건수·시각처럼 "지금 값"을 보여줄 때는 숫자를 화면에서 가장 크고 가장 굵게 둡니다. 단위는 0.42em 크기, 회색, 위첨자 위치. 음수 기호는 하이픈(-)이 아니라 마이너스(−, U+2212)를 쓰되 tabular 폭이 보장되는 서체에서만 씁니다.

metric — 36 (웹 기본) · 60 (시니어) · 88 (관제 대형 화면)

-18.4℃

36 · 스탯 타일

2.1℃

60 · 시니어 센서 카드

-13.8℃

88 · 관제 벽면

코드

<div style="display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end">
    <div><span class="metric" style="font-size:36px">-18.4<span class="unit">℃</span></span><div class="fna-muted">36 · 스탯 타일</div></div>
    <div><span class="metric metric--ok" style="font-size:60px">2.1<span class="unit">℃</span></span><div class="fna-muted">60 · 시니어 센서 카드</div></div>
    <div><span class="metric metric--alarm metric--xl">-13.8<span class="unit">℃</span></span><div class="fna-muted">88 · 관제 벽면</div></div>
  </div>

속성	값	이유
font-weight	900	본문 400과 최대 대비
letter-spacing	−0.035em	큰 크기에서 숫자 사이가 벌어져 보이는 것을 보정
font-variant-numeric	tabular-nums	값이 바뀌어도 폭이 흔들리지 않는다(관제 화면 갱신)
line-height	1	카드 안에서 라벨과 붙여 배치
색	text 기본 · 상태는 `*-text` 단계	글자이므로 4.5:1 단계
단위	0.42em · 700 · text-muted · vertical-align .22em	단위가 숫자와 경쟁하지 않게

프리셋

프리셋	크기	굵기	행간	쓰임
title	2xl 20	800	1.2	화면 제목
subtitle	xl 17	700	1.2	절 제목·모달 제목
label	lg 15	700	1.45	필드 라벨(RN)·카드 제목
body	lg 15 (RN) · base 14 (웹)	400	1.45	본문
button	xl 17	800	1.2	큰 버튼(RN)
caption	md 13	400	1.45	보조 설명
metric	36	900	1.2	큰 숫자

시니어(큰글씨) 체계

웹은 <html data-scale="large"> 로 전체 ×1.25. RN 시니어 모드는 별도 절대값 체계를 씁니다(작업자 화면은 정보량이 적어 더 크게 갈 수 있다).

역할	웹 기본	웹 큰글씨(×1.25)	RN 시니어
제목	20	25	28
소제목	17	21	24
본문	14	17.5	22
라벨	12	15	20
작은 글자	11	13.75	18
버튼	13 / 17(lg)	16 / 21	24
큰 숫자	36	45	60 (작은 카드 44)

Do · Don't

냉장·냉동 현황

2026-09-29 (화) 12:40 기준 · 센서 12개

Do 굵기로 위계, 크기는 단계 안에서

냉장·냉동 현황

2026-09-29 (화) 12:40 기준 · 센서 12개

Don't 크기만으로 위계 · 임의 크기(13.5, 15.5)

냉동 A	-18.4
냉동 B	-20.1
냉장 1	2.0

Do 숫자는 tabular-nums, 소수 자릿수 통일

냉동 A	-18.4
냉동 B	-20.12
냉장 1	2

Don't 자릿수 제각각 · 비례 숫자

접근성

본문 최소 14px(웹)·15px(RN). 11px(xs)는 배지·보조줄에만, 문장에는 쓰지 않는다.
줄 길이 45~75자. 본문 컨테이너 최대 720px(--fna-bp-content-max-width).
큰글씨 모드에서 레이아웃이 깨지지 않도록 컴포넌트 패딩은 em, 높이는 min-height 로.
글자를 이미지로 만들지 않는다(로고 제외). 인쇄에서도 텍스트로 남아 검색·복사가 된다.

코드

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap">

.metric{font-size:var(--fna-font-size-metric);font-weight:var(--fna-font-weight-black);
        letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.metric .unit{font-size:.42em;font-weight:700;color:var(--fna-text-muted);vertical-align:.22em}

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 tokens.json font.* · senior.*Foundations · FNA 디자인 시스템 v1.0