CSS로 텍스트 꾸미기 – 글자 크기, 색상, 줄 간격, 여백 설정하기

전자책의 가독성을 직접 좌우하는 텍스트 꾸미기를 다루려고 합니다.

책의 본문을 읽을 때, 글자가 너무 작거나 줄 간격이 답답하면 금세 피로해집니다.
반대로, 적당한 크기와 여백이 있으면 같은 내용도 훨씬 편하게 읽을 수 있죠.

 

 

1. CSS로 텍스트를 꾸밀 수 있는 기본 속성

전자책에서 가장 많이 쓰이는 텍스트 관련 속성은 아래와 같습니다.

 

1) 글꼴 (font-family)

css

p { font-family: "나눔명조", serif; }

👉 글자체를 지정합니다. ePub은 뷰어에서 글꼴을 변경할 수 있기 때문에, 특정 폰트를 강제로 지정하는 것보다 가독성 좋은 기본 폰트를 활용하는 게 안전합니다.

 

2) 글자 크기 (font-size)

폰트 크기를 예로 들면 1em은 뷰어의 기본 글자 크기를 의미한다.
2em은 기본 글자 크기의 2배가 된다.

css

p { font-size: 3em; }

👉 전자책에서는 px보다 em 단위를 권장합니다.
→ 뷰어에서 글자 크기를 키우거나 줄여도 자동으로 대응되기 때문입니다.

 

3) 글자 색상 (color)

css

p { color: #333333; }

👉 기본은 검정(#000)인데, 살짝 연한 #333을 쓰면 눈의 피로가 줄어듭니다.

 

4) 줄 간격 (line-height)

css

p { line-height: 1.6; }

👉 줄 간격을 넓히면 글이 훨씬 읽기 편해집니다. 보통 1.4 ~ 1.8 사이가 무난합니다.

 

5) 여백 (margin, padding)

css

p { margin: 10px 0; }

👉 문단 위아래에 여백을 주면 답답함이 사라지고, 내용이 구분되어 보입니다.

 

 

2. CSS 적용 

아래는 CSS를 적용하지 않은 상태의 HTML 모습입니다. 기본 글자 크기만 적용되어 단조롭게 보입니다.

 

📍 예시 코드:

html

<p class="text">CSS를 적용한 문장은 이렇게 달라집니다.</p>

👉   HTML만 작성했을 때는, 별다른 꾸밈이 없이 단순하게 표시됩니다.

 

css

.text {
font-family: "나눔명조", serif;
font-size: 1.1em;
line-height: 1.6; color:#333333;
margin: 10px 0;
}

👉  CSS를 적용한 후의 모습입니다. 글자 크기와 줄 간격, 색상이 조정되어 훨씬 가독성이 좋아집니다. 같은 문장이라도 CSS 속성을 적용하면 훨씬 읽기 편해집니다.

 

 

📌 제가 느낀 점

저는 초기에 그냥 기본 HTML 상태로만 전자책을 만들었는데, 금방 눈이 피로해서 읽기 힘들더라고요.
그 후 CSS로 줄 간격과 여백만 살짝 조정했을 뿐인데, 책의 완성도가 눈에 띄게 올라갔습니다.

즉, 화려한 꾸밈보다 읽기 좋은 기본 스타일링이 전자책에서는 훨씬 중요합니다.

 

---

 

✅ 오늘의 정리
- CSS로 텍스트를 꾸밀 때 핵심은 글꼴, 크기, 색상, 줄 간격, 여백
- px 단위 대신 em 단위를 쓰면 뷰어 확대/축소에도 대응 가능
- 색상은 #000보다는 #333 같은 톤 다운 컬러가 눈의 피로를 줄인다
- 작은 차이만 줘도 전자책의 가독성이 크게 달라진다

 

 

---

👉 지난 글 :  css 스타일링

CSS 선택자와 속성 심화, 실전 스타일링 예시

 

👉 다음 글 :  제목과 소제목 꾸미기

전자책에서 제목과 소제목 꾸미기 – Heading 태그 활용법