티스토리 글씨체(폰트) 및 글자 크기 변경하는 방법

티스토리에서 글씨체(폰트) 및 글자 크기를 변경하는 방법에 대해서 알려드리겠습니다. 글을 읽는 사람들은 글씨체와 글자 크기 등에 영향을 받습니다. 잘 작성된 글은 내용을 보다 쉽게 전달하는 효과를 가지고 있습니다. 가독성을 높일 수 있는 방안에 대해서 설명하겠습니다.

 

글씨체 및 글자크기 변경방법

 

 

목차
1. 글씨체 변경하는 방법
2. 글자 크기 변경하는 방법

 

 

1. 글씨체 변경하는 방법

티스토리에서 제공하는 기본서체도 글을 읽는데 어려움이 없습니다. 그러나 보기에 따라서는 약간 딱딱하다는 인상을 줄 수도 있습니다. 그래서 블로그 운영자들은 사람들에게 친근감도 주면서 읽기에 쉬운 글씨체로 변경을 합니다. 글씨체 변경하는 방법을 요약하면 아래와 같습니다.(북클럽 기준)

 

• 1. 글씨체 제공 사이트에서 글씨체 선택 → 글씨체 코드 복사
• 2. 관리자 화면 → 스킨편집 → html 편집 → CSS → 코드 삽입 및 적용

 

1-1. 글씨체 선택하기

글씨체를 제공하는 여러 사이트 중에서 '눈누'를 이용해 보겠습니다. 추천 폰트 중에서 네이버에서 제작한 '나눔스퀘어 네오'를 이용하겠습니다.

 

글씨체를 선택하면 화면 오른쪽에 코드가 있습니다. 이중의 네모박스를 클릭하면 코드가 복사됩니다. 그대로 붙여 넣기 하면 되지만, 만약을 대비해서 메모장에 복사해 놓습니다. 블로그에서 글씨체를 활용할 것이라서 라이선스 요건도 충족합니다.

 

글씨체 선택 및 라이선스

 

 

1-2. CSS에 코드 삽입하기

코드를 복사하였다면 티스토리에 글씨체를 적용해야 합니다. 코드는 두 군데에 넣어야 됩니다.

 

• 1. Web Font Load > @import url 아래에 코드 복사
• 2. Type Selector Reset > body > font - family의 첫 번째 위치에 글씨체 이름만 복사

 

1.  관리자 화면 > 스킨편집 > html 편집> CSS로 이동합니다.

복사한 글씨체 코드를 설명드린 위치에 붙여 넣기 해줍니다. 그리고 CSS 코드에서 '적용', 블로그에서 '새로고침'을 실행하면 글씨체가 변경된 것을 확인하실 수 있습니다.

 

 

글씨체 입력 위치

 

 

티스토리에서 기본서체로 글을 쓰고 발행하면 '나눔스퀘어 네오'가 적용이 됩니다. 다른 글씨체 발행을 원한다면 기본서체가 아닌 본고딕 L, 나눔 고딕, 궁서체 등을 선택하면 됩니다. 아래는 글씨체 코드를 얻을 수 있는 '눈누' 사이트 링크입니다. 글씨체 변경을 원하시면 이용해 보십시오.

 

 

글씨체 변경 링크

 

 

 

1-2-1. 블로그 제목 글씨체 변경하기

앞서 소개드렸던 글씨체 변경은 본문에 해당합니다. 블로그 제목 글씨체 변경하는 방법도 함께 설명하겠습니다. 

 

• 1. CSS에서 Ctrl+F를 이용하여 'header h1'을 검색합니다.(북클럽 기준, Layout Selector 아래에 위치)
• 2. 기존에 있는 font-family는 /* */을 활용하여 보관(백업 용도)
• 3. 바꾸고자 하는 font-family : "글씨체명"으로 복사하고, 적용 및 새로고침 실행

 

실제 실행했던 코드 내용입니다.

 

 

#header h1 {
	padding: 23px 0 ;
	/*font-family: 'Nanum Myeongjo';*/
	font-family: 'NanumSquareNeo-Variable';
	font-weight: 800;
	font-size: 1.75em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: #333;
}

 

 

참고로 스킨별로 블로그 제목 및 본문 글씨체 변경을 위한 코드 위치를 알려드리겠습니다.

 

