블로그스팟(blogspot)에서 가독성 향상을 위한 본문 폰트(글꼴) 크기 및 행간 설정 변경하기

블로그스팟에서 포스팅을 하면 본문의 폰트 크기가 작고 행간이 좁아 가독성이 떨어집니다. 여기서는 테마를 수정하여 폰트 크기를 크게 하고 행간을 좀 더 넓게 하는 방법을 알아보도록 하겠습니다.

블로그스팟(blogspot)에서 가독성 향상을 위한 본문 폰트 크기 및 행간 설정 변경하기

블로그스팟이 제공하는 테마를 사용할 경우 본문의 폰트 크기와 행간 설정이 가독성을 떨어뜨리는 경우가 있습니다. 여기서는 본문 폰트 크기와 행간을 늘려 가독성을 높일 수 있도록 테마를 변경하는 방법을 알아 보도록 하겠습니다.

1. 본문 폰트(글꼴) 크기 및 행간 변경 전/후 비교

2. 폰트(글꼴) 크기 및 행간 변경 방법

블로그스팟의Essential 테마를 적용하여 사용하는 것을 예로 들어 설명하도록 하겠습니다.

아래 화면은 본문의 폰트 크기와 행간의 변경 전/후를 PC에서 볼 경우 차이점입니다.

왼쪽은 폰트 크기와 행간을 변경하기 전이고 오른쪽은 변경한 후 입니다. 어느쪽이 더 보기 편하신가요?

다음화면은 모바일 미리보기에서 봤을 때의 차이점입니다.

왼쪽보다는 오른쪽이 폰트 크기와 행간이 넓어 읽기 편하실 겁니다. 이렇듯 폰트의 크기와 행간은 가독성을 향상시키는데 매우 중요한 역할을 합니다.

가독성을 향상 시키기 위한 본문 폰트 크기와 행간 변경을 위해서는 테마를 수정해야 합니다. 다음의 과정을 따라 하시면 쉽게 수정하실 수 있습니다.

위와 같이 ① ~ ② 을 클릭한후 나온 화면에서 HTML 편집을 클릭합니다.

이후 나온 화면에서 Ctrl+F를 누른 후 .post-body{ 를 입력하여 수정할 부분을 찾습니다.

수정할 부분을 찾으셨다면 다음과 같이 해당 부분을 수정합니다.

수정 전	수정 후
.post-body{ color:$(posts.text.color); font:$(posts.text.font); line-height:1.6em; margin:1.5em 0 2em 0; display:block }	.post-body{ width:100%; color:#000000 font:$(posts.text.font); font-size:16px; line-height:2.0em; margin:1.8em 0 2em 0; display:block }

폰트의 크기는 font-size : 16px; 을 원하는 크기로 수정하시면 되고, 행간은 line-height:2.0em; 를 늘리거나 줄이면 원하시는 효과를 얻으실 수 있으실 겁니다.

이제 아래 화면에서 빨간색 테두리 부분을 클릭하여 저장하면 본문 폰트 크기 및 행간이 변경됩니다.

이번 편에서는 블로그스팟에서 가독성을 향상시키기 위해 본문 폰트 크기 및 행간 설정 변경에 대해서 알아봤습니다. 기존의 테마를 그대로 쓰더라도 큰 문제는 없지만 포스팅한 글을 읽는 분들을 배려한다면 더 좋은 효과가 있지 않을까 생각됩니다.