티스토리 가독성 높이는 편집 방법 3가지 (글꼴·줄간격·여백)

티스토리 가독성 높이는 편집 방법 3가지 (글꼴·줄간격·여백)

반응형

 

블로그의 가독성을 높이면 글을 읽기 쉬워집니다.
글꼴, 줄간격, 여백만 잘 조정해도 가독성이 크게 향상됩니다.
한 문장은 되도록 2줄 이내로 유지하는 것이 좋습니다.

 

---

가독성 높이기

가독성 높이기
글꼴	기본 글꼴, Pretendard, Noto Sans KR, 나눔고딕	웹 환경에서 가독성이 검증된 한글 폰트
글자 크기	16px~17px	15px 이하는 모바일에서 읽기 불편
글자 색상	#333333 또는 #444444	순수 검정(#000000)보다 눈의 피로가 적음
줄 간격	1.6 ~ 1.8	문장이 답답하지 않고 읽기 편함
문단 여백	위아래 1.2em 정도	시각적 여백 강제 확보
문단 길이	2~3줄마다 줄바꿈	모바일에서 스크롤하며 읽기 쉬운 구성

 

 

가독성을 결정짓는 3가지 요소

 

---

1. 글꼴 설정

글꼴은 가독성에 가장 직접적인 영향을 줍니다.
티스토리 에디터에서 글꼴을 설정하는 방법은 두 가지입니다.

 

에디터 직접 설정 CSS 일괄 설정

 

에디터에서 직접 설정하는 방법
1. 티스토리 글쓰기 에디터를 엽니다.
2. 본문 전체를 선택합니다.
3. 상단 툴바에서 글꼴과 글자 크기를 선택합니다.

 

항목	추천값	이유
글꼴	기본 글꼴(시스템 폰트), Pretendard, Noto Sans KR(본고딕), 나눔고딕	웹 환경에서 가독성이 검증된 한글 폰트
글자 크기	16px~17px	15px 이하는 모바일에서 읽기 불편
글자 색상	#333333 또는 #444444	순수 검정(#000000)보다 눈의 피로가 적음

 

 

눈이 편안한 글꼴 설정

 

 

CSS로 전체 통일하는 방법
매 글마다 설정하기 번거롭다면, 스킨 편집에서 CSS로 일괄 적용할 수 있습니다.
1. 티스토리 관리자 > 꾸미기 > 스킨 편집 > HTML 편집으로 이동합니다.
2. CSS 탭을 선택합니다.
3. 아래 코드를 추가합니다.

 

.tt_article_useless_p_margin .contents_style {
font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Nanum Gothic', sans-serif;
  font-size: 16.5px;
  color: #333;
word-break: keep-all;
overflow-wrap: break-word;
letter-spacing: -0.015em;
}

 

CSS
font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Nanum Gothic', sans-serif;|	폰트 우선순위 Pretendard > Noto Sans KR >
font-size: 16.5px;	글자 크기 모바일과 PC 모두에서 밸런스
color: #333;	짙은 회색 톤을 사용해서 피로도 최소화
word-break: keep-all;	단어 단위 줄바꿈
overflow-wrap: break-word;	URL·긴 영문 문자열 넘침 방지
letter-spacing: -0.015em;	자간

 

 

티스토리 스킨 편집 CSS 적용

 

티스토리 스킨 편집 CSS 적용

 

티스토리 스킨 편집 CSS 적용

 

---

2. 줄간격 설정

줄간격이 너무 좁으면 글이 빽빽해 보입니다.
너무 넓으면 집중력이 흐트러집니다.

에디터에서 줄간격 조정하는 방법
티스토리 기본 에디터에서는 단락 단위로 줄간격이 자동 적용됩니다.

 

에디터 줄간격
엔터(Enter)	단락 구분으로 한 줄 공백이 생깁니다.
Shift + Enter	줄바꿈만 적용되며 공백 없이 바로 다음 줄로 이동합니다.

 

 

.tt_article_useless_p_margin .contents_style p {
  line-height: 1.85;
margin-top: 1.2em;
  margin-bottom: 1.2em;
}

 

줄간격 확보

 

CSS
line-height: 1.85;	문단 내부 줄간격
margin-top: 1.2em;	시각적 여백 강제 확보
margin-bottom: 1.2em;

 

---

3. 여백(패딩) 설정

본문 좌우 여백이 부족하면 모바일에서 글자가 화면 끝에 붙어 보여 읽기 불편합니다.

 

여백
PC	좌우 20px, 모바일(768px 이하)에서는 16px 여백을 적용합니다.
모바일	@media` 구문은 모바일 환경에서 별도로 여백을 조정합니다.

 

 

.tt_article_useless_p_margin {
  padding: 0 20px;
}

@media (max-width: 768px) {
  .tt_article_useless_p_margin {
    padding: 0 16px;
  }
}

.contents_style {
  max-width: 720px;
  margin: 0 auto;
}

 

본문 폭 설정

 

여백 설정

 

CSS
max-width: 720px;	최적의 본문 폭 설정
m margin: 0 auto;	본문 영역을 모니터 화면 정중앙에 배치

 

---

티스토리 블로그

[블로그] - 티스토리에서 블로그 추가하는 방법

티스토리에서 블로그 추가하는 방법

 

 

[블로그] - 티스토리 관리자 초기 설정 방법

티스토리 관리자 초기 설정 방법

 

 

[블로그] - 티스토리 구글 서치 콘솔 설정 방법

티스토리 구글 서치 콘솔 설정 방법

 

 

[블로그] - 티스토리 구글 애널리틱스 설정 방법

티스토리 구글 애널리틱스 설정 방법

 

 

[블로그] - 티스토리 네이버 애널리틱스 설정 방법

티스토리 네이버 애널리틱스 설정 방법

 

 

[블로그] - 티스토리 네이버 서치어드바이저 설정 방법

티스토리 네이버 서치어드바이저 설정 방법

 

 

[블로그] - 티스토리 빙 웹 마스터 도구 설정 방법

티스토리 빙 웹 마스터 도구 설정 방법

 

 

[블로그] - 티스토리 IP 추적 statcounter 설정 사용

티스토리 IP 추적 statcounter 설정 사용

 

 

[블로그] - 티스토리 방문자 행동 분석 Clarity 설치 설정 방법

티스토리 방문자 행동 분석 Clarity 설치 설정 방법

 

 

[블로그] - 티스토리 가독성 높이는 편집 방법 3가지 (글꼴·줄간격·여백)

티스토리 가독성 높이는 편집 방법 3가지 (글꼴·줄간격·여백)

 

---

요약

1. 폰트 > 기본글꼴 혹은 Pretendard 혹은 Noto Sans KR
2. 글자 크기 > 16~18px
3. 줄간격 > 1.8~2.0
4. 좌우 여백 > PC 20px, 모바일 16px
5. CSS 일괄 적용 후 > 반드시 PC와 모바일 미리 보기 확인