홈페이지 디자인 폰트 크기와 색상 무작정 따라하기
자신만의 디자인 감각이 있는 분이라면 이번 포스팅이 큰 의미가 없을지 몰라요, 하지만 홈페이지 디자인 폰트 크기와 색상 선택 과정에서 기본적인 지식이 없다면 도움이 되도록 무작정 따라하기 방식으로 현재 당신의 웹사이트를 좀 더 나은 형태로 디자인 할 수 있을 것입니다.
간단한 방법이며, 모든 웹사이트에 통용되는 형식이니 참고해서 폰트 디자인을 개선하는 데 도움이 되었으면 좋겠습니다.
홈페이지 디자인 폰트 크기에 대한 이해
타이틀과 본문 크기 비율
홈페이지 디자인에서 폰트가 차지하는 비중은 얼마나 될까요? 개인적인 의견을 말하자면 70% 이상이라 생각해요, 폰트는 가독성을 높이고 그 자체만으로 디자인을 완성할 수 있기 때문이죠.
그 중에서도 타이틀과 본문 비율, 영문과 한글의 차이를 이해하는 게 가장 중요합니다. 그럼 폰트 크기에 관해 먼저 이야기 해 보겠습니다.
일반적인 텍스트 크기는 PC와 모바일 모두 16px 기준에서 1 ~ 2px 안밖으로 설정하는 게 좋습니다. 이건 폰트 종류에 따라 조금씩 달라지지만 현재 해당 폰트는 한글 폰트 중 프리텐다드를 사용하고 있으며, 텍스트 크기는 18px을 사용하였습니다.
즉 본문 텍스트 중 최대 사이즈를 선택했는데 이유는 단순합니다. 현재 전체 그리드 값이 1500px로 비교적 크게 사용했기 때문에 텍스트 폰트를 크게 사용한 것이죠.
따라서 해당 포스팅의 소제목 타이틀 최대 크기도 30px로 선택했습니다. 결국 타이틀과 본문 크기는 2배를 넘지 않아야 한다는 것을 말해주고 싶습니다.
단 디자인적인 느낌으로 하나의 폰트 크기를 크게 사용하는 경우는 예외가 될 것입니다.
폰트 사이즈 무작정 따라하기
앞서 말한 내용을 정리하면 다음과 같습니다. 전체 웹 사이즈가 1280PX 이하일 경우 16px 정도의 본문 텍스트 크기에 30px 이하의 타이틀 크기를 유지합니다.
폰트 굵기도 너무 굵은 것 보다는 타이틀의 경우 크기 600에서 500 정도가 적당하며 본문은 400정도로 선택합니다. 필요에 따라 글자 굵기를 다양하게 사용하는 경우가 있는데, 전체적으로 깔끔한 디자인을 원한다면 이는 홈페이지 디자인 폰트 정석이라고 볼 수 없습니다.
홈페이지 폰트 디자인 색상 사용하는 법
3가지 색상 이상은 사용 금지
본문과 타이틀 색상 이외에 포인트 색상이라는 게 있습니다. 링크 색상으로 사용하거나 중요한 부분을 배경이나 폰트 컬러로 변화를 주기도 하죠. 개인적으로 이 또한 불필요하다 생각하지만 최대 3가지 이상을 하나의 페이지에서 사용하지 않아야 합니다.
홈페이지 디자인 폰트 색상 결정은 그냥 하기 보다는 일관성을 가져야 하는데 그래서 웹디자인은 항상 폰트 사이즈와 색상을 사전에 결정한 후에 작업을 시작하는 습관을 갖는 게 중요합니다.
타이틀은 본문보다 진한 검정으로 하되, 완전 검정색은 좋지 않습니다. 본문은 평균 #666666 ~ #333333 정도에서 선택하는 게 좋습니다. 물론 타이틀은 이보다 진한 검정색이면 되겠죠?
이정도만 하더라도 지금까지 이러한 원칙을 지키지 않았다면 충분히 다른 홈페이지 디자인 폰트 색상이고 나은 선택이란 걸 알 수 있을 것입니다.
오늘은 이렇게 무작정 따라하세요, 라는 컨셉으로 포스팅을 작성해 봤는데요, 사실 폰트라는 건 웹사이트 디자인에서 가장 중요한 요소입니다. 이외에도 그룹을 만드는 것, 계층간 구조를 이해하는 것 등이 중요한데, 이 부분은 다음 시간에 준비해 보겠습니다.
2024.01.13
에디터 – 민서인
