티스토리 블로그에서 폰트와 텍스트 스타일링을 적절하게 설정하는 것은 블로그 디자인과 가독성에 매우 중요한 요소입니다. 블로그 포스트의 가독성을 높이고, 사용자 경험을 향상하기 위해 어떻게 폰트와 텍스트 스타일을 최적화할 수 있는지 알아보겠습니다.
1. 티스토리 블로그 기본 폰트 설정
폰트는 블로그의 첫인상을 결정짓는 중요한 요소입니다. 티스토리에서는 기본적으로 제공되는 웹 안전 폰트를 사용하거나, 구글 폰트와 같은 외부 폰트를 사용하여 독특한 스타일을 만들 수 있습니다.
개인적으로는 눈누에서 폰트를 가져와서 사용하시길 추천드립니다.
폰트를 복사해서 스킨 편집 > CSS에 화살표 부분에 붙여 넣기 해주시면 폰트 적용은 끝이 납니다.
※적용은 적용일뿐 사용은 설정을 해주셔야 되는데 아랫부분에서 'font-family' 부분만 그대로 복사해서 붙여 넣기 하시면 적용이 됩니다.
구글 폰트 사용 예시
/* 구글 폰트 적용 예 */
body {
font-family: 'Noto Sans KR', sans-serif; /* 구글 폰트 적용 */
font-size: 16px;
line-height: 1.5; /* 줄 간격 설정 */
}
위의 코드는 기본적으로 'Noto Sans KR'이라는 폰트를 적용한 예시입니다. 구글 폰트를 사용하면 블로그의 전반적인 디자인을 쉽게 개선할 수 있습니다. 또한 font-size와 line-height를 조정하여 가독성을 높일 수 있습니다.
2. 본문 텍스트 스타일링
본문 텍스트는 블로그에서 가장 중요한 부분이기 때문에 폰트 크기와 줄 간격을 적절히 조정하여 읽기 쉽게 만들어야 합니다. 폰트 크기와 줄 간격을 설정하는 방법을 알아보겠습니다.
본문 텍스트 크기와 줄 간격 설정 예시:
/* 본문 텍스트 스타일 */
p {
font-size: 18px;
line-height: 1.8;
}
본문 텍스트의 font-size와 line-height를 조정하여 텍스트가 더욱 읽기 쉽고, 눈에 부담을 주지 않게 만들 수 있습니다.
※본문의 폰트도 변경하고 싶다면 마찬가지로 'font-family'를 추가해 주면 됩니다.
3. 제목과 소제목 스타일링
티스토리 블로그에서는 제목과 소제목을 강조하여 중요한 정보를 독자에게 전달하는 것이 중요합니다. <h1>, <h2>, <h3> 태그를 사용해 제목을 더 눈에 띄게 만들 수 있습니다.
제목 스타일링 예시:
/* 제목 스타일 */
h1, h2, h3 {
font-family: 'Roboto', sans-serif; /* 다른 폰트 사용 */
font-weight: bold;
color: #333; /* 글자 색상 설정 */
}
/* 소제목 스타일 */
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
제목은 글의 중요도를 강조하기 위해 크기나 글씨 두께를 조정할 수 있습니다. 제목에 font-weight와 font-size 속성을 활용하면, 독자가 중요한 내용을 쉽게 인식할 수 있습니다.
4. 텍스트 강조하기
텍스트를 강조하는 방법은 strong과 em 태그를 사용하는 것입니다. strong 태그는 굵은 글씨로 강조하며, em 태그는 이탤릭체로 강조합니다. 이런 강조 효과를 통해 중요한 정보를 더 눈에 띄게 만들 수 있습니다.
강조된 텍스트 스타일링 예시:
/* 강조된 텍스트 */
strong {
font-weight: bold;
color: #e74c3c; /* 강조 색상 */
}
em {
font-style: italic;
color: #2ecc71; /* 이탤릭체 색상 */
}
이렇게 강조된 텍스트는 사용자가 글을 읽을 때 중요한 정보를 빠르게 인식할 수 있도록 도와줍니다.
5. 링크 스타일링
블로그에서 링크는 독자에게 다른 페이지나 관련 정보를 제공하는 중요한 요소입니다. 링크 스타일을 수정하여 링크를 더 눈에 띄게 만들 수 있습니다. 기본적으로 링크는 파란색으로 표시되지만, 색상과 밑줄을 제거하여 더 깔끔하게 만들 수 있습니다.
링크 스타일링 예시:
/* 링크 스타일 */
a {
text-decoration: none; /* 밑줄 제거 */
color: #3498db; /* 링크 색상 */
transition: color 0.3s ease; /* 색상 변화에 부드러운 전환 효과 추가 */
}
a:hover {
color: #e74c3c; /* 마우스 오버 시 색상 변경 */
}
위의 예시에서는 링크에 마우스를 올렸을 때 색상이 변경되도록 하여, 사용자에게 직관적인 피드백을 제공합니다.
6. 텍스트 정렬과 여백 조정
글을 정렬하고 여백을 조정하는 것도 중요한 스타일링입니다. 텍스트를 text-align 속성을 사용해 왼쪽, 가운데, 오른쪽으로 정렬할 수 있으며, padding과 margin을 이용해 텍스트 주위의 여백을 설정할 수 있습니다.
정렬과 여백 설정 예시:
/* 텍스트 정렬 */
p {
text-align: justify; /* 양쪽 정렬 */
}
/* 여백 설정 */
h1 {
margin-bottom: 20px;
}
p {
padding: 10px;
}
텍스트를 정렬하고 여백을 조정하면, 블로그 콘텐츠가 더 깔끔하고 정돈된 느낌을 줍니다.
7. SEO 최적화와 폰트 사용
SEO를 최적화하려면 폰트와 텍스트 스타일링을 잘 설정하는 것뿐만 아니라, 글에서 사용하는 키워드와 제목 태그도 중요합니다. <h1>, <h2>, <h3> 태그는 SEO에서 중요한 역할을 하므로, 주요 키워드를 제목과 소제목에 자연스럽게 포함시키는 것이 좋습니다.
예를 들어, "티스토리 폰트 설정"이나 "폰트 스타일링 방법"과 같은 키워드를 제목에 포함시키면, 검색엔진에서 해당 페이지가 더 잘 노출될 수 있습니다.
8. 결론
티스토리 블로그에서 폰트와 텍스트 스타일링을 최적화하면 블로그 디자인뿐만 아니라, 가독성도 향상됩니다. SEO를 고려하여 텍스트 스타일을 설정하면 검색엔진에서 더 잘 노출되고, 더 많은 방문자를 유도할 수 있습니다. 폰트와 텍스트 스타일을 적절히 설정하여 블로그의 품질을 높여보세요.