글꼴을 바꿨는데 본문이 여전히 길고 답답해 보일 수 있다. 제목의 크기나 읽는 폭, 줄 간격은 글꼴 이름 하나로 정해지지 않는다. 나는 현재 작업의 한영 본문과 도구형 글 CSS를 다시 읽고 이 조건을 함께 조정하는 작은 모듈을 만들었다.

여기서 남기는 값은 모든 사이트에 그대로 붙일 정답이 아니다. 실제 문구를 넣고 다른 폭과 크기에서 확인할 출발점이다. 읽는 영역을 구별하고 제목의 구조를 유지하며 한글과 영문을 각각 살펴보는 방법을 구현과 예문으로 남긴다.

글꼴을 바꾸기 전에 읽는 구간을 구별한다

첫 화면의 짧은 제목과 길게 읽는 본문은 같은 크기와 폭을 쓰지 않아도 된다. 현재 홈페이지의 첫 제목에는 큰 크기와 짧은 설명이 있고 블로그에는 본문과 목차를 나눈 읽기 구조가 있다. 나는 어떤 문장이 오래 읽히는지 먼저 보고 그 구간의 조건을 정한다.

도구형 글의 CSS에도 본문 폭과 제목 크기, 모바일에서 달라지는 규칙이 따로 있다. 같은 글꼴 이름을 넣었다고 이 조건들이 자동으로 정리되지는 않는다. 글꼴을 고르는 일과 본문의 줄 길이, 제목 위계, 여백을 정하는 일을 함께 해야 한다.

읽는 폭은 화면 전체의 폭과 다르다

넓은 모니터라고 본문을 끝까지 펼칠 필요는 없다. 글을 찾는 목록과 사진은 넓게 쓸 수 있어도 긴 문장을 읽는 영역은 별도의 최대 폭을 가질 수 있다. 확인한 두 글 레이아웃은 목차와 본문을 그리드로 나누고 본문 칸에 별도 폭을 둔다.

아래 모듈은 글꼴에 따른 측정 단위와 rem 최대 폭, 화면의 실제 여유를 함께 사용한다. ch 값을 글자 수로 설명하지 않는다. 같은 단위라도 글꼴과 한글·영문의 모양, 굵기에 따라 실제 줄은 달라진다. 숫자 하나를 모든 글의 정답으로 쓰기보다 실제 예문을 넣어 비교하는 출발점으로 둔다.

제목의 크기와 간격은 구조를 보여준다

제목을 모두 크게 만들면 어떤 질문이 상위이고 어떤 설명이 그 안에 있는지 구별하기 어려울 수 있다. 글의 제목, 구간 제목, 본문을 다른 크기와 간격으로 연결하고 문서의 실제 제목 태그도 그 관계에 맞춘다. 시각적으로 큰 글씨를 넣는 것과 문서의 구조를 만드는 것은 함께 확인할 일이다.

모듈의 제목은 최소와 최대 크기 사이에서 조정하고 줄 간격을 따로 둔다. 본문 크기는 상대 단위로 바꿀 수 있게 했다. 긴 제목이 여러 줄이 되는 상황도 자연스럽게 받아들이며 중요한 단어 사이의 공백을 크기 문제를 해결하려고 없애지 않는다. 문구와 CSS를 각각 살펴야 하는 이유다.

한글과 영문은 같은 숫자로 끝내지 않는다

한글은 단어 안을 어디에서 나눌지, 영문은 긴 단어와 식별자를 어떻게 이어갈지에 따라 모양이 달라진다. 현재 블로그 CSS에도 언어와 화면 폭에 따라 조정되는 규칙이 있다. 아래 예시는 한글의 단어 유지와 긴 문자열의 줄바꿈을 함께 두고 영문은 기본 단어 흐름을 사용한다.

선택한 글꼴이 한글 글리프를 갖지 않으면 다른 글꼴이 대신 표시될 수 있다. 예시에서 계열을 바꾸는 것은 실제 서체 파일의 포함과 지원을 검사하는 기능이 아니다. 적용할 사이트의 글꼴 파일과 로딩, 대체 글꼴, 실제 양쪽 언어의 제목과 긴 문장을 확인해야 한다.

다시 사용할 읽기 CSS

아래 CSS는 이번 글을 위해 작성한 독립 예시다. 읽기 영역에 적용하고 본문 크기와 폭의 변수를 바꿀 수 있다. 기존 홈페이지의 모든 글꼴과 레이아웃을 이 값으로 교체한 것은 아니다. 원래 소스에서 확인한 폭과 제목 구분을 새 예시의 조건으로 정리했다.

폭에는 화면 여유의 제한을 먼저 두고 본문은 내용에 따라 늘어난다. 확대와 긴 식별자도 적용 자료로 보아야 한다. 글꼴 하나를 바꾸었을 때 좋은지 판단하기 전에 제목과 문단, 링크와 코드까지 같은 읽기 영역에서 함께 살펴볼 수 있도록 한다.

코드와 구현 살펴보기

CSS · 글꼴·폭·위계를 함께 적용하는 읽기 영역

.reading-sample {
  --copy-measure: 58ch;
  --copy-size: 1.0625rem;
  box-sizing: border-box;
  inline-size: min(100%, var(--copy-measure));
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem);
  font-family: system-ui, sans-serif;
  font-size: var(--copy-size);
  line-height: 1.85;
  color: #263b30;
  background: #fff;
  overflow-wrap: anywhere;
}
.reading-sample[lang="ko"] { word-break: keep-all; line-height: 1.95; }
.reading-sample[lang="en"] { word-break: normal; }
.reading-sample h1 { margin-block: 0 1em; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.6rem); line-height: 1.4; letter-spacing: -.025em; }
.reading-sample h2 { margin-block: 1.8em .8em; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.65rem); line-height: 1.5; }
.reading-sample p { margin-block: 0 1.1em; }
.reading-sample code { font-size: .9em; }
@media (max-width: 480px) { .reading-sample { padding: 1rem; } }

크기와 폭을 바꾸어 읽는 실행 예문

아래 예문은 고객의 실제 문구를 옮기지 않고 이번에 새로 작성했다. 폭, 본문 크기, 글꼴 계열을 바꾸어 같은 글이 어떻게 구성되는지 살펴볼 수 있다. 다른 언어의 페이지에는 그 언어의 예문을 넣었다. 이 조작은 예시의 CSS 상태만 바꾼다.

공개 응답의 HTML 블록과 스크립트 문법은 확인하지만 새 PC·모바일 화면을 열어 줄바꿈을 측정한 결과는 아니다. 글꼴의 체감 가독성이나 모든 기기의 확대 동작도 검증하지 않았다. 현재 소스의 선언과 새 구현, 이후 필요한 실제 읽기 검토를 구별해 남긴다.