디자인 시스템: 서체(Typography)

디자인 시스템 부화기: 서비스 인큐베이팅의 시작

지난 시간에는 디자인 시스템 구축에 대한 시작을 알렸는데요, 다음으로 서체(Typography)입니다. 

디자인 시스템 중, 서체에 관한 디자인 시스템을 작성하는 것은 다음과 같은 단계로 진행할 수 있습니다.

---

🌐 서체 선택

• 서체 선택: 예) Pretendard 서체.
• 서체 라이선스 확인: 사용하려는 서체가 프로젝트에 적합한지 확인하세요.

---

🎨 서체 스타일(Text style)

스타일은 Font Size, Font Weight, Line Height, Letter Spacing이 있습니다.

하나씩 살펴봅시다.

🔸 Font Size(크기)

font-size: 16px;

보편적으로 사용되는 폰트의 기본 크기는 16px입니다.

폰트의 기본 크기가 16pt로 설정된 것은 인쇄물에서 시작된 전통이 디지털 환경으로 넘어오면서, 가독성과 접근성을 높이기 위해 최적화된 결과물로 볼 수 있습니다. 인쇄물의 가독성을 위해 활자 크기가 표준화되었고, 주로 10pt에서 12pt가 사용되었습니다. 활자 크기는 "포인트(pt)" 단위로 측정되며, 1pt는 약 1/72인치입니다. 디지털 미디어가 발전하면서 인쇄물의 폰트 크기 표준이 웹 디자인에 적용되었고, 디지털 화면의 가독성과 접근성을 고려해 폰트 크기가 더 커질 필요가 생겼습니다. 이를 해결하기 위해 웹 브라우저는 기본 폰트 크기를 16px로 설정했습니다.

---

🔸 Font Weight(두께)

font-weight: 400;

기본 값은 일반적으로 400입니다.

이 기본 값은 일반적인 텍스트의 가독성을 고려하여 설정된 것으로, "normal" 또는 "regular"라고도 불립니다. 

폰트 두께의 주요 값들

• 100: Thin (얇은)
• 200: Extra Light (아주 얇은)
• 300: Light (얇은)
• 400: Regular (기본, 보통)
• 500: Medium (중간)
• 600: Semi Bold (약간 굵은)
• 700: Bold (굵은)
• 800: Extra Bold (아주 굵은)
• 900: Black (매우 굵은)

이 값들은 텍스트의 가독성을 높이거나 시각적인 강조를 위해 사용됩니다. 예를 들어, 제목이나 중요한 내용은 더 굵은 폰트를 사용하고, 본문 텍스트는 기본 두께인 400을 사용하는 경우가 많습니다.

---

🔸 Line Height(행간)

적절한 line height 설정은 텍스트의 가독성을 크게 향상시킵니다. 일반적으로 1.4에서 1.6 사이의 비율이 가장 좋으며, 화면 크기와 맥락에 따라 조정할 필요가 있습니다. 폰트 크기와 줄 간격의 조화를 위해, line height는 폰트 크기의 1.5배 정도가 적절합니다.

예시) 폰트 크기가 16px이면 line height는 16px * 1.5 이므로 24px

화면 크기에 따른 조정

• 모바일 기기: 작은 화면에서는 텍스트가 더 빽빽하게 보일 수 있으므로, 모바일 기기에서는 약간 더 넓은 line height가 필요할 수 있습니다.
• 데스크탑 및 대형 화면: 기본 비율을 유지하거나 약간 줄일 수 있습니다.

 

맥락에 따른 조정

• 제목: 더 작은 line height(예: 1.2) 사용. 짧은 텍스트는 줄 간격이 좁아도 가독성이 좋습니다.
• 본문 텍스트: 일반적으로 1.4에서 1.6 사이의 line height가 권장됩니다.
• 리스트나 표: 가독성을 위해 더 넓은 line height(예: 1.6 이상)를 사용할 수 있습니다.
  

  ---

🔸 Letter Spacing(자간)

Letter spacing은 기본 설정(0)을 유지하되, 필요에 따라 글자의 형태와 구성, 시각적 균형에 맞춰 소폭 조정하여 텍스트가 읽기 쉽도록 만드는 것이 좋습니다. 특히 한글은 영어와는 다른 구조와 특징을 가지고 있어 자간 설정에 차이가 있습니다. 다양한 글꼴과 텍스트 용도에 따라 자간을 조정하여 최적의 가독성을 확보하는 것이 중요합니다.

글자의 형태와 구성

