[티스토리] 북클럽 스킨 글자 크기, 줄 간격, 글자 간격 조정 - 가독성 향상

블로그의 기본은 글입니다. 좋은 글이 좋은 블로그를 만드는데요. 글의 내용도 중요하지만 가독성도 중요합니다. 글의 가독성에 가장 큰 영향을 미치는 것은 폰트입니다. 가독성 좋은 폰트를 고르거나 유료 폰트를 구입해서 사용하는 정도까지는 아니지만 글자 크기(폰트 사이즈)를 조정하는 정도는 해볼만합니다.

티스토리 북클럽 글자 크기 조정

우선 관리모드로 들어갑니다. 그리고 꾸미기-스킨편집 페이지로 들어갑니다. 오른쪽 상단에 있는 'html 편집' 버튼을 눌러 CSS 편집창으로 갑니다.

스킨의 HTML과 CSS 그리고 스킨에 필요한 사진같은 리소스 파일을 업로드할 수 있는 메뉴를 볼 수 있습니다. 가운데 있는 CSS 항목을 클릭해주면 스킨의 CSS 편집을 할 수 있는 메뉴가 나옵니다.

CSS 에디터에서 .entry-content p 항목을 검색합니다. 그러면 다음과 같은 CSS 항목이 검색됩니다.

.entry-content p {
	margin-bottom: 32px;
	word-break: break-all;
	font-size: 1em;
	line-height: 1.7;
	color: #555;
}

여기서 font-size에 해당하는 설정이 본문의 글자 크기입니다. 이 값을 조금씩 변경하면서 가독성이 좋은 글자 크기를 찾아주면 됩니다. HTML 편집 페이지에서는 '새로고침' 기능을 제공해 현재 편집한 CSS가 적용되면 어떤 모습인지 확인할 수 있습니다.

참고로 .entry-content p 항목을 한번 더 검색하면 아래쪽에 하나 더 있는데요. 모바일 페이지에서 보이는 글자 크기를 설정하는 부분입니다. font-size 항목을 추가해서 조정하면 모바일 미리보기에서 글자 크기가 바뀌는 것을 확인할 수 있습니다.

추가로 line-height 설정을 이용해 한줄과 다음줄 사이의 간격을 조절할 수 있습니다. 줄과 줄 사이의 간격이 너무 붙어있거나 떨어져 있으면 가독성이 떨어지기 때문에 최적의 값을 수정하면서 찾아주면 됩니다.

마지막으로 letter-spacing 설정을 추가하면 글자 사이의 간격을 조절할 수 있습니다.