디자인 시스템 구축_폰트스타일 가이드

sususu ·2024년 9월 5일

디자인시스템구축 타이포그래피 폰트스타일가이드

디자인 가이드

목록 보기

4/5

폰트 스타일 가이드란?

: 반복되는 텍스트 요소들을 규격화 해놓은 문서

제목,본문,캡션 등 페이지마다 반복되는 공통 요소로 규격화하는 것이 좋다.
폰트스타일을 정의하여 가이드로 작성하면 디자인~개발과정의 불필요한 낭비를 줄일 수 있다.

타이포그래피의 정의

타이포그래피란 활자를 의미하는 Typo와 그림,도표 등의 Graphy의 합성어로 인터페이스에서 활자체를 그려내어 언어를 읽을 수 있게 만드는 기법과 기술이다.
⇒ 가독성을 높일 수 있을 뿐만 아니라 브랜드 정체성을 표현할 수 있다.

타이포그래피의 요소

글꼴 (font)

⇒ 세리프와 산 세리프

세리프 Serif

: 펜으로 글자를 쓸 때 획의 시작이나 끝에 돌출된 형태가 있는 글꼴. 한글에서 명조,바탕체가 속함.

산 세리프 Sans serif

: 세리프가 없다는 뜻으로 글자 획의 굵기가 일정하고 끝부분에 장식없이 반듯한 형태. 한글에서 고딕,돋움체가 속함.

굵기 (weight) : 서체의 두께

: 다양한 시각적 위계를 표현하기 위해 중요도에 따라 굵기를 다르게 사용함.
: Light~Regular~Medium~Bold~Black 등의 사이즈가 있음.
** 2개에서 최대 3개까지의 굵기만 사용하는 것이 권장되며 Black의 경우 서체에 따라 읽기 어려워질 수 있어 지양함.

행간 (line-height) & 자간 (letter-space)

행간 = 줄 간격
: 보통 글자 크기* 1.6을 권장.
자간 = 글자와 글자 사이의 간격
** 항상 4배수의 간격으로 값을 설정해준다.

정렬 (text-alignment)

: 정렬의 종류는 4~5가지 정도이지만, 왼쪽정렬을 사용하는 것이 보편적

왼쪽 정렬 :
가운데 정렬: 제목이나 짧은 단락 등에 사용하여 시각적으로 특정 콘텐츠를 강조하는데 사용함.
오른쪽 정렬: 테이블, 카드 또는 리스트의 숫자나 시간 등을 오른쪽에 맞추어 수의 많고 적음을 한눈에 비교하기 쉽게 배치해줌.

타이포그래피의 하이어라키

하이어라키(=계층 구조)로 구성요소를 "차등적으로" 나누어서 배치한다.
제목(1~6단계) : H1~H6까지 중요도에 따라 배열된다.
본문: Paragraph 서체로 제목에 대한 보조적인 설명이나 콘텐츠를 담는데 사용된다.

타이포그래피 개선을 위한 Tip

서체는 1개만 사용하기

: 제목 텍스트 또는 주제는 본문이 다르게 용하여 서로 구분되게 하는 것은 OK. 하지만 본문의 대부분은 하나의 서체만을 사용하게 하는 것이 집중력을 떨어 트리지 않고 콘텐츠를 보다 편히 읽을 수 있게 해준다.
font-weight의 무게는 최대 3개까지만 사용, Black과 Ultralight는 피하기
본문 텍스트에 16pt 사용하기

: 12px 이하의 글꼴 크기는 사용하지 말 것과 시스템 글꼴의 사용은 안전하다.
가독성이 떨어지는 것 같을 때 행간과 자간 수정해보기