웹사이트 검색

CSS line-height 속성을 사용하여 가독성 향상

이 기사에서는 CSS line-height 속성과 이를 사용하여 시각적으로 보기 좋고 읽기 쉬운 텍스트를 만드는 방법에 대해 알아봅니다.

이전에 line-height가 사용된 것을 본 적이 있을 것입니다.

p {
  font-size: 16px;
  line-height: 1.2;
}

그러나 어떻게 작동하며 CSS에서 어떤 역할을 합니까?

CSS의 활자체 뿌리

CSS의 많은 아이디어는 타이포그래피 분야에서 도출되었습니다. 한 가지 예는 래핑된 텍스트의 두 기준선 사이의 거리를 설정하는 CSS line-height 속성입니다.

\기준선은 텍스트가 놓이는 가상의 선입니다.

예를 들어 <div> 태그 안에 다음과 같은 짧은 텍스트 스니펫이 있는 경우:

<div>
  The alligator went for a swim in the deep lagoon.
</div>

텍스트가 다음 줄로 래핑되도록 브라우저 창을 드래그하면 두 개의 기준선과 줄 높이(노란색 화살표로 표시됨)가 생깁니다.

CSS line-height 속성 값이 크면 이 거리가 확장되고 값이 작으면 축소됩니다.

줄 높이 및 텍스트 가독성

line-height 속성은 사용자가 텍스트를 읽을 수 있도록 만드는 데 핵심적인 역할을 합니다. line-height의 크기를 줄이면 복잡하게 느껴질 것입니다. 이와 같은 텍스트를 오랜 시간 동안 읽는 것은 사용자에게 피곤함을 느낄 것입니다.

너무 크면 사용자가 읽고 있는 내용에 몰입하는 데 어려움을 겪을 수 있습니다.

그러나 올바른 line-height를 찾으면 텍스트가 넓고 조화롭게 느껴질 것입니다 💮🌺🌸

올바른 line-height를 찾는 것은 필요에 따라 다르지만 또한 사용 중인 글꼴 모음에 따라 다릅니다. 각 글꼴에는 고유한 특성이 있기 때문입니다. 상당한 텍스트 블록에서 다르게 "읽을\ 것입니다.

예를 들어 Helvetica와 Times New Roman은 글꼴 크기가 같더라도 다른 행 높이 간격이 필요합니다.

line-height 구문

line-height에 모든 종류의 값을 제공할 수 있습니다! 또한 일반적인 px 및 % 값을 허용할 수 있기 때문에 다른 CSS 속성과 상당히 구별되지만 고유한 "unitless\ 값도 있습니다.

/* Use browser default.
 Typically "1.2" for
 all the major browsers */
line-height: normal;

/* Unitless (only line-height can do this!) */
line-height: 1.2;

/* <length> values like px, rem, em, pt */
line-height: 3em;

/* <percentage> values */
line-height: 120%;

line-height는 노란색 화살표로 표시됩니다.

브라우저가 라인 높이를 계산하는 방법

백분율 또는 "단위 없음\ 값을 사용하는 경우 글꼴 크기는 결과 line-height로 고려됩니다. 예를 들어 아래 두 스니펫은 19.2px로 계산됩니다. 브라우저에서:

.myText {
  font-size: 16px;
  line-height: 1.2  /* (19.2px = 16 x 1.2) */
}

.myText {
  font-size: 16px;
  line-height: 120%;  /* (19.2px = 16 x 1.2) */
}

그러나 px|em|rem|pt와 같은 "length\ 값을 사용하는 경우 font-size는 line- 높이:

.myText {
  font-size: 16px;
  line-height: 20px;  /* Always 20px! */
}

백분율과 "단위 없음\ 값은 모두 동일해 보이지만 미묘한 차이가 있습니다. 모범 사례는 가능하면 "단위 없음\ 값을 사용하는 것이 좋습니다.

결론

일반적으로 좋은 line-height 범위는 대부분의 글꼴에서 1.5에서 1.7 사이입니다. 예를 들어 Alligator.io는 1.6의 라인 높이를 사용합니다. 이것은 과학이라기보다 예술에 가깝습니다. 브라우저의 "개발자 도구\를 열어 "꼭\이라고 느껴질 때까지 행 높이를 조금씩 조정해야 하는 경우가 많습니다 ✨👌

자세한 내용은 MDN에서 line-height 문서를 참조하세요.