반응형 홈페이지 제작에서 고려해야 할 요소 중 폰트 종류와 크기 그리고 색상은 매우 중요합니다. 특히 워드프레스 폰트 사용법에 관해 궁금해 하는 분들이 많은 것 같아 관련 정보를 종합해서 정리해 보도록 하겠습니다.
따라서 이 글은 반응형 홈페이지 디자인에 필요한 폰트 크기, 종류, 행간과 자간 설정 등을 모두 다룰 예정 입니다.
워드프레스 폰트 종류 어떻게 선택해야 할까?
이 질문은 여러분 스스로 많이 해본 질문일 것이며, 만약 그렇지 않다면 디자인에 대한 열정이 부족하다고 생각될 수 밖에 없습니다. 필자 스스로도 아직 정답을 찾고 있지만 그간의 경험을 공유해 보도록 할게요.
우선 한글과 영문을 따로 구분하여 설정하는 게 좋습니다. 만약 한글과 영문이 섞여 있는 문장이라면 한글 폰트를 우선 고려해서 선택합니다.
즉, 워드프레스 폰트 사용에서 우리는 웹사이트 제작에 두 가지 글꼴을 사용하는 게 일반적이라 생각하고 초기 홈페이지 제작 과정에서 이 부분을 고려합니다.
제가 추천하는 한글 폰트는 프리텐다드와 noto sans kr 입니다.
이유는 간단합니다. 브라우져 호환성이 좋고, 특별하진 않지만 무난한 느낌으로 가독성 또한 훌륭하기 때문이죠. 특히 프리텐다드 폰트는 영문과 숫자 또한 별도로 사용하지 않아도 될 정도이니 참고해 보세요.
또한 웹폰트를 고를 때 한글 폰트는 두께 변형이 5가지 이상 가능한 글꼴을 우선 확인해야 한다는 것도 잊지 마세요.
영문은 역시 로보토(Roboto)가 아닐까 생각됩니다.
이 부분은 웹디자이너라면 부연이 필요 없이 압도적인 설정이니 초보자 여러분은 따라하시는 걸 추천합니다.
반응형 디자인의 기본 Px, Em, Rem 개념 이해하기
반응형 웹 디자인에서 디바이스 와이드 값을 고려한 폰트 크기 설정은 매우 중요합니다. 일반적으로 사용하고 있는 px 단위는 고정 값이기 때문에 화면 사이즈에 따라 디자인이 예쁘기도 하고 그렇지 않은 경우도 있죠.
다양한 디바이스를 고려해야 할 웹디자인에서 px로 폰트 크기를 설정하는 건 옳은 방법이 아닙니다.
그래서 워드프레스 폰트 설정에서 기본적인 진행 과정은 다음과 같습니다.
- 사용자 정의하기에서 바디와 타이틀 폰트 크기를 우선 설정합니다.
- 기본적인 텍스트 크기는 15 ~ 18 정도이며, 타이틀은 24 ~ 30 정도의 px 단위 고정 값을 지정합니다.
- 각 디자인 요소에서 em 혹은 rem으로 워드프레스 폰트 크기를 맞추면 됩니다.
조금 어려울 수 있는 개념이라 부연해서 설명하자면 워드프레스 사이트 테마 사용자정의하기 이동 후 타이포그래피 설정으로 이동, 이후 전체 기본 텍스트를 15 ~ 18px 로 설정, 타이틀 기본도 24 ~ 30px 정도로 설정한 뒤 각 요소에서 필요한 사이즈를 설정할 수 있습니다.
굳이 이렇게 지정해야 하는 이유는 반응형 홈페이지 제작에서 기기(디바이스) 화면 크기에 반응해야 하기 때문이죠.
완전 반응형을 위해서는 rem을 선택해야 하지만 em으로 설정해도 무방할 것 같습니다.
자간과 행간의 중요성도 잊지 마세요.
마지막으로 글자를 더 예쁘고 가독성 있게 하는 중요한 디자인 요소가 바로 자간과 행간을 설정하는 것입니다. 현재 해당 포스팅에서 사용된 자간은 -0.5px 입니다.
행간은 1.8em 정도이며 단어 간격은 1px을 주었습니다.
여러분이 워드프레스 폰트 사용에서 자간과 행간을 변형하면서 디자인을 하다 보면 적당한 사이즈를 스스로 깨닿게 되며, 이는 전체적인 디자인에 매우 중요한 역할을 한다는 걸 알 수 있습니다.
오늘은 이렇게 워드프레스 폰트 디자인을 주제로 반응형 홈페이지 제작 과정에서 가장 중요한다고 생각하는 부분을 공유해 드렸는데요, 다음 시간에는 타이틀과 텍스트 크기 비율과 간격 조절로 올바른 계층 구조 및 그룹핑을 만드는 방법에 관해 이야기해 보겠습니다.
에디터 : 오엠지 디자인
cmgcmocm@gmail.com
