서체

웹 기능: font-size rem em 단위 line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max(), clamp() 표시 영역 단위

전반적인 권장사항

  • 글꼴 크기 상속 중에 상대적인 크기 조정을 보장하려면 line-height에 단위가 없는 숫자(예: 1.5)를 사용하세요.
  • overflow-wrap: break-word (또는 anywhere)를 사용하여 긴 URL을 포함합니다.
  • 글꼴 크기에 px를 사용하지 마세요. 사용자의 브라우저 글꼴 크기 환경설정 (루트 글꼴 크기)을 적용하려면 rem를 사용하고, 문맥에 맞는 크기 조정을 하려면 em/백분율을 사용하세요.

가독성

  • 긴 텍스트 줄 피하기: 단락 블록의 너비를 최대 80자(영문 기준)로 제한합니다.
  • 공백의 강 방지: text-align: justify는 텍스트를 읽기 어렵게 만들 수 있으므로 피하세요. 사용해야 하는 경우 hyphens: auto와 결합하여 단어 사이에 과도한 공백이 생기지 않도록 합니다.
  • 장식용 글꼴 사용 금지: 주요 읽기 콘텐츠에는 필기체 서체를 사용하지 않습니다.
  • 강조를 위해 전부 대문자로 표시하지 않기: 시각적 강조를 위해 굵게 표시하고 의미론적 강조를 위해 <em>/<strong>를 사용합니다.
  • 전반적으로 강조 제한: 강조가 너무 많으면 의미가 없어집니다. 콘텐츠를 읽는 방식을 변경하는 경우에만 강조를 적용하세요.
  • 사용자 확대/축소 환경설정 지원: 사용자가 콘텐츠나 기능을 손실하지 않고 텍스트 크기를 최대 200% 까지 조절할 수 있도록 허용합니다.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

텍스트 줄바꿈

  • 균형 잡힌 광고 제목 및 광고 제목과 유사한 콘텐츠 (예: <th>)에는 text-wrap: balance를 사용합니다.
  • 긴 형식의 본문 텍스트 (단락, 인용문 등)에는 text-wrap: pretty를 사용합니다.
  • text-wrap: balance 또는 text-wrap: pretty를 신중하게 사용하세요. 성능 비용이 발생하므로 *에 적용하지 마세요.
  • 표시되는 상자 (배경, 테두리, 그림자 등)가 있는 요소에는 text-wrap: balance를 사용하지 마세요. 컨테이너의 너비가 변경되지 않고 해당 너비 내에서 텍스트가 줄바꿈되는 방식에만 영향을 미치기 때문입니다. 이로 인해 컨테이너 끝에 빈 공간이 생길 수 있으며, 이는 일반적으로 바람직하지 않습니다.

반응형 서체

  • clamp()에서 표시 영역 상대 단위와 글꼴 상대 단위를 결합하여 표시 영역 크기에 따라 글꼴 크기를 조정하면서 원하는 범위 내에 유지되도록 해야 합니다. 예를 들면 clamp(2rem, 1rem + 5vw, 4rem)입니다. 표시 영역 상대 단위와 글꼴 상대 단위의 비율을 조정하여 글꼴 크기가 변경되는 속도를 제어합니다.
  • clamp() 없이 vw만 글꼴 크기에 사용하지 마세요. 극단적인 화면에서 텍스트가 너무 작거나 너무 크게 조정될 수 있습니다.