티스토리 가독성 좋은 폰트 적용하기

오늘은 가독성 좋은 폰트를 적용하는 방법에 대해 소개해드릴려고 합니다. 보통 폰트는 글, 또는 제목, 카테고리 등 다양한 곳에 사용되어 지는데요. 각각 다양한 폰트로 변경해도 되지만, 자칫 통일성과 가독성이 떨어질 수 있으니 변경 시 이 점 주의해야 합니다. 오늘은 여러 가지 중에서도 가장 메인이 되는 본문의 글과 티스토리 메인 제목의 폰트를 변경해보도록 하겠습니다.

 

반응형

 

 

본문 글 폰트 변경하기

글을 쓸 때 기본서체를 눌러 폰트를 변경할 수 는 있지만, 매번 폰트를 변경해야 하는 번거로움이 있는데요. 더군다나 기본으로 제공되는 기본서체를 포함한 총 6가지 종류로만 한정되어 있어서 선택지의 폭이 넓지는 않아요. 그래서 완전 새로운 폰트를 사용하고 싶으신 분들은 아래처럼 폰트를 추가하시면 사용하실 수 있어요.

스킨 편집에서 CSS편집으로 들어가 주세요. ctrl+F를 눌러 'font-family'라고 쳐주시면 여러 곳이 노란색으로 뜰 꺼에요. 저희가 변경해 줄 곳은 바로 body 와 input, select, textarea, button 의 폰트인데요. 기존에 설정되어 있는 폰트 앞에 똑같은 양식으로 원하는 폰트를 맨 앞에 추가해주시면 됩니다.

폰트가 여러 개 적혀 있는 이유는 블로그를 보는 사람들의 컴퓨터에 따라 내장되어 있지 않은 폰트에 경우, 순서대로 보여지기 때문에 그런 것인데요. 특이한 폰트를 넣으셔도 무방하지만, 상대방에겐 없는 경우 안 보일 수 있어요. 그렇기 때문에 이왕이면 많은 이들이 많이 사용할만한 보편적인 폰트를 넣어주는게 좋습니다.

 

 

 

고딕체 vs 명조체 차이

여기서 또 한 가지 알아야 할 사항은 바로 고딕체와 명조체의 차이인데요. 고딕체는 끝이 딱 떨어지는 깔끔한 모양새인 반면, 명조체는 끝이 살짝 휘어진 모양이 있는 글씨체에요. 명조체의 경우 멋스러움은 있지만 상대적으로 가독성을 떨어지기 때문에, 가독성을 높이기 위해서는 주로 고딕체를 많이 사용한다고 합니다. 

물론 취향에 따라 명조체를 사용하셔도 무방합니다. 어디까지나 보편적으로 그렇게 인식되기 때문에 어디까지나 참고만 하시길 바랍니다. 저는 애당초 가독성을 높이기 위해 변경하는거라, 기본서체 중 하나인 나눔고딕 폰트를 영문으로 넣어주었습니다. 'Nanum Gothic' 이라고 넣고 저장했습니다.

 

 

 

본문 글 폰트 변경 비교

그럼 잘 변경이 되었는지 확인해볼까요. 그냥 볼 때는 꽤 깔끔해진 것 같다는 생각이 드는데요. 더 자세한 확인을 위해 수정 전과 비교해봅니다.

나란히 비교해보니 확실히 차이가 크네요. 전체적으로 글씨가 살짝 세로로 길어지고, 조금 얇아진 것을 알 수 있습니다. 이렇게 보니 기존의 글씨체도 나쁘지 않은 것 같네요. 그래도 조금 얇고 가벼운 느낌의 글씨체가 좀 더 깔끔해보여서 저는 대만족입니다. 혹시 변경하시고 별로라고 생각하신다면, 다른 폰트로 수정하시면 될 것 같아요.

 

 

 

 

티스토리 제목 폰트 변경하기

바꾸고 나니 블로그 제목 글씨체만 튀는 것 같다는 생각이 들더라구요. 아마 제가 변경했던 부분에는 제목은 포함되어 있지 않은 것 같아 따로 수정해주기로 합니다. 다시 CSS편집에 들어가서 ctrl+F를 눌러 'font-family'를 쳐 줍니다. #header h1이라고 쓰여져 있는데를 찾아봅니다. 제목 폰트는 기본으로 한 가지만 설정되어 있네요. 

본문과 전체적인 통일감을 위해 동일한 나눔고딕 폰트를 영문으로 넣어주고 저장합니다. 변경하고 보니 제목 글씨는 커서 그런지 확 바뀌었다는 게 눈에 보이네요. 그래도 궁금하니까 나란히 비교해볼까요.

두께도 얇아지고 깔끔해졌네요. 확실히 나눔고딕이라는 폰트 참 기본폰트인데도 깔끔하니 좋은 것 같아요. 그동안 신경쓰였던 폰트를 쏵- 바꿔주니 뭔가 속이 시원해지는 기분이네요.

 

▼ 스킨 네멋대로 변경하기

티스토리 북클립스킨 썸네일 이미지 오른쪽으로 옮기기

티스토리 블로그 제목 꾸미기 - 글자 크기/자간/위치 변경

티스토리 회색 new 아이콘 색상 변경하기

티스토리 블로그 제목 색상 변경하기

티스토리 카테고리 접기 펼치기 방법

 

혹시 폰트 변경이 궁금하셨던 분들은 포스팅 보시고, 변경에 성공하시길 바랍니다.