티스토리 폰트를 변경했으면 그에 어울리는 사이즈와 색, 굵기까지 수정하는 게 좋겠죠. 모바일에서도 가독성이 좋은 사이즈와 조금 더 선명한 색, 굵기로 변경해 봐요.
▷이어지는 글 : 웹폰트로 티스토리 폰트 변경하는 방법
티스토리 폰트 세부사항 수정하기
앞서 티스토리 폰트 변경하는 방법 포스팅에서 언급한 대로 마우스 우클릭, 검사를 눌러 수정을 원하는 영역을 눌러보면 css에서 어느 부분을 수정해야 하는지 알 수 있습니다. 저는 현재 왓에버 스킨을 사용 중인데, 왓에버 스킨에서는 . entry-content p 부분에서 사이즈와 색, 굵기를 수정할 수 있더라고요. 아마 북클럽 스킨도 비슷했던 것으로 기억하고 있습니다.
방법은 아주 간단합니다. 아까 찾아둔 .entry-content p 부분의 코드를 보면 이렇게 나와 있습니다.
여기에서 폰트 크기를 변경하고 싶다면 font-size: 1em; 이 부분을 수정해 주시면 됩니다. 우리는 기본적으로 폰트 사이즈를 px 단위로 알고 있지만 스킨에서는 em으로 사용하는데 16px 가 1em입니다. 그냥 불편하시면 1em을 지우시고 그 자리에 원하는 크기의 px값을 입력해 주시면 됩니다. font-size: 16px; 이렇게 말이죠. 참고로, 모바일 가독성을 고려했을 때 가장 좋은 사이즈는 16~18px 정도로, 자신의 주 구독자층을 고려하여 조절하시면 됩니다.
다음으로 폰트 컬러는 color: #000; 부분을 변경해 주시면 되는데, 처음에는 #000이 아니라 진한 회색으로 되어 있어요. 자신의 배경 색에 맞추어 대비되는 컬러로 눈에 잘 띄도록 정해 주시면 됩니다. 다크모드의 경우에는 하얀색이 좋겠죠?! 기본 하얀 배경을 쓰신다면 검은색인 #000으로 설정해 주시면 좋고, 너무 검은색은 싫으시다면, 그래도 기본 스킨에 적용되어 있던 회색보다는 진하게 설정하시는 것을 추천드립니다.
마지막으로 폰트 굵기는 폰트의 두께라고도 할 수 있는데 가늘고 굵은 정도를 말합니다. 저는 현재 폰트 굵기를 얇게 한 상태이고, 기본은 이것보다 조금 더 두껍습니다. 이 부분 역시 가독성에 영향을 미치니 현재 자신이 선택한 글꼴과의 조화를 고려하여 선택하시는 것이 좋습니다. font-weight: 300; 요 부분을 수정해 주시면 되는데요, 원래 기본으로는 400이지만 저는 조금 얇은 글자를 좋아해서 300으로 낮춰두었어요. 굵기를 가늘게 하면 강조 표시를 한 부분과 아닌 부분이 명확하게 구분되는 장점이 있는 반면, 전반적으로 글의 선명도가 낮아지는 경향이 있습니다. 굵게 쓴 글과 가늘게 쓴 글의 차이를 떠올려 보시면 어떤 뜻인지 알 수 있으시겠죠.
추가로, 본문 행간을 조절하고 싶으신 분들은 line-height: 1.8; 라인 높이를 수정해 주시면 됩니다. 너무 가까워서 겹친다거나 한 줄 한 줄이 또렷하게 보이지 않는 것 같다 싶으실 때 주로 조절하면 된답니다.
어디를 수정해야 어떤 부분이 바뀌는지 구체적으로 알려드렸습니다. 단번에 조절하지 마시고 꼭 모양이 어떻게 변하는지, 모바일에서는 어떻게 보이는지를 확인하며 수정해 주세요. 블로그마다 다르기는 하지만 주로 모바일 유입이 많은 만큼 둘 사이에서 고민이 될 때에는 모바일을 기준으로 두는 것을 추천 드립니다.
