티스토리 글자크기 변경 방법 - CSS 설정부터 모바일 최적화까지
티스토리 블로그를 운영하다 보면 기본 글자크기가 너무 작거나 커서 가독성이 떨어진다고 느낄 때가 있다. 특히 모바일 환경에서 글을 읽는 독자 비율이 70%를 넘기면서, 글자크기 설정은 블로그 체류시간과 직결되는 핵심 요소가 됐다. 티스토리 글자크기 변경 방법을 단계별로 정리했다.
티스토리 에디터 기본 글자크기 설정하기
티스토리 글쓰기 에디터에서 글자크기를 바꾸는 가장 기본적인 방법은 에디터 상단 툴바를 활용하는 것이다. 글을 작성하는 화면 위쪽에 글꼴 크기를 선택할 수 있는 드롭다운 메뉴가 있다.
여기서 제공하는 크기 옵션은 1부터 7까지 총 7단계다. 기본값은 3이고, 이 숫자가 높을수록 글자가 커진다. 다만 이 방식은 글 하나하나에만 적용되기 때문에 매번 설정해야 하는 번거로움이 있다.
에디터 글자크기 변경은 HTML 모드에서 font 태그의 size 속성으로 들어간다. 그런데 이 방식은 최신 웹 표준과 맞지 않아서 브라우저마다 표시되는 크기가 달라질 수 있다. 근본적인 해결을 원한다면 CSS를 활용하는 편이 훨씬 안정적이다.
▲ 에디터 툴바 방식은 임시 해결책일 뿐, 블로그 전체에 일괄 적용하려면 CSS 수정이 필수다.
에디터 툴바 글자크기 선택
글쓰기 화면 상단의 글꼴 크기 드롭다운에서 1~7단계 중 원하는 크기를 선택한다.
HTML 모드에서 직접 수정
HTML 탭으로 전환 후 span 태그에 font-size 속성을 직접 입력해 px 단위로 정밀하게 조절한다.
스킨 편집 CSS로 전체 적용
관리자 페이지 꾸미기 메뉴에서 CSS를 수정하면 블로그 전체 글에 일괄 반영된다.
CSS로 블로그 전체 글자크기 일괄 변경하는 법
티스토리 관리자 페이지에 접속한 뒤, 왼쪽 메뉴에서 꾸미기 항목을 클릭한다. 그다음 스킨 편집 버튼을 누르면 HTML/CSS 편집 화면이 나타난다. 여기서 CSS 탭을 선택하면 된다.
본문 글자크기를 바꾸려면 .entry-content 또는 .tt_article_useless_p_margin 같은 클래스에 font-size 속성을 추가하면 된다. 스킨마다 클래스명이 다를 수 있으니 브라우저 개발자 도구(F12)로 본문 영역의 정확한 클래스명을 먼저 확인하는 게 좋다.
글자크기 단위는 px보다 rem을 추천한다. px은 고정값이라 화면 크기에 따른 유연한 대응이 어렵고, rem은 브라우저 기본 설정을 기준으로 상대적으로 계산되기 때문에 반응형 디자인에 유리하다.
예를 들어 본문 글자크기를 17px로 맞추고 싶다면, CSS 파일 하단에 다음과 같은 코드를 추가한다. .entry-content 안의 p 태그 font-size를 17px 또는 1.06rem으로 지정하고, line-height는 1.8 정도로 설정하면 줄간격까지 깔끔해진다.
제목(h2, h3) 글자크기도 같은 방식으로 조절 가능하다. h2는 24~28px, h3는 20~22px 정도가 가독성과 시각적 위계를 동시에 잡는 적정 범위다.
모바일 환경 글자크기 최적화 팁
모바일에서 티스토리 글자크기가 PC와 다르게 보이는 경우가 꽤 많다. 특히 구형 스킨을 사용하는 블로그에서 모바일 접속 시 글자가 지나치게 작아지는 현상이 빈번하다. 이 문제는 뷰포트 설정과 미디어 쿼리로 해결할 수 있다.
CSS 미디어 쿼리를 활용하면 화면 너비가 768px 이하일 때 별도의 글자크기를 적용할 수 있다. @media screen and (max-width: 768px) 안에 font-size를 16px 이상으로 설정하면 모바일 가독성이 크게 개선된다.
모바일 최적 글자크기
구글이 권장하는 모바일 본문 글자크기는 최소 16px이다. 이보다 작으면 핀치 줌 없이 읽기 어려워 사용자 경험이 저하되고, 검색엔진 평가에도 부정적 영향을 줄 수 있다.
글자크기 변경과 함께 줄간격(line-height)도 신경 써야 한다. 모바일에서는 줄간격이 1.6 미만이면 답답한 느낌을 준다. 1.7에서 1.9 사이가 가장 읽기 편한 범위다.
또 하나 놓치기 쉬운 부분이 글자 색상 대비다. 배경색과 글자색의 명암비가 4.5 대 1 이상이어야 접근성 기준을 충족한다. 밝은 회색 글자에 흰 배경 조합은 피하는 게 좋다.
| 항목 | PC | 모바일 |
|---|---|---|
| 본문 글자크기 | 16~18px | 16~17px |
| H2 제목 | 24~28px | 20~24px |
| 줄간격 | 1.7~1.8 | 1.7~1.9 |
| 문단 간격 | 16~20px | 14~18px |
스킨별 글자크기 설정 시 주의할 점
티스토리에서 제공하는 스킨은 크게 공식 스킨과 사용자 제작 스킨으로 나뉜다. 공식 스킨은 CSS 구조가 비교적 단순해서 글자크기 변경이 쉬운 편이다. 반면 외부 스킨은 CSS 우선순위 충돌이 발생하는 경우가 잦다.
CSS 우선순위 문제를 해결하는 가장 간단한 방법은 !important 선언을 추가하는 것이다. 다만 이 방식은 남용하면 나중에 스타일 관리가 복잡해지므로 꼭 필요한 속성에만 적용해야 한다.
스킨 업데이트 시 기존에 작성한 CSS가 초기화될 수 있다는 점도 유의해야 한다. 글자크기 변경 코드를 별도로 백업해두거나, 메모장 등에 기록해두면 스킨 변경 후에도 빠르게 복구할 수 있다.
- 공식 스킨 - .entry-content 클래스로 통일, 변경 용이
- 북클럽 스킨 - .area_view 클래스 사용, 줄간격 별도 설정 필요
- 오디세이 스킨 - .contents_style 클래스, 반응형 기본 지원
- 외부 제작 스킨 - 클래스명 직접 확인 필수, F12 개발자 도구 활용
글자크기를 변경한 후에는 반드시 PC와 모바일 양쪽에서 미리보기를 확인하는 습관을 들이자. 크롬 개발자 도구의 반응형 디자인 모드를 활용하면 실제 기기 없이도 다양한 화면 크기에서의 결과를 볼 수 있다.
글자크기 외에 가독성을 높이는 추가 설정
글자크기만 바꾼다고 가독성이 확 좋아지는 건 아니다. 글꼴(font-family) 선택도 중요한데, 한글 블로그에서는 Pretendard, Noto Sans KR, 나눔스퀘어 같은 산세리프 계열 웹폰트가 가장 무난하다.
본문 너비도 가독성에 큰 영향을 준다. 한 줄에 너무 많은 글자가 들어가면 시선 이동이 힘들어진다. 이상적인 본문 너비는 600~750px 범위이며, max-width 속성으로 제한할 수 있다.
문단 사이 여백(margin-bottom)을 적절히 설정하면 글 구조가 명확해진다. 문단 간격은 글자크기의 1.2배에서 1.5배 정도가 적당하다. 17px 글자크기라면 문단 간격 20~25px이 깔끔한 느낌을 준다.
"티스토리 글자크기 변경은 CSS 한 줄이면 충분하지만, 가독성 개선은 줄간격과 폰트, 본문 너비까지 함께 다뤄야 완성된다."
마지막으로 글자 굵기(font-weight)도 한번 점검해볼 만하다. 본문은 400(regular)이 기본이지만, 가는 폰트가 적용된 스킨에서는 350~300으로 내려가 읽기 피로를 유발하기도 한다. 이런 경우 font-weight를 400이나 500으로 올리면 체감 가독성이 눈에 띄게 좋아진다.
티스토리 글자크기 변경 관련 추가 정보는 티스토리 공식 스킨 가이드에서 확인할 수 있다.
자주 묻는 질문 FAQ
Q. 티스토리 글자크기 변경 후 기존 글에도 적용되나?
A. CSS로 변경한 경우 기존 글 포함 모든 글에 자동 적용된다. 다만 에디터에서 인라인 스타일로 글자크기를 직접 지정한 부분은 CSS보다 우선 적용되므로, 기존에 수동 설정한 글은 별도 수정이 필요할 수 있다.
Q. 글자크기를 바꿨는데 적용이 안 되는 이유는?
A. 대부분 CSS 우선순위 문제다. 스킨의 기본 스타일이 더 높은 우선순위를 가지고 있으면 새로 추가한 설정이 무시된다. 선택자를 더 구체적으로 작성하거나, font-size 뒤에 !important를 추가하면 해결된다.
Q. 모바일과 PC 글자크기를 다르게 설정할 수 있나?
A. 가능하다. CSS 미디어 쿼리를 사용하면 된다. @media screen and (max-width: 768px) 안에 모바일 전용 글자크기를 지정하면 화면 크기에 따라 자동으로 전환된다.
댓글