스킨명	제목 변경 코드 위치	본문 변경 코드 위치
북클럽	header h1	web font load의 body 또는 entry-content p
Watever
Poster
Odyssey	.article-header .title-article	article-view p
Letter	body, button, input, select, table, textarea 하단의 font-family에 추가(기본형 기준)
Square	15~20번 사이 textarea의 font-family에 추가(기본형 기준)

 

---

 

2. 글자 크기 변경하는 방법

티스토리에서 기본 제공하는 글자 크기에서 가독성을 높이기 위해 크기를 변경해야 할 부분이 있습니다. 특히 제목 2(h2), 제목 3(h3), 제목 4(h4)의 크기는 동일하게 설정하는 것이 좋습니다. 그 이유는 제목 4로 갈수록 글자 크기가 본문과 구별이 어려울 정도로 비슷해집니다. 글의 제목과 본문이 잘 구분되지 않아 글을 이해하는데 어려움을 줄 수 있습니다. 변경 방법은 다음과 같습니다.

 

• 관리자 화면 → 스킨편집 → html 편집 → CSS → font-size 수정

 

 

2-1. 글자 크기 변경

북클럽 기준 제목, 본문, 인용, 리스트, 표 등의 글자 크기를 변경하는 방법에 대해서 알려드리겠습니다.

 

1. 관리자 화면 > 스킨편집 > html 편집 > CSS로 이동합니다.
2. CSS내부에 마우스를 클릭하고 Ctrl + F를 이용하여 entry를 검색합니다.
3. 항목별 font-size를 글에 맞게 조정합니다. 그리고 적용 및 새로고침을 실행합니다.

 

여기서 주의해야 할 점이 세 가지가 있습니다.

 

• 제목 2, 3, 4는 제목 1보다 글자 크기가 작아야 합니다. SEO 문제가 발생할 수 있습니다.
• 제목 2, 3, 4는 글의 내용을 쉽게 이해하도록 글자 크기를 같게 만들어 줍니다.
• 인용구 글자크기는 style로 지정되어 있어, font-size 자체가 없습니다. 크기를 변경하려면 별도로 font-size를 입력하면 해결할 수 있습니다.

 

CSS 코드명	항목	특기사항
entry-content h	제목	h2, h3, h4 1.5em으로 통일
entry-content p	본문	본문은 17 ~ 19px 로 설정, 즉 1.15em 추천
entry-content ul li, ol li	리스트	개인에 따라서 크기 설정
entry-content table	표
entry-content blockquote	인용	font-size를 CSS 코드에 직접 입력

 

제목 1을 제외한 제목 2, 3, 4의 글자크기를 1.5em으로 통일하였습니다.(북클럽 기준)

/* Entry Content */
.entry-content h1 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.6875em;
	line-height: 1.5;
	color: #000;
}
.entry-content h2 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
}
.entry-content h3 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
}
.entry-content h4 {
	clear: both;
	margin: 29px 0 22px;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;

 

 

인용 부분에는 앞서 설명드린 것처럼 font-size를 CSS코드에 직접 입력하였습니다.

.entry-content blockquote {
	margin-bottom: 40px;
	padding: 16px 20px;
	border-left: 4px solid #e6e6e6;
	font-size: 1.15em;
}

 

 

2-1-1. 스킨별 폰트 단위 및 변경 위치

티스토리에서 제공하는 스킨별로 폰트 크기의 단위가 다릅니다. 우선 아래 표를 통해 단위별 크기를 비교해 보겠습니다.

 

Pixels	EMs	Percent	Points
16px	1.000em	100%	12pt
18px	1.125em	112.5%	14pt
20px	1.250em	125%	15pt
24px	1.500em	150%	18pt

 

 

다음은 본문 글자 크기 기준 티스토리 스킨별 CSS 코드 위치입니다.

스킨명	폰트 단위	CSS 코드 위치(검색명)
Book Club	em	entry-content p
Poster	em	entry-content p
Portfolio	px	article-view p
Whatever	em	entry-content p
Odyssey	px	article-view p
Letter	px	article_view
Magazine	px	article-cont p
Square	px	entry(기본 기준 130번 줄)

---

 

지금까지 글씨체 및 글자크기 변경방법에 대해서 알아보았습니다. 글을 쓰는 사람과 글을 읽는 사람, 모두에게 쉽게 글을 이해하도록 도와주는 역할을 한다고 생각합니다. 실제 변경해 보시고 글을 써보시기를 바라겠습니다.

 

 

 

티스토리 스킨 변경방법과 변경후 필수 확인요소

티스토리 스킨 변경방법과 변경후 필수 확인요소