좋은 웹 폰트 찾기
내가 웹 폰트와 타이포그래피 레퍼런스를 찾는 방법
웹사이트를 큐레이션한 웹사이트 둘러보기
정말 자주 방문했다. 타이포그래피를 특히 신경 쓴 사이트들을 큐레이션 하여 보여주고, 폰트 페어링, 무료 폰트, 타이포그래피 팁 등 유용한 정보가 가득하다. 웹 타이포그래피 안목을 기르는데 더없이 좋은 사이트다. 뉴스레터로도 받아볼 수도 있다.
웹디자인을 하다보면 필연적으로 웹 타이포그래피 레퍼런스를 자주 찾게 된다. 보통은 비핸스나 핀터레스트 등을 통해서 디자인 레퍼런스를 찾아볼 수 있겠지만 웹 타이포그래피는 실제 적용된 사례를 보는 것이 가장 좋기 때문에 기존 방법으로는 참고하기 어렵다. 그래서 내가 어떻게 웹 폰트를 리서치 해왔는지 공유해보려한다.
1. 좋아보이는 것들 파헤치기
가장 추천하는 방법은 유려한 디자인이 잘 구현된 웹사이트를 찾아서 어떤 서체를 어떻게 적용했는지 파헤치는 것이다. 사실 모든 디자인 레퍼런스를 이런 식으로 찾긴 하지만 웹은 더 구체적으로 정확하게 파헤질 수 있다. 예를 들어 메일침프의 서체와 그 활용 방식이 좋아보인다면 메일침프의 코드를 뜯어보는 것이다.
Chrome inspector(사이트 검사도구)는 기본 중의 기본, 정석 중의 정석이다. 알고 싶은 부분에 커서를 두고 오른쪽 클릭하면 “검사”라는 항목이 있다.
메일침프 웹사이트의 경우 line-height 1에 font-size 3.375rem, font-family: Cooper를 사용했다는 것을 알 수 있다. 크롬 인스펙터는 폰트 뿐 아니라 HTML, CSS를 포함해 어떤 식으로 코드가 짜였는지 확인하고 변형해볼 수 있는 훌륭한 도구다. 서체를 고르는 것도 중요하지만 디지털 환경에서 잘 조판하는 것이 더 중요하기 때문에 어떤 자간과 행간, 크기를 사용하는 게 좋을지 자주 보게 되더라. 5년 전 처음 퍼블리싱 작업을 할 때 모든 요소를 노가다로 파악한 후 복붙해봤다. 시간은 진짜 오래 걸리지만 직접 해보면 잊어버릴 수 없는 좋은 공부법이다. 종종 디자이너들은 내 디자인과 개발 결과가 왜 똑같지 않은지에 대해 의문을 갖는데, 이것만 할 줄 알아도 프론트엔드 개발자와 소통이 편해지고, 최대한 디자인 작업물에 근접한 결과물에 도달할 수 있다.
코드 보는 게 어렵다면 크롬 플러그인 중 하나인 WhatFont를 사용해도 된다. 검사도구에 나오는 왠만한 정보는 다 불러와서 편리하다. 특히 서체 이름만 빨리 확인하고 싶을 때 유용하다.
플러그인을 켜고 이렇게 갖다 대기만 하면 서체 이름이 뜬다.보통 디지털 프로덕트, 혹은 디지털 서비스를 소개하는 웹사이트들은 웹디자인이 잘 되어 있다. 당연히 온라인 비지니스를 하니까 웹사이트를 잘 만들어야 할 것이다. 메일침프 외에도 Intercom, Stripe, Kickstarter와 같은 온라인 비지니스의 홈페이지를 참고해보거나, Figma, Framer, Protopie 등 디자이너들이 사용하는 툴들의 홈페이지를 참고해보거나 디자인 에이전시의 사이트를 둘러보면 큰 도움이 된다. 업 자체가 ‘디자인'이기 때문에 본인들의 포트폴리오 사이트에 그들만의 아이덴티티를 녹일 수 있는 서체들을 적용해놓기 때문이다.
Mother Design에 적용된 서체 : NBInternational
Redantler에 적용된 서체 : Work Sans
Pentagram에 적용된 서체 : Neue Haas Grotesk위 사례들을 보며, 내가 만들 웹사이트와 가장 유사한 분야의 사이트들도 많이 참고해보자.
2. 함께 어울릴 폰트 찾아보기
몇 가지 좋아보이는 폰트를 발견했다면 함께 어울릴만한 폰트를 찾는 것도 좋은 방법이다. 이를 테면 타이틀 서체로 그로테스크 계열 산세리프 서체를 사용했다면 본문으로 가독성 높은 세리프 폰트를 찾고 싶어지는 게 디자이너의 마음... 폰트 하나로 기깔나게 해도 좋지만 나는 폰트 구경하는 걸 너무 좋아해서 그런지 어울릴 만한 다른 폰트를 찾아보고 페어링해본다.
Typewolf https://www.typewolf.com/
Jeremiah shoaf가 운영하는 웹폰트 아카이브 사이트로, 정말 자주 방문했다. 타이포그래피를 특히 신경 쓴 사이트들을 큐레이션 하여 보여주고, 폰트 페어링, 무료 폰트, 타이포그래피 팁 등 유용한 정보가 가득하다. 웹 타이포그래피 안목을 기르는데 더없이 좋은 사이트다. 뉴스레터로도 받아볼 수도 있다.
가장 많이 쓰이고 있는, 트렌디한 폰트를 모아서 차트로 보여주는데 이게 꼭 웹폰트 트렌드와 100% 일치하는 건 아니지만 꽤나 잘 맞는다. 해당 서체를 누르면 그 서체가 사용된 웹사이트 리스트가 뜨기 때문에 폰트 조합들을 비교하기에도 용이하다. (내가 생각하기에 가장 좋은 부분) 나도 한글 폰트로 이런 아카이브 사이트를 만들어보고 싶다.
FontReach https://www.fontreach.com/
Font Reach는 수 백만개의 웹사이트를 크롤링해 서체 정보를 모아 검색해볼 수 있게한 사이트다. 예를 들어 Poppins라는 폰트가 좋아보여서 이 폰트를 사용한 다른 웹사이트를 찾아보고 싶다면 여기에 검색해볼 수 있다. 그러면 Poppins 폰트를 어떻게 써야 예쁜지 알아볼 수 있다. 이쯤되면 눈치챘겠지만 대부분 시간을 아주 많이 들이면 예쁜 것을 찾을 수 있다. 예쁜 거 찾아보고 어울릴 만한 거 찾아보고, 다시 그 폰트들을 예쁘게 쓴 다른 사례를 찾아보고. 무한반복하다보면 '뭐가 예쁜지'를 판단하는 기준이 생긴다. 무조건 예쁜 걸 많이 보면 좋은 결과물에 도달할 수 있다.
3. 실제로 사용해보기
사용할 서체를 골랐다면 실제로 구매해보거나 데모 버전을 사용해본다. 직접 해보는 것보다 좋은 방법은 없다. 구글 폰트는 각종 웹사이트 플러그인으로도 많이 나와있기 때문에 코드 작성할 줄 모르는 사람들도 쉽게 쓸 수 있다. 예를 들면 워드프레스에 구글 폰트를 불러오는 플러그인이 굉장히 많아서 어떤 폰트 고를지만 생각해두면 바로바로 불러다 쓸 수 있다. 요새는 한글 폰트도 조금 들어와있어서 더욱 활용도가 높다.
구글 폰트 https://fonts.google.com/
카테고리별로, 두께, 가로폭, 언어별로 검색해볼 수 있어서 좋고 컬러와 사이즈 등을 자유롭게 테스트해볼 수 있다. 나는 자족구성이 많은 서체, 타이틀용 서체, 스크립트 서체 등을 검색해보곤 하는데, 워낙 사이트 구축이 미려하게 잘 되어 있어서 들어가는 것만으로도 기분이 좋아진다.
Myfont http://www.myfonts.com/
마이폰트는 학부 시절부터 봤던 사이트로 폰트 양 자체가 많아서 리서치하기에 좋다. 대부분의 폰트 회사들이 입점해있어서 여러 사이트를 비교하지 않아도 되는 장점이 있다. 서체는 그 서체를 만든 사람이 가장 잘 안다. 서체 디자이너는 자신이 만든 서체를 언제 어떻게 써야 가장 예쁜지 잘 알고 있기에 사용하기 전에 Presentation 이미지를 살펴보고 어떤 weight 조합이 적합할지 확인해보자.
사실 어도비의 Typekit도 양이 많긴한데, 아무래도 ‘폰트가 가장 많이 모여있는 곳'이라는 인식이 퍼져있어서 그런지 계속 마이폰트를 쓰게 된다. 마이폰트 내에서도 Monotype과 같은 대형 폰트 제작사의 경우 멤버십을 제공하고 있다.
4. 웹사이트를 큐레이션한 웹사이트 둘러보기
좋은 웹 폰트를 찾으려면 좋은 웹사이트를 정말 많이 봐야한다. 이미 위에서 다 언급한 내용이지만, 차별화된 웹사이트를 둘러보는 것이 웹 폰트 트렌드를 익히기에 가장 좋다. httpster나 sitesee처럼 웹사이트를 큐레이션하여 소개해주는 곳들을 종종 들어가보면서 지금 너무 안전한 방향으로만 디자인하고 있지는 않은지, 너무 정제된 서체만 사용하고 있진 않은지 생각해보자.
httpster https://httpster.net/
이 글은 2018.8.6에 작성되었고, 2020.08.30에 수정되었습니다.
