[CSS] 텍스트 문장의 좌우 크기는 얼마로 잡는 것이 적절할까?

 

텍스트 문장의 좌우 크기는 얼마로 잡는 것이 적절할까?

 

웹사이트나 모바일 화면에서 텍스트를 읽는 사용자의 경험을 좌우하는 중요한 요소 중 하나는 바로 텍스트 문장의 좌우 크기입니다. 읽기 편한 줄 너비를 유지하면 가독성을 높이고 사용자 경험을 개선할 수 있습니다. 이 글에서는 TailwindCSS의 max-w-prose유틸리티 클래스를 중심으로, 영문 및 한글 디지털 타이포그래피에서 적절한 텍스트 줄 너비에 대한 일반적인 가이드를 다룹니다.

 

왜 줄 너비(좌우 크기)가 중요한가?

 

문장의 줄 너비가 너무 넓거나 좁으면 다음과 같은 문제가 발생할 수 있습니다:

• 너무 넓은 경우: 독자가 한 줄을 끝까지 읽은 후 다음 줄로 이동할 때 시선 이동이 불편해지고 집중력이 떨어집니다.

• 너무 좁은 경우: 지나치게 잦은 줄 바꿈으로 인해 텍스트 흐름이 끊기고 읽기 피로감을 유발합니다.

 

따라서, 이상적인 줄 너비는 독자가 편안하게 읽을 수 있는 적절한 글자 수(영문) 또는 한글 음절 수를 포함해야 합니다.

 

영문 텍스트의 줄 너비 가이드

 

영문 텍스트는 다음 기준을 따르는 것이 일반적입니다:

• 최적의 글자 수: 한 줄당 45~75자.

• 권장 범위: 약 65자로 설정하는 것이 가장 이상적입니다. 이는 독자들이 쉽게 텍스트를 읽고 이해할 수 있는 길이입니다.

 

TailwindCSS의 max-w-prose 클래스는 이러한 가이드를 반영한 도구입니다:

 

/* max-w-prose의 CSS */
.max-w-prose {
  max-width: 65ch;
}

 

• 65ch: 한 줄에 약 65개의 문자를 포함하도록 최대 너비를 설정합니다.

• ch 단위는 글꼴에서 0 문자 폭에 따라 조정되므로, 글꼴 크기 및 스타일에 따라 유연하게 반응합니다.

 

한글 텍스트의 줄 너비 가이드

 

한글은 문장 구조와 글꼴 특성상 영문보다 줄 너비가 더 좁아도 읽기 편리합니다. 일반적으로 다음과 같은 가이드를 참고합니다:

• 최적의 음절 수: 한 줄당 약 20~40자.

• 권장 범위: 한글 문장은 약 25~30자가 적당합니다.

 

한글 디지털 타이포그래피에서의 참고 사항:

• 웹 콘텐츠: 한글 콘텐츠의 경우 모바일 화면에서는 글자 수 기준으로 약 15~20자를 넘지 않는 것이 좋습니다.

• 책이나 논문: 더 긴 줄 길이가 허용되지만, 여전히 30자 이내를 선호합니다.

 

한글의 경우, max-w-prose처럼 텍스트를 자동으로 조정해 주는 유틸리티가 없더라도 TailwindCSS의 max-width 속성을 활용하여 적절한 줄 길이를 설정할 수 있습니다.

 

<div class="max-w-[40ch] mx-auto">
  <p>이 문장은 한 줄에 최대 40자의 한글 음절을 포함할 수 있도록 설정되었습니다. 적절한 줄 길이는 가독성을 유지하며 사용자의 읽기 경험을 향상시킵니다.</p>
</div>

 

영문과 한글 텍스트의 차이

1. 단어 길이:

• 영문은 단어 간 띄어쓰기가 많아 자연스레 더 긴 줄을 읽는 데 무리가 없습니다.

• 한글은 음절 단위로 구성되어 있어 짧고 간결한 문장이 선호됩니다.

2. 글꼴 크기:

• 영문은 일반적으로 16~18px을 권장하며, 줄 높이는 1.5배 정도 설정합니다.

• 한글은 1416px 정도가 적합하며, 줄 높이는 약 1.61.8배로 설정하여 가독성을 높입니다.

 

실제 적용 사례

 

TailwindCSS와 함께하는 예제

 

TailwindCSS를 활용해 영문 및 한글 텍스트에 적절한 줄 길이를 설정하는 방법은 다음과 같습니다:

 

<div class="max-w-prose mx-auto p-4">
  <h1 class="text-xl font-bold">영문 텍스트</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
  </p>
</div>

<div class="max-w-[40ch] mx-auto p-4">
  <h1 class="text-xl font-bold">한글 텍스트</h1>
  <p>
    이 문장은 한 줄에 적당한 음절 수를 포함하여 가독성을 최적화한 예제입니다. 좌우 크기를 적절히 설정하면 사용자가 읽기 편해집니다.
  </p>
</div>

 

결론

 

적절한 텍스트 문장의 좌우 크기는 영문 텍스트의 경우 약 65자, 한글 텍스트의 경우 약 25~30자로 설정하는 것이 이상적입니다. TailwindCSS의 max-w-prose와 같은 도구를 활용하면 간편하게 이러한 최적의 줄 길이를 구현할 수 있습니다.

문장 좌우 크기를 신경 쓴다면 사용자 경험과 가독성을 크게 향상시킬 수 있으니, 텍스트 중심의 콘텐츠 제작 시 꼭 고려해 보세요! 🚀