본문 바로가기
ITATOZ/티스토리 설정

티스토리 본문 폰트 크기 조절하기 - 컴퓨터, 모바일 가독성을 높이자

by 이타토즈 421 2022. 7. 27.

티스토리 기본 폰트는 본문 2로 적용되어 있습니다. 본문 Size 16으로 작아 가독성이 좋지 못합니다. 그래서 글을 다 작성하고 나면 항상 본문 1로 바꿔서 포스팅을 했어요. 하지만 본문 1이라고 해도 별로 크지 않았죠. pc는 그나마 봐줄 만했지만 모바일에서 보기엔 눈알이 빠질 정도로 작았습니다. 그렇다고 해 모든 글을 제목 3으로 해버리면 ai가 판단하는 데 있어 혼란을 줄 수 있기 때문에 고민이 되었습니다.

 

제 블로그 기준으로 약 80퍼센트는 모바일로 유입이 되고 나머지는 pc 또는 태블릿으로 들어오기 때문에 휴대폰에서의 가독성을 높일 필요가 있었습니다. 모바일 유입이 많기 때문에 이미지도 대부분 1:1 또는 2:1로 편집해 올리고 있죠.

 

차일피일 미루고 있다가 오늘 드디어 변경했고 적용방법을 알려드리고 전후 비교를 보여드리겠습니다. 가독성이 좋다고 느껴지신다면 저처럼 적용해두시길 추천드립니다.

 

본문 폰트 크기 CSS에서 변경해 가독성 높이는 방법

티스토리 css 폰트 변경

변경하는 방법은 특별한 것이 없습니다. 티스토리 설정 - 스킨 편집 - CSS 선택 - 코드 칸 아무 곳 마우스 클릭 - ctrl+f - 검색창에 entry-content p검색 - font-size 변경

 

 

 

이제 얼마나 커지고 변경되는지 확인해보셔야죠. pc 비교

문자 가독성 높이기

위의 글자 크기가 본문 2(0.9375)를 그대로 적용한 크기이고 아래가 1.2로 변경한 크기입니다. 확연히 커졌고 글을 읽기도 훨씬 수월해졌습니다.

 

모바일 가독성 비교하기

모바일 가독성 비교

왼쪽이 기존 본문 2 크기이고 오른쪽이 1.2em으로 변경했을 때의 크기입니다. 글자 크기가 커져 훨씬 읽기 편해졌습니다.

 

변경 후 주의해야 하는 것

단 1.2em으로 본문 2를 설정하면 제목 3과 비교가 되지 않아 혼란의 우려가 있습니다. 때문에 제목 1,2,3에 해당하는 h2, h3, h4의 크기도 변경해줘야 합니다. entrt-content p에서 h로만 바꾸어 검색하시고 본인이 원하는 크기를 순차적으로 적용하시면 됩니다. 저는 p를 기준으로 적용했습니다. 아래 수치는 너무 무식하게 커서 p는 1.2로 하고 0.1씩 올렸습니다.

h1, h2, h3, h4 크기 번경

적용 후 단점

p는 본문 2만 변경하는 것이라 본문 1로 지정한 글은 그대로라 본문 2로 변경하거나 편집에서 본문 1 크기도 변경해줘야 합니다.



댓글