기초FOX · Typography

글자

Pretendard 한 가지 글꼴로, 11에서 28까지 일곱 단계 크기만 써요. 굵기는 300에서 600까지만 쓰고, 줄 높이는 글자 크기의 135% 이상이에요.

글자 스타일

이름은 nm-text-{크기}-{굵기}예요. 크기, 줄 높이, 굵기가 한 묶음이라 따로 고르지 않아요.

NM-TEXT

nm-text-11-regular11 / 16 / 400가장 작은 글자예요

nm-text-11-semibold11 / 16 / 600가장 작은 글자예요

nm-text-13-regular13 / 20 / 400보조 설명과 표 안의 글자

nm-text-13-semibold13 / 20 / 600보조 설명과 표 안의 글자

nm-text-15-regular15 / 22 / 400본문은 이 크기로 써요

nm-text-15-semibold15 / 22 / 600본문은 이 크기로 써요

nm-text-17-regular17 / 24 / 400카드 제목, 큰 본문

nm-text-17-semibold17 / 24 / 600카드 제목, 큰 본문

nm-text-20-regular20 / 28 / 400화면 안 작은 제목

nm-text-20-semibold20 / 28 / 600화면 안 작은 제목

nm-text-24-regular24 / 32 / 400화면 제목

nm-text-24-semibold24 / 32 / 600화면 제목

nm-text-28-semibold28 / 38 / 600가장 큰 화면 제목

표시는 크기 / 줄 높이 / 굵기 순서예요. 28은 굵은 글자(600)만 있어요.

FOX의 text-{크기}-{굵기}가 Nemo에서는 nm-text-{크기}-{굵기}예요. 앞에 nm-만 붙이면 돼요.

FOX MAPPING

text-15-regular → nm-text-15-regular

FOX   text-15-regular   ->  Nemo  nm-text-15-regular
FOX   text-20-semibold  ->  Nemo  nm-text-20-semibold

36, 46, 56은 PC 화면의 큰 제목에만 써요. 일반 화면에서는 28 이하만 써요.

DISPLAY

nm-display-36 (36 / 48)

오늘의 소식

nm-display-46 (46 / 60)

오늘의 소식

nm-display-56 (56 / 72)

오늘의 소식

300, 400, 500, 600만 써요. 700 이상은 쓰지 않아요. 제목과 굵은 글자는 브라우저 기본 굵기 대신 600으로 맞춰 둬요.

WEIGHT

얇게 300보통 400중간 500굵게 600

작은 영문 이름표는 nm-label, 보조 글자 색은 nm-sub와 nm-muted를 붙여요.

LABEL

Section

보조 설명이에요

힌트예요

<span class="nm-label">Section</span>
<p class="nm-sub">보조 설명</p>
<p class="nm-muted">힌트</p>