[좋은 웹폰트를 찾기 위한 디자이너의 4가지 TIP]
웹디자인을 하다 보면 필연적으로 웹 타이포그래피 레퍼런스를 자주 찾게 된다.
보통은 비핸스(Behance)나 핀터레스트(Pinterest)를 통해 디자인 레퍼런스를 찾을 수 있겠지만 웹 타이포 그래피는 실제 적용 사례를 보는 게 가장 좋다.
그래서 몇 가지 리서치 팁을 공유해본다.
보통은 비핸스(Behance)나 핀터레스트(Pinterest)를 통해 디자인 레퍼런스를 찾을 수 있겠지만 웹 타이포 그래피는 실제 적용 사례를 보는 게 가장 좋다.
그래서 몇 가지 리서치 팁을 공유해본다.
1. 좋아 보이는 폰트 파헤치기
강력하게 추천하는 방법은 유려한 디자인이 잘 구현된 웹사이트를 찾아서 어떤 서체를 어떻게 적용했는지 파헤치는 것이다.
사실 모든 디자인 레퍼런스를 이렇게 찾긴 하지만 웹은 더 깊이 파헤칠 수 있다.
만약 '메일침프'의 서체와 그 활용 방식이 좋아 보인다면 메일침프의 코드를 뜯어보는 식이다.
알고 싶은 부분에 커서를 두고 오른쪽 클릭하면 '검사'라는 항목이 있다.
메일침프 웹사이트의 경우 (하늘색 형광펜 부분 참고) line-height 1에 font-size 3.375rem, font-family는 Cooper를 사용했다.
크롬 인스펙터는 폰트뿐 아니라 HTML, CSS를 포함해 어떤 코드로 짰는지 확인하고 이를 변형할 수 있는 훌륭한 도구다.
서체를 고르는 것도 중요하지만 디지털 환경에서 조판하는 것이 중요하기 때문에 자간과 행간, 크기를 얼마나 사용하는 게 좋을지 자주 확인하게 된다.
크롬 인스펙터는 폰트뿐 아니라 HTML, CSS를 포함해 어떤 코드로 짰는지 확인하고 이를 변형할 수 있는 훌륭한 도구다.
서체를 고르는 것도 중요하지만 디지털 환경에서 조판하는 것이 중요하기 때문에 자간과 행간, 크기를 얼마나 사용하는 게 좋을지 자주 확인하게 된다.
5년 전, 처음 퍼블리싱 작업을 할 때 모든 요소를 닥치는 대로 파악한 후 복사-붙여넣기 해봤다. 시간은 오래 걸리지만 직접 해보면 잊을 수 없는 좋은 공부법이다.
종종 디자이너는 자신이 만든 디자인과 개발 결과가 똑같지 않은 것에 대한 의문을 갖는데, 이것만 할 줄 알아도 프론트엔트 개발자와 소통이 편해지고, 디자인 작업물에 근접한 결과물을 얻을 수 있다.
종종 디자이너는 자신이 만든 디자인과 개발 결과가 똑같지 않은 것에 대한 의문을 갖는데, 이것만 할 줄 알아도 프론트엔트 개발자와 소통이 편해지고, 디자인 작업물에 근접한 결과물을 얻을 수 있다.
코드 확인 어렵다면 크롬 플로그인 중 하나인 'WhatFont'를 사용해도 좋다.
검사 도구에 나오는 정보는 모두 불러오기 때문에 편리하다.
특히 서체 이름만 빠르게 확인하고 싶을 때 유용한다.
그리고 디자인 에이전시의 웹사이트를 둘러보는 것도 도움된다.
자사의 포트폴리오 사이트에 아이덴티티를 녹일 수 있는 서체들을 적용했기 때문이다.
2. 함께 어울릴 폰트 찾아보기
좋아 보이는 몇 가지 폰트를 발견했다면 함께 어울릴만한 폰트를 찾는 것도 좋은 방법이다.
타이틀 서체로 그로테스크 계열 산세리프 서체를 사용했다면, 본문에 어울릴 세리프 폰트를 찾고 싶어지는 게 디자이너의 마음.
하나의 폰트를 전체적으로 사용해도 좋지만 폰트 구경하는 걸 좋아해서 그런지 어울릴 만한 다른 폰트를 찾아보고 페어링해본다.
타이틀 서체로 그로테스크 계열 산세리프 서체를 사용했다면, 본문에 어울릴 세리프 폰트를 찾고 싶어지는 게 디자이너의 마음.
하나의 폰트를 전체적으로 사용해도 좋지만 폰트 구경하는 걸 좋아해서 그런지 어울릴 만한 다른 폰트를 찾아보고 페어링해본다.
'Jeremiah shoaf'가 운영하는 웹폰트 아카이브 웹사이트로 자주 방문했던 곳이다.
타이포그래피를 특히 신경 쓴 사이트들을 큐레이션해 보여주며 폰트 페어링, 무료 폰트, 타이포그래피 팁 등 유용한 정보가 가득하다.
웹 타이포그래피 안목을 기르는 데 좋다. 뉴스레터도 받아볼 수 있다.
가장 많이 쓰이고 있는, 트렌디한 폰트를 모아서 차트로 보여주는데 꼭 췝폰트 트렌드와 100% 일치하는 건 아니지만 생각 이상으로 잘 맞는다.
해당 서체를 누르면 그 서체를 사용한 웹사이트 리스트가 뜨기 때문에 폰트 조합 비교에도 용이하다.
'Font Reach'는 수백만 개의 웹사이트를 크롤링해 서체 정보를 모아 검색할 수 있는 웹사이트다.
예를 들어 'Poppins'라는 폰트가 좋아 보여서 이 폰트를 사용한 다른 웹사이트를 찾아보고 싶다면 여기서 검색할 수 있다.
그러면 Poppins 폰트를 어떻게 써야 예쁜지 알 수 있다.
대부분 시간을 많이 들인 만큼 예쁜 것을 찾을 수 있다.
예쁜 폰트를 찾아보고 어울릴 만한 폰트를 찾아보고, 다시 그 폰트들을 예쁘게 쓴 다른 사례를 찾아보고. 무한 반복하다 보면 '어떤 폰트가 예쁜지'를 판단하는 기준이 생긴다.
무조건 예쁜 폰트를 많이 보면 좋은 결과물에 도달할 수 있다.
3. 실제로 사용해보기
사용할 서체를 골랐다면 실제로 구매해보거나 데모 버전을 사용한다.
직접 해보는것보다 좋은 방법이 없다.
구글 폰트는 각종 웹사이트 플러그인으로도 많이 나와있기 때문에 코드 작성할 줄 모르는 사람도 쉽게 쓸 수 있다.
예를 들면 워드프레스에 구글 폰트를 불러오는 플러그인이 굉장히 많아서 어떤 폰트를 고를지만 생각해두면 바로 불러다 쓸 수 있다.
요즘은 한글 폰트도 조금 구성돼있어서 활용도가 높다.
직접 해보는것보다 좋은 방법이 없다.
구글 폰트는 각종 웹사이트 플러그인으로도 많이 나와있기 때문에 코드 작성할 줄 모르는 사람도 쉽게 쓸 수 있다.
예를 들면 워드프레스에 구글 폰트를 불러오는 플러그인이 굉장히 많아서 어떤 폰트를 고를지만 생각해두면 바로 불러다 쓸 수 있다.
요즘은 한글 폰트도 조금 구성돼있어서 활용도가 높다.
'마이폰트'는 학부 시절부터 봤던 사이트로 폰트 양 자체가 많아서 리서치하기에 좋다.
대부분의 폰트 회사가 입점해있어 여러 사이트를 비교하지 않아도 되는 장점이 있다.
서체는 그 서체를 만든 사람이 잘 안다.
서체 디자이너는 자신이 만든 서체를 언제 어떻게 써야 가장 예쁜지 알고 있기에 사용하기 전에 'Presentation' 이미지를 살펴보고 어떤 weight 조합이 적합할지 확인해보자.
사실 어도비의 'Typekit'도 양이 많긴 하지만 '폰트가 가장 많이 모여있는 곳'이라는 인식이 퍼져있어 그런지 계속 '마이폰트'를 쓰게 된다.
마이폰트 내에서도 'Monotype'과 같은 대형 폰트 제작사의 경우 멤버십을 제공하고 있다.
마이폰트 내에서도 'Monotype'과 같은 대형 폰트 제작사의 경우 멤버십을 제공하고 있다.
4. 웹사이트를 큐레이션 한 웹사이트 둘러보기
sitesee
https://sitesee.co
https://sitesee.co
좋은 웹 폰트를 찾으려면 좋은 웹사이트를 봐야 한다.
이미 위에서 다 언급한 내용이지만 차별화된 웹사이트를 둘러보는 것이 웹폰트 트렌드를 익히기에 가장 좋다.
'httpster'나 'sitesee'처럼 웹사이트를 큐레이션해 소개해주는 곳들을 종종 들어가 보면서 너무 안전한 방향으로만 디자인하고 있지는 않은지, 지나치게 정제된 서체만 사용하고 있진 않은지 생각해보자.
이미 위에서 다 언급한 내용이지만 차별화된 웹사이트를 둘러보는 것이 웹폰트 트렌드를 익히기에 가장 좋다.
'httpster'나 'sitesee'처럼 웹사이트를 큐레이션해 소개해주는 곳들을 종종 들어가 보면서 너무 안전한 방향으로만 디자인하고 있지는 않은지, 지나치게 정제된 서체만 사용하고 있진 않은지 생각해보자.
참조 크레딧
(출처 - 디지털 인사이트 vol.249 UX CULUMN 19-21P)
감사합니다.