SUIT; 수트
S―유저―인터페이스―텍스트
사용자 환경에 영향받지 않는 일관된 시각적 경험을 제공하기 위해 많은 Product에서 본고딕―Noto Sans를 선택합니다.
하지만 한글과 어울리지 않는 Grotesque 계열의 영문자와 숫자, 어긋나 있는 중앙 정렬, 넓은 자간 같은 문제들이 있습니다.디자이너는 완성도를 위해 많은 노력을 기울이지만 개발자와의 언어 차이, 인력과 시간 부족 등 다양한 요인에 의해 그 노력을 온전히 반영하는 과정은 쉽지 않습니다.
SUIT―수트는 반복되는 노력을 기울이지 않아도 완성도 높은 형태를 유지하며, 소모적인 Communication도 줄일 수 있도록 제작한 UI 폰트입니다.
Vertical Metrics
글자의 위, 아래 빈 공간이 같도록 했습니다. Button 속 글자 또는 Icon과 글자가 나란히 있는 경우에 가운데를 맞추기 위해 위아래 여백을 서로 다르게 하지 않아도 됩니다.
중앙 정렬
구두점과 괄호의 기본 정렬을 한글에 맞춰 조정하고 한글과 서로 어우러지도록 시각적 부피감을 조절했습니다.
줄간격
UI에서 주로 사용하는 글자 크기 18, 16. 그리고 13, 11에서 줄간격 기본 값이 짝수입니다.
자간
Figma에서 본고딕의 자간을 -4.8%로 설정한 상태와 유사하도록 기본 자간을 조정했습니다.
UI 요소로 해석한 글자
Metaphor로 흔히 활용되는 글자의 경우 그 자체를 UI 요소로 활용할 수 있도록 일부 고려되었습니다.
글자 크기
Apple SD Gothic Neo 대비 크기가 큰 본고딕 한글을 97% 수준으로 줄여 같은 공간 안에 비슷한 수의 글자가 채워지도록 했습니다.
다양한 굵기와 Variable 포맷 지원
총 9종의 굵기를 지원합니다. 또한 Variable 포맷도 지원하여 Target Device가 명확하다면 굵기를 자유롭게 사용할 수 있습니다.
용량 최적화
SUIT―수트는 시작부터 Embedding 및 웹폰트를 목적으로 만들어졌습니다. 완성형 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/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css" rel="stylesheet">
<style>
body {font-family: 'SUIT', sans-serif;}
</style>
Variable
<link href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css" rel="stylesheet">
<style>
body {font-family: 'SUIT Variable', sans-serif;}
</style>
Companies using SUIT for UI
For other purposes
License
SUIT―수트는 Open Source입니다. SIL OFL에 따라 상업적인 목적을 포함하여 자유롭게 사용할 수 있습니다. 또한 향후 License 변경으로 인한 분쟁의 가능성이 없습니다. 한글 Typeface는 본고딕을 기반으로 합니다.
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
- ㎥
- ㎡