워드프레스 블로그의 가독성 극대화를 위해 본문 단락과 목록의 글자 크기를 추가 CSS를 통해 1.13rem으로 완벽하게 고정하는 방법, 작동 원리, 그리고 발생할 수 있는 잠재적 리스크까지 전문가의 관점에서 명쾌하게 분석합니다.
2026년 6월 현재, 최근 발표된 구글 코어 업데이트와 글로벌 웹 접근성 지침(WCAG) 동향을 살펴보면 ‘텍스트 가독성’은 단순한 디자인을 넘어 사용자 체류 시간과 SEO 랭킹을 결정짓는 최우선 과제로 평가받고 있습니다. 워드프레스 테마가 제공하는 기본 설정만으로는 본문 단락(p)과 목록(ul, ol)의 글자 크기 밸런스가 맞지 않아 독자의 시선이 분산되는 경우가 많습니다.
—> 목 차 <—
🕵️♀️ 왜 1.13rem이며, 추가 CSS를 사용해야 할까요?
💡 일상적인 비유로 이해하는 ‘rem’ 단위
웹 디자인에서 픽셀(px)이 ‘절대 늘어나지 않는 꽉 끼는 맞춤 정장’이라면, rem(Root em)은 ‘사용자의 체형에 맞춰 부드럽게 늘어나는 스판덱스 의류’와 같습니다. 웹브라우저의 기본 글자 크기(보통 16px)를 본사(Root)의 지침으로 삼고, 여기에 1.13배를 곱해 크기를 결정합니다. 즉, 1.13rem은 약 18px 정도의 크기로, 모바일과 PC 화면을 넘나들며 눈이 가장 편안함을 느끼는 최적의 수치입니다.
테마 자체의 설정(Customizer)을 건드리지 않고 추가 CSS(Additional CSS)를 사용하는 이유는 안전성 때문입니다. 집을 통째로 리모델링하는 대신, 인테리어 소품만 살짝 교체하듯 코드를 얹어주는 방식이므로 테마가 업데이트되더라도 설정이 날아가지 않고 유지됩니다.
🕵️♀️ 단락 및 목록 글자 크기 1.13rem 고정 추가 CSS 코드
워드프레스 관리자 화면의 외모 > 사용자 정의하기 > 추가 CSS 메뉴에 아래의 코드를 복사하여 붙여넣으시면 됩니다.
/* 워드프레스 본문 단락 및 목록 글자 크기 1.13rem 고정 및 최적화 */
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content li {
font-size: 1.13rem !important;
line-height: 1.75 !important; /* 글자 크기에 걸맞은 여유로운 줄간격 확보 */
word-break: keep-all; /* 단어 단위로 줄바꿈되어 가독성 향상 */
}
/* 하위 목록(들여쓰기 된 목록)의 크기도 일관되게 유지 */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
font-size: 1rem !important; /* 부모 요소(1.13rem) 기준 1배수로 상속 */
}🏇 코드 핵심 분석
.entry-content클래스: 이 코드가 웹사이트 전체가 아닌 ‘포스팅 본문 영역’에만 작동하도록 안전장치를 걸어둔 것입니다.!important선언: 기존 테마나 플러그인이 가진 디자인 규칙을 무시하고, 지금 작성한 글자 크기 설정을 1순위로 강제 적용하라는 강력한 명령어입니다.
🕵️♀️ 코드 적용 시 발생할 수 있는 리스크와 대비책
장점이 뚜렷한 만큼, 코드를 덮어씌울 때 발생할 수 있는 부작용(리스크)도 반드시 인지하고 계셔야 합니다.
🏇 리스크 1: 반응형 디자인과의 충돌 문제
!important를 사용하여 글자 크기를 강제 고정하면, 극도로 좁은 화면의 구형 스마트폰에서는 글자가 화면 비율에 비해 너무 크게 출력되어 텍스트가 줄 바꿈을 견디지 못하고 깨질 우려가 있습니다.
- 대비책: 최신 모바일 기기 기준으로는 1.13rem이 충분히 수용 가능하지만, 문제가 발생한다면 모바일 화면 크기(
@media (max-width: 768px))에서는 크기를1rem으로 낮추는 반응형 CSS 코드를 추가로 작성해야 할 수 있습니다.
앞서 적용한 1.13rem 고정 코드의 바로 아래줄에 다음 코드를 복사하여 이어 붙여넣으시면 됩니다. (외모 > 사용자 정의하기 > 추가 CSS)
/* 스마트폰 및 태블릿(768px 이하) 모바일 반응형 CSS 최적화 */
@media (max-width: 768px) {
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content li {
font-size: 1rem !important; /* 모바일 환경에 맞춰 기본 크기로 축소 */
line-height: 1.6 !important; /* 좁은 화면에 맞게 줄간격 미세 조정 */
}
/* 하위 목록(들여쓰기 된 목록)의 크기도 비율에 맞춰 축소 */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
font-size: 0.9rem !important;
}
}🏇 리스크 2: 특정 위젯 및 표(Table) 디자인 붕괴
만약 위의 코드에서 .entry-content라는 보호벽을 생략하고 p, ul, ol만 작성할 경우, 사이드바의 카테고리 목록이나 푸터(하단)의 작은 저작권 안내 문구까지 모두 1.13rem으로 거대해져 사이트 디자인이 무너집니다. 또한 본문 내에 삽입된 좁은 표 안에 목록을 넣었을 때 글자가 튀어나올 수 있습니다.
- 대비책: 제공해 드린 코드처럼 항상
.entry-content나.post-content등 본문을 지칭하는 클래스명을 앞에 붙여 타겟을 좁혀야 합니다.
🕵️♀️ 추가 CSS 적용 후 필수 체크리스트
코드를 발행한 후, 독자의 입장에서 다음 사항들을 철저히 검증해 보시길 바랍니다.
- PC와 모바일 교차 확인: 데스크톱 브라우저 창 크기를 줄여보거나, 스마트폰으로 직접 접속하여 단락과 목록의 글자 크기가 동일한지 확인합니다.
- 캐시 비우기: 화면에 코드가 반영되지 않는다면, 사용 중인 워드프레스 캐시 플러그인(예: LiteSpeed Cache)과 웹브라우저의 방문 기록 캐시를 삭제합니다.
- 목록 기호(Bullet) 정렬 상태 점검: 글자 크기가 커지면서 앞쪽의 동그라미(Bullet)나 숫자 기호의 상하 정렬이 단락의 중간으로 틀어지지 않았는지 확인합니다.
🕵️♀️ FAQ (자주 묻는 질문)
Q1. 워드프레스 편집기(구텐베르크) 화면에서는 글자 크기가 변하지 않는데 정상인가요?
네, 지극히 정상입니다. 추가 CSS는 ‘실제 독자가 보는 발행된 화면(Front-end)’에만 적용되는 코드입니다. 글을 작성하는 관리자 편집기 화면의 모습까지 바꾸려면 editor-style.css라는 별도의 코어 파일을 수정해야 하므로 권장하지 않습니다. 미리보기를 통해 확인하시는 것이 가장 정확합니다.
Q2. 1.13rem으로 설정했더니 단락과 단락 사이의 여백이 너무 좁아 보이는데 어떻게 하나요?
글자 크기가 커지면 상대적으로 여백이 비좁게 느껴질 수 있습니다. 이럴 때는 위 CSS 코드 안에 margin-bottom: 1.5em !important; 와 같은 하단 여백 코드를 추가해 주시면 숨통이 트이는 시원한 단락 배치를 완성하실 수 있습니다.
/* [PC 환경] 워드프레스 본문 글자 크기 18px 및 하단 여백 통합 최적화 */
.entry-content p,
.entry-content ul,
.entry-content ol {
font-size: 18px !important; /* 기존 1.13rem을 18px로 절대 고정 */
line-height: 1.75 !important;
margin-bottom: 1.5em !important; /* 여백은 글자 크기에 비례하도록 em 단위 유지 */
word-break: keep-all;
}
/* 목록 내부의 개별 항목(li) 설정 */
.entry-content li {
font-size: 18px !important;
margin-bottom: 0.5em !important;
}
/* 하위 목록 들여쓰기 시 16px로 시각적 위계 축소 */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
font-size: 16px !important;
margin-bottom: 0.5em !important;
}
/* [모바일 환경] 스마트폰 및 태블릿 반응형 최적화 (768px 이하) */
@media (max-width: 768px) {
.entry-content p,
.entry-content ul,
.entry-content ol {
font-size: 16px !important; /* 좁은 모바일 화면을 위해 16px로 강제 축소 */
line-height: 1.6 !important;
margin-bottom: 1.2em !important;
}
.entry-content li {
font-size: 16px !important;
margin-bottom: 0.4em !important;
}
}전문가의 팁: 폰트 크기는
px로 단호하게 고정하되, 줄간격(line-height: 1.75)이나 여백(margin-bottom: 1.5em)은 단위 없이 배수를 쓰거나em단위를 그대로 유지하는 것이 좋습니다. 그래야 추후 18px을 20px로 수정하더라도 여백이 폰트 크기에 비례하여 자동으로 넓어지기 때문입니다.
