워드프레스 폰트 설정만 이해해도 디자인이 완전히 달라져요.

폰트 간격과 크기 변화를 통해 웹사이트는 완전히 새롭게 바뀐다는 거 알고 게시나요? 실제 고퀄리티 웹디자인은 일정한 기준을 두고 폰트를 설정합니다. 오늘은 이와 관련해 워드프레스 폰트 설정에 대해 중요한 부분만 알려 드릴게요.

 

워드프레스 폰트 설정 시작은 종류를 결정하는 것부터

워드프레스는 기본적으로 Roboto 폰트나 noto sans 계열이 기본 세팅이라 할 수 있는데요. 실제 국내 사용자에게 좋은 선택은 아닙니다. 물론 noto sans kr 폰트는 한글 전용이기 때문에 나쁘진 않지만 그렇다고 썩 예쁜 글씨체라고 할 수도 없죠.

현재 해당 사이트 폰트는 프리텐다드(Pretendard)를 사용하고 있는데, 많은 웹디자이너가 좋아하는 최근 대표적인 웹폰트라 할 수 있어요.

실제 폰트를 결정할 때 참고해야 하는 건, 한글 모양 뿐 아니라 영문, 숫자, 부호까지 고려해 전체적으로 무난한지 판단하는 게 필요해요. 그래야 어떤 순간에도 조화를 이룰 수 있기 때문이죠.

그리고 될 수 있다면 글자 두께가 다양한 종류를 선택하는 걸 추천합니다. 평균 5가지 이상 제공되는 정도면 되는데, 프리텐다드는 총 9개를 사용할 수 있어 더 인기가 많은 것 같아요.

다만 한글 폰트는 실제 워드프레스 웹사이트 속도를 저하 시키는 원인이라는 것도 알아두는 게 좋고, 그래서 최근 웹폰트는 전체를 다 사용하기 보다 Woff2 파일을 사용하는게 일반적인 형태입니다.

 

폰트 디자인의 핵심은 간격과 그룹화 

어떤 글자를 크게, 두껍게 하는지는 강조해야 하는 의미가 기준이 되며, 큰 글자와 작은 글자 비율 역시 그때 그때 다를 수 있어요. 하지만 폰트 간 간격이나 계층은 일정한 형식을 따르는 것이 좋습니다.

쉽게 설명하면, 16px 기준으로 제목이 24~32px 정도라면 제목과 본문 간격은 평균 16px 즉 본문 크기에 맞추는 게 좋습니다. 이때 영향을 받는 건, 본문 크기가 아니라 타이틀 크기에 따라 간격을 조절하는 게 좋습니다.

사실 이를 문자로 설명한다는 건, 변수가 많아 쉽지 않고, 여러분이 이해하기 어렵지만 최소한 이 글을 통해 워드프레스나 혹은 일반 웹사이트 디자인에서 실제 정돈된 느낌이나 심플한 느낌을 갖게 하는 요소라 폰트 간격과 계층 구조라는 걸 이해하기를 바랍니다.



계층 구조라는 것은, 영어로 그룹핑grouping이라 하는 데, 실제 가독성을 좋게 하는 것을 떠나 워드프레스 디자인은 물론 모든 웹디자인에서 가장 중요하게 생각하는 요소입니다.

잘 정돈된 느낌을 주는 사이트는 위 이미지와 같이 이미지와 타이틀 텍스트 간격이 구분되어 있으며, 이미지와 폰트 사이는 조금 더 차이가 있는 걸 알고 있습니다. 즉 이미지와 폰트는 완전히 다른 그룹이며, 동일한 폰트라도 타이틀과 본문 역시 다른 그룹으로 표현합니다.



이 역시 그룹핑을 잘 나타내고 있습니다. 상단 폰트 사이 간격을 조절해주고 하단에 이미지와는 큰 간격으로 그룹이 다름을 표현하고 역시 하단 폰트들과도 동일한 기준에서 그룹을 다룹니다.

이때 버튼과 이미지는 거의 동일한 기준에서 간격을 주는 게 좋고, 하단 여백은 늘 여유있게 두는 것 역시 전체적인 디자인에 기본이라 할 수 있습니다.

어떻게? 오늘 워드프레스 강의는 간략하지만 이해가 쉽지는 않으시죠?

하지만 이러한 워드프레스 폰트 설정을 따라하다 보면 지금 잘못된 폰트 설정을 고칠 수 있을 것이며, 다른 사이트를 볼 때 이 기준을 염두하고 파악하면 차이가 있을거라 생각합니다.

여기까지 웹디자인 폰트 적용에 기본중에 기본 간격 조절 및 그룹핑에 관해 이야기 드렸습니다.