• 한글: 한글은 자음과 모음이 조합된 음절 단위의 글자입니다. 한글 한 글자는 보통 하나의 사각형 안에 자음과 모음이 조합된 형태로 구성됩니다. 이러한 구조는 글자들이 균일한 너비를 가지게 하고, 글자들 사이의 간격이 좁아도 가독성에 큰 영향을 미치지 않습니다.
• 영어: 영어는 알파벳이 좌우로 나열되는 형태로 구성됩니다. 알파벳은 각 글자가 독립적이며, 글자 모양과 크기에 따라 적절한 간격이 필요합니다. 너무 좁은 자간은 글자들이 서로 붙어 보여 가독성을 해칠 수 있습니다.

시각적 균형

• 한글: 한글은 자음과 모음이 결합되어 하나의 음절을 이루기 때문에, 글자 사이의 간격이 좁아도 시각적으로 균형을 이루기가 상대적으로 쉽습니다. 각 글자가 일정한 공간을 차지하므로, 좁은 자간이 오히려 글자들 간의 연결성을 높이고, 시각적 연속성을 제공하여 가독성을 높입니다.
• 영어: 영어는 글자마다 크기와 모양이 다르기 때문에, 자간이 너무 좁으면 글자들이 겹쳐 보이거나 붙어 보일 수 있습니다. 이는 시각적 혼란을 야기해 가독성을 떨어뜨립니다.

---

📋 서체 스타일 표 작성

계층	설명
Display	주로 마케팅 용도의 눈에 띄는 텍스트에 사용됩니다.
Headline	페이지 단위의 제목이나 주요 헤더에 사용됩니다.
Title	템플릿 단위의 제목이나 버튼 텍스트에 사용됩니다.
Body	본문 텍스트로, 읽기 쉬운 크기와 간격을 유지하여 주된 콘텐츠 전달에 사용됩니다.
Label	입력 필드나 작은 캡션처럼 사용자 인터페이스 요소의 설명을 돕는데에 사용됩니다.

🔸 서체 가이드표 작성

Web	Mobile	Web Font Size	Mobile Font Size	Font Weight	Line Height	Letter Spacing	Description
display1	displayLarge	48	40	500	120%	-2%	마케팅 용도의 큰 글자
display2	displayMedium	44	36	500	130%	-2%	마케팅 용도의 중간 글자
display3	displaySmall	40	32	500	130%	-2%	마케팅 용도의 작은 글자
h1	headlineLarge	40	30	700	130%	-2%	페이지 단위의 큰 제목
h2	headlineMedium	36	28	700	120%	-2%	페이지 단위의 중간 제목 예) 주요 섹션
h3	headlineSmall	32	26	700	120%	-2%	페이지 단위의 작은 제목 예) 탭
h4	titleLarge	28	24	500	120%	-2%	템플릿 단위의 큰 제목 예) 모달
h5	titleMedium (Base)	24	22	500	120%	-2%	템플릿 단위의 중간 제목 예)
h6	titleSmall	22	20	500	120%	-2%	템플릿 단위의 작은 제목 예) 카드 제목
p1	bodyLarge	18	18	400	150%	-2%	강조 콘텐츠 본문
p2	bodyMedium (Base)	16	16	400	150%	-2%	주요 콘텐츠 본문
p3	bodySmall	14	14	400	150%	-2%	보조 콘텐츠 본문
p4	bodyExtraSmall	12	12	400	150%	-2%	추가 정보, 가장 작은 항목
lable1	labelLarge	20	18	500	120%	-2%	버튼
lable2	labelMedium	18	16	500	120%	-2%	레이블, 입력창 예) LNB
lable3	labelSmall	16	14	500	120%	-2%	예) Caption, Chips ...

---

🧬 서체 토큰(Token)

디자인에서 서체 스타일을 정의할 때, (Font Size + Font Weight + Line Height + Letter Spacing)을 모두 묶어서 하나의 토큰이라고 여깁니다. 

 

하지만, 실제 개발 과정에서 텍스트 스타일은 더 작은 단위로 분리합니다. 예를 들어 Font Size와 Font Weight, Line Height, Letter Spacing은 각각 하나의 토큰이고, 필요에 따라 조합하여 스타일을 생성합니다. 

 

원활한 소통을 위해 '토큰'의 개념을 통일하는 것이 좋습니다. 개발에서 사용하는 Composite Token(복합 토큰)* 개념을 사용하여 디자인에서 사용되는 스타일이 복합적으로 적용된 서체를 하나의 토큰으로 통일시킵니다.

 

* Composite Token(복합 토큰)

이름이 지정된 여러 개의 자식 값으로 구성된 설계 토큰입니다. 복합 토큰은 항상 함께 적용되는 밀접하게 관련된 스타일 속성에 유용합니다. 예를 들어, 타이포그래피 스타일은 글꼴 이름, 글꼴 크기, 줄 높이 및 색상으로 구성될 수 있습니다.

---

📢 서체 네이밍(Naming)

다음시간에 계속...