3.2Typography

폰트의 종류 및 프로젝트에 적합한 폰트 선정하기

Type의 종류들

Serif는 획의 끝부분에 장식용으로 있는 삐침을 의미하는 것으로, 삐침 뿐 아니라 가로획과 세로획의 굵기 대비 등의 요소로 인해 고전적이고 elegant한 느낌이 든다.

Old Style은 구텐베르크의 활자 인쇄가 받아들이기 시작했던 1465년부터 쓰이던 폰트로 Goudy, Centaur, Jenson 등이 있다. 손글씨를 바탕으로 한 아름다운 디자인으로 높은 가독성 덕에 본문 텍스트로도 활용하기 좋다.
Transitional은 18세기 중반 ~ 19세기 초반에 나타나 Old와 Modern 사이의 다리 역할을 한 폰트이다. 굵은 획과 얇은 획의 차이가 상대적으로 큰 폰트로 대표적으로 Times New Roman 등이 있다. 역시 가독성이 높아 본문 텍스트로 활용하기 좋다.
Modern은 굵은 획과 얇은 획의 차이가 매우 큰 폰트로 Didot등이 있다. 가독성은 떨어지지만 특유의 고급스러운 느낌으로 잡지나 패션 브랜드의 타이틀 용도로 많이 사용된다.
Slab(Egyptian)은 19세기 초 산업 혁명과 함께 등장한 폰트로, 굵은 획과 얇은 획의 차이가 거의 없고 획의 끝 부분이 사각형에 가깝다. Courier 등이 대표적이다. 주로 이목을 집중시켜야 하는 포스터 등에 사용된다.

Sans는 불어로 'without'의 뜻으로, 한 마디로 장식이 없는 깔끔한 폰트들이다.

Grotesque는 19~20세기 초에 등장한 스타일로 Sans-serif의 시초이다. Serif와 비슷하게 굵은 획과 얇은 획의 차이가 있는 폰트들이지만 끝에 Serif 장식은 없다. 특유의 단단함으로 광고와 타이틀 용도로 많이 활용된다.
Neo-Grotesque는 Grotesque에 비해 훨씬 획들의 두께가 균일하고, Helvetica 같은 폰트가 대표적이다. 중립적이고 이성적인 인상을 준다. 초기에는 개성이 없고 글자들 너비가 비슷해 본문용으로 적합하지 않다는 지적을 받았으나, Helvetica Now와 같이 단점들을 보완한 폰트들이 등장하고 있다.
Humanist는 획들이 부드럽거나 특이한 개성이 들어간 듯 다소 캘리그라픽하다. Gills Sans 같은 폰트가 있다. 본문과 디스플레이 모두에 적합하다.
Geometric은 기하학적인 균일함이 느껴진다. 제목과 단문에서 적용되기에 적합하지만, 가독성과 공간 효율성이 떨어져 본문에는 잘 쓰이지 않는다.

Display는 글 본문 내용을 적는데는 쓰이기 어려울 정도로 이목을 끄는 특이한 폰트이다.

Mono Space는 글자들이 똑같은 너비를 가지고 있는 폰트들이다. 세로 열에 맞춰 나열하기에 좋으므로 단어보다도 개별 글자들이 아주 선명하게 보여 여권, 코딩 프로그램 등 특수 환경에 자주 쓰인다. 다소 technical한 느낌이 드는 폰트이다.

폰트들의 대분류에 따라 쓰임새가 다르다. 진지해야할 부분, 가독성이 높아야할 부분, 눈에 잘 띄어야할 부분 등 상황에 맞는 대분류의 폰트를 선택해서 사용하자.

구글 폰트에는 다양한 무료 폰트를 다양한 크기로 보고 다운받을 수 있게 하는 서비스를 제공한다. 다양한 폰트를 둘러보고 싶을 때 참고하기 좋다.

헤더로 쓸 폰트와 본문에 적을 폰트를 고르기 위해 여러가지 폰트를 두고 비교해본다. Lorem 플러그인을 쓰면 쉽게 예시 단어들, 문장들을 만들어낼 수 있어 대략적인 느낌을 볼 수 있다.

아래는 헤더에 쓸 폰트들(Martel, Lora, Merriweather)과 본문에 쓸 폰트들(Inter, Source Sans)을 비교한 것이다.

어울린다고 생각하는 폰트들을 찾았으면, 실제로 사용할 것처럼 컴포넌트를 만들어본다. 헤더 + 본문 또는 버튼까지 선택 후 shift + a로 Auto Layout을 지정하면 카드 컴포넌트를 쉽게 만들 수 있다.

폰트들을 최종적으로 정했고 다른 사람들과 협업하는 상황이라면, Type System에 관한 내용들을 아래와 같이 정리해두는 것이 도움이 된다.

이렇게 정리를 해 두고, 각각의 텍스트 레이어를 선택해 오른쪽 사이드바의 Text Styles 패널에서 분류를 만들어 스타일을 추가해두면 이후에 t를 눌러 텍스트 레이어를 생성하고 스타일을 쉽게 불러올 수 있다.

이렇게 만든 스타일들은 다른 피그마 파일들에서도 쓸 수 있는데, Style Manager 플러그인을 받아 스타일을 등록 후 export하면 된다.

라틴 문자의 폰트 분류 체계와 한글의 글꼴 분류 체계가 다를 것 같아 찾아보았다.

라틴 문자의 Serif에 대응되는 한글의 장식은 부리이다. 부리가 있는 글꼴을 바탕이라고 하고, 없는 글꼴을 돋움이라고 한다.

바탕체는 명조체, 돋움체는 고딕체라고 불릴 때도 있었으나 모두 잘못된 뜻의 일본에서 온 용어이기 때문에 1991년 문화체육부에서 이름을 바탕체, 돋움체로 지정했다.

이외에도 유명한 붓글씨체인 궁서체와, 돋움체와 비슷하지만 획이 꺾이는 부분이 둥글게 굴려진 모양의 굴림체등이 있다.