SUIT; 수트
S―유저―인터페이스―텍스트
많은 프로덕트에서 다양한 사용자의 환경과 무관하게 동일한 시각적 경험을 제공하기 위해 본고딕―노토산스를 선택합니다.
하지만 한글과 어울리지 않는 그로테스크 계열의 라틴 알파벳과 숫자, 어긋나 있는 버티컬 매트릭스, 넓은 자간 같은 이슈들이 있습니다.디자이너는 완성도를 위해 많은 노력을 기울이지만 개발자와의 언어 차이, 출시 스케줄, 리소스 부족 등 여러 가지 요인에 의해 그 노력을 프로덕트에 반영하는 과정은 쉽지 않습니다.
SUIT―수트는 반복되는 노력을 기울이지 않아도 완성도 높은 형태를 유지하며, 소모적인 커뮤니케이션도 줄일 수 있도록 제작한 UI 본문 전용 폰트입니다.
지오메트릭 라틴 알파벳과 숫자
한국어로 제공되는 프로덕트에서 라틴 알파벳과 숫자는 짧은 호흡으로 사용되기에 한글의 기하학적 형태와 조화를 이루는 지오메트릭 계열의 오리지널 타입페이스 232자가 포함됩니다.
버티컬 매트릭스
글자의 위, 아래 빈 공간이 같도록 했습니다. 버튼 속의 글자 혹은 아이콘과 글자가 나란히 있을 때 가운데를 맞추기 위해 위아래 여백을 서로 다르게 하지 않아도 됩니다.
버티컬 얼라인
구두점과 괄호 등의 버티컬 얼라인을 한글에 맞춰 조정하고 한글과 서로 어우러지도록 부피감을 조절했습니다.
라인 하이트
UI 본문에서 주로 사용하는 글자 크기 18, 16. 그리고 13, 11에서 라인 하이트 기본 값이 짝수입니다. 위아래 여백이 같게 Contained 했을 때 전체 높이를 짝수로 할 수 있습니다.
레터 스페이싱
사이드베어링을 조정하여 본고딕의 레터 스페이싱을 -4.8%로 설정한 상태와 유사하도록 기본 레터 스페이싱을 조정했습니다.
UI 요소로 해석한 글리프
심볼 중 그래픽 메타포로 흔히 활용되는 글자의 경우 그 자체를 UI 요소로 활용 할 수 있도록 고려 되었습니다.
크기 조정
동일 글자크기에서 “Apple SD Gothic Neo” 대비 살짝 큰 본고딕 한글을 97% 축소하여 같은 공간 안에 비슷한 글자가 채워지도록 조정하였습니다.
다양한 굵기와 Variable 포맷 지원
본고딕에서 추출된 2개의 마스터를 바탕으로 총 9종의 굵기를 지원합니다. 또한 Variable 포맷도 지원하여 타겟 디바이스가 명확하다면 자유로운 굵기로 사용 할 수 있습니다.
용량 최적화
SUIT―수트는 시작부터 임베딩 및 웹폰트를 목적으로 만들어졌습니다. KS × 1001 완성형 2,350자와 외래어 및 신조어 표현을 위한 318자만 포함하여 woff2의 경우 200kb보다 작습니다.
Font Features
모노스페이스 숫자 tnum
자릿수의 정확한 표현을 위해 모노스페이스 글리프를 별도로 두었습니다. 모노스페이스는 모든 굵기에서 같은 자폭을 가집니다.
대체 숫자 ss01
다른 형태의 숫자를 사용 할 수 있습니다.
명확한 표현을 위한 글자 ss17
영문과 숫자가 혼합된 시리얼번호 등을 표현 할 때 명확한 식별을 위해 변형된 글리프를 제공합니다.
대체 화살표 ss18
샤프트가 있는 일반적인 스타일의 화살표를 사용 할 수 있습니다.
Variable
Weight
어제보다 4℃ 높아요 · Gift 카드 등록하기 · 최대 20% 캐시백 · 61,800P 적립 · QR 결제
Webfonts
Static
<link href="https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css" rel="stylesheet">
<style>
body {font-family: 'SUIT', sans-serif;}
</style>
Variable
<link href="https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css" rel="stylesheet">
<style>
body {font-family: 'SUIT Variable', sans-serif;}
</style>
Organizations using SUIT
License
SUIT―수트는 오픈소스입니다. SIL Open Font License에 따라 개인 또는 기업이 영리적, 비영리적 목적으로 자유롭게 사용할 수 있습니다. 단, SUIT를 단독 판매하면 안 됩니다. 한글 타입페이스는 본고딕을 기반으로 합니다. SUIT에 대한 제안 및 문의는 이메일로 보내주세요.
Glyphs
×- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- O
- P
- Q
- R
- S
- T
- U
- V
- W
- X
- Y
- Z
- a
- b
- c
- d
- e
- f
- g
- h
- i
- j
- k
- l
- m
- n
- o
- p
- q
- r
- s
- t
- u
- v
- w
- x
- y
- z
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- ①
- ②
- ③
- ④
- ⑤
- ⑥
- ⑦
- ⑧
- ⑨
- ⑩
- ⑪
- ⑫
- ⑬
- ⑭
- ⑮
- ¹
- ²
- ³
- ⁴
- ₁
- ₂
- ₃
- ₄
- `
- .
- ,
- :
- ;
- …
- !
- ?
- ·
- *
- #
- ※
- /
- \
- ‥
- -
- ―
- _
- (
- )
- {
- }
- [
- ]
- 〈
- 〉
- 【
- 】
- 「
- 」
- 《
- 》
- 〔
- 〕
- 『
- 』
- “
- ”
- ‘
- ’
- "
- '
- ㈜
- ㉼
- ♩
- ♪
- ♬
- ★
- ☆
- ☎
- ☏
- ☜
- ☝
- ☞
- ☟
- ♠
- ♡
- ♣
- ♥
- ⚠
- ✓
- @
- &
- ¶
- ©
- ®
- ™
- °
- ′
- ″
- |
- ℃
- ℉
- Ⓝ
- ⓘ
- $
- €
- ₩
- ¥
- ￦
- ∙
- +
- ×
- ÷
- =
- >
- <
- ±
- ≈
- ~
- ^
- %
- ⊖
- ⊗
- ⊕
- ↑
- ↗
- →
- ↘
- ↓
- ↙
- ←
- ↖
- ↔
- ↕
- ●
- ○
- ◐
- ◑
- ◎
- ◆
- ◇
- ◈
- ■
- □
- ▣
- ▲
- ▶
- ▼
- ◀
- △
- ▷
- ▽
- ◁
- ↑
- →
- ↓
- ←
- I
- l
- 1
- 0
- 0
- 3
- 4