CSS의 font-stretch 속성을 사용하면 텍스트를 좁게(축약형) 또는 넓게(확장형) 표현할 수 있습니다.
이렇게 너비가 조정된 서체는 각각 축약형(condensed) 폰트, 확장형(expanded) 폰트라고 부릅니다.
축약형 폰트와 확장형 폰트의 차이
- 축약형(Condensed) 폰트: 획(stroke)의 폭이 좁고, 일반 폰트에 비해 글자 사이 간격(자간·행간)도 훨씬 좁은 것이 특징입니다.
- 확장형(Expanded) 폰트: 글자 높이에 비해 획의 폭이 일반 폰트보다 넓게 설계된 서체입니다.
font-stretch에서 사용할 수 있는 값
font-stretch 속성에는 아래와 같은 키워드 값(폰트 페이스 종류)을 지정할 수 있습니다.
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
참고로 키워드 외에 백분율 값도 사용할 수 있습니다. 예를 들어 font-stretch: 125%;처럼 작성하며, ultra-condensed는 50%, normal은 100%, ultra-expanded는 200%에 해당합니다.
코드 예제
h1 {
font-family: sans-serif;
font-stretch: expanded;
}
h2 {
font-family: sans-serif;
font-stretch: condensed;
}사용 시 주의사항
중요: 대부분의 서체(폰트 패밀리)에는 축약형이나 확장형 폰트 페이스가 기본적으로 포함되어 있지 않습니다.
따라서 CSS 스타일시트에서 font-stretch 속성을 사용하기 전에, 사용하려는 폰트 패밀리에 원하는 축약형 또는 확장형 폰트 페이스가 실제로 존재하는지 반드시 확인해야 합니다.
만약 선택한 폰트 패밀리에 해당 폰트 페이스가 없는 상태에서 font-stretch 속성을 적용하면 아무 변화도 일어나지 않습니다. 가짜 볼드(faux bold)나 가짜 이탤릭(faux italic)처럼 컴퓨터가 임의로 생성한 보기 흉한 폰트가 만들어지지는 않으니 안심해도 됩니다.
다만 브라우저 기술은 언제든 바뀔 수 있으므로, 의도한 결과를 확실히 보장하려면 사전에 폰트 페이스 지원 여부를 점검해 두는 것이 좋습니다.