font-variant-caps 속성의 이해

font-variant-caps 속성은
요소의 텍스트를 소문자 대문자, 작은 대문자 또는 제목에 사용되는 변형된 대문자 등 다양한 대문자 변형 스타일로 지정합니다.

이 속성은 텍스트의 대소문자 형태를 시각적으로 변형하여 제목이나 강조 문구 등 다양한 부분에서 디자인의 개성을 표현할 수 있습니다.

CSS 데모: font-variant-caps 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    font-variant-caps: /* value */
}

구문

CSS 
font-variant-caps: normal; /* 초깃값 */
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/* 전역 값 */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: revert;
font-variant-caps: revert-layer;
font-variant-caps: unset;

값

font-variant-caps 속성은 아래 목록에서 단일 키워드 값을 사용하여 지정됩니다. 각 경우에 글꼴이 OpenType 기능과 관련된 값을 지원하지 않으면 글리프(glyph)를 합성합니다. 글리프는 글자가 어떻게 시각적으로 표시되는지, 즉 문자나 기호의 시각적 표현을 말합니다

font-variant-caps 속성의 값
normal 초깃값입니다.
변형된 대문자를 지원하지 않습니다. 텍스트는 일반적인 대소문자 스타일로 표시됩니다.
즉, 특별한 대소문자 변형이 없고, 기본 글꼴의 대소문자 규칙이 따릅니다.
small-caps 대문자는 변형이 없고, 소문자가 작은 대문자로 변형됩니다. (OpenType 기능: smcp)
즉, 소문자는 대문자 스타일을 따르되, 대문자보다 더 작은 크기로 표시됩니다.
all-small-caps 대문자와 소문자 모두를 작은 대문자로 변형합니다. (OpenType 기능: c2sc, smcp)
즉, 텍스트 전체가 작은 대문자로 변형됩니다.
petite-caps 대문자는 변형이 없고, 소문자가 작은 대문자로 변형됩니다. (OpenType 기능: pcap)
small-caps와 유사하지만, 소문자가 small-caps보다 더 작은 크기의 대문자로 변형됩니다.
all-petite-caps 대문자와 소문자 모두를 작은 대문자로 변형됩니다. 대문자는 원래 크기보다 작은 크기로 변형되고, 소문자는 더 작은 크기의 대문자 스타일로 변형됩니다. (OpenType 기능: c2pc, pcap)
all-small-caps와 유사하지만, 소문자가 all-small-caps보다 더 작은 크기의 대문자로 변형됩니다.
unicase 대문자는 작은 대문자 스타일로 변형되며, 소문자는 일반 소문자 스타일로 유지됩니다. (OpenType 기능: unic)
titling-caps 텍스트의 대문자를 제목에 적합한 특수한 대문자 형태로 변형합니다. (OpenType 기능: titl)
소문자는 그대로 유지됩니다. 폰트에서 제목용 대문자 글리프가 사용되며, 일반 대문자와는 다른 디자인으로 표현될 수 있습니다.

OpenType 기능과 font-variant-caps 속성과의 관계

font-variant-caps 속성의 값이 올바르게 작동하려면 글꼴이 OpenType 기능을 지원해야 합니다.
OpenType은 현대 디지털 타이포그래피의 표준으로 자리 잡고 있으며, CSS와의 강력한 연동을 통해 다양한 글꼴 변형을 가능하게 합니다.

OpenType은 Microsoft와 Adobe가 공동 개발한 글꼴 형식으로, 다양한 플랫폼과 장치에서 동일하게 작동하도록 설계되었습니다.

왜 OpenType 기능에 맞춰 값이 구현될까?

OpenType은 다음과 같은 특징을 갖고 있습니다.
OpenType은 다양한 글리프 변형(예: 작은 대문자, 소형 대문자)을 지원하는 태그를 포함합니다.

  • smcp: 작은 대문자(small-caps)
    소문자를 작은 대문자로 변환합니다.
  • pcap: 소형 대문자(petite-caps)
    소문자를 대문자보다 더 작은 크기의 대문자로 변환합니다.
  • c2sc: 대문자를 작은 대문자(cap-to-small-caps)
    기존의 대문자를 작은 대문자로 변환합니다.
  • c2pc: 대문자를 소형 대문자(cap-to-petite-caps)
    기존의 대문자를 소형 대문자로 변환합니다.
  • unic: 단일 대소문자(unicase)
    대문자와 소문자를 혼합된 형태(글꼴에 따라 다름)로 변환합니다.
  • titl: 제목 대문자(titling caps)
    제목에 적합한 스타일로 대문자를 변환합니다. 일반적으로 더 넓고 얇은 스타일의 대문자를 사용합니다.

이러한 태그들은 OpenType 글꼴이 해당 변형을 지원할 때 적용되며, OpenType을 기반으로 하면 글꼴마다 다르게 구현된 변형 스타일도 동일한 속성 값으로 제어할 수 있습니다.

참고

글꼴이 모든 태그를 지원하지 않을 수 있으므로, 선택한 글꼴의 OpenType 기능을 확인하는 것이 중요합니다. Google Fonts와 같은 플랫폼에서는 글꼴의 OpenType 지원 여부를 명시해 두는 경우가 많습니다.

글꼴이 특정 OpenType 태그를 지원하지 않더라도 브라우저는 기본 글꼴 스타일을 사용하거나 유사한 변형으로 처리합니다.

폰트 지원 및 브라우저 동작

font-variant-caps 속성의 각 값(small-caps, all-small-caps, unicase 등)은 사용하는 폰트가 OpenType에서 해당 기능을 지원할 때만 올바르게 동작합니다. 특정 값이 기대한 대로 동작하지 않는 경우, 폰트를 바꿔보거나 브라우저의 폰트 지원 상황을 확인하세요.

값에 따른 예시

font-variant-caps 속성의 값에 따른 다음의 예시로 font-variant-caps 속성이 어떻게 구현되는지 살펴보겠습니다.

예시에 사용하는 공통 HTML 
<div>Hello world!</div>

normal

CSS 
font-variant-caps: normal; /* 초깃값 */

초깃값입니다.
변형된 대문자를 지원하지 않습니다. 텍스트는 일반적인 대소문자 스타일로 표시됩니다.

실제 적용된 모습

small-caps

CSS 
font-variant-caps: small-caps;

대문자는 변형이 없고, 소문자가 작은 대문자로 변형됩니다.

실제 적용된 모습

all-small-caps

CSS 
font-variant-caps: all-small-caps;

대문자와 소문자 모두를 작은 대문자로 변형합니다.

실제 적용된 모습

petite-caps

CSS 
font-variant-caps: petite-caps;

대문자는 변형이 없고, 소문자가 작은 대문자로 변형됩니다.
small-caps와 유사하지만, 소문자가 small-caps보다 더 작은 크기의 대문자로 변형됩니다.

petite-caps 값은 해당 글꼴이 OpenType 기능(pcap)을 지원하지 않을 경우 일부 브라우저에서는 small-caps처럼 유사하게 처리되거나 기본 텍스트 스타일이 유지될 수 있습니다. 이는 브라우저와 글꼴의 지원 여부에 따라 달라질 수 있으므로, 사용 시 호환성을 확인하는 것이 중요합니다.

실제 적용된 모습

unicase

CSS 
font-variant-caps: unicase;

대문자는 작은 대문자 스타일로 변형되며, 소문자는 일반 소문자 스타일로 유지됩니다.

실제 적용된 모습

titling-caps

CSS 
font-variant-caps: titling-caps;

텍스트의 대문자를 제목에 적합한 특수한 대문자 형태로 변형합니다.
소문자는 그대로 유지됩니다. 폰트에서 제목용 대문자 글리프가 사용되며, 일반 대문자와는 다른 디자인으로 표현될 수 있습니다.

titling-caps 값은 해당 글꼴이 OpenType 기능(titl)을 지원하지 않을 경우 눈에 보이는 효과가 없습니다. 이는 브라우저와 글꼴의 지원 여부에 따라 달라질 수 있으므로, 사용 시 호환성을 확인하는 것이 중요합니다.

실제 적용된 모습

형식 정의

font-weight 속성의 형식 정의
초깃값 normal
적용 요소 모든 요소
상속 예
애니메이션 아니오

font-variant-caps와 text-transform의 상호작용

text-transform이 텍스트를 대문자나 소문자로 변환하는 경우, font-variant-caps 속성은 이를 기반으로 시각적인 변형을 적용합니다.

부연설명
text-transform 속성은 스타일링 목적으로 요소의 텍스트를 대소문자로 변환하는 방법을 지정합니다.

예를 들어, text-transform: capitalize와 font-variant-caps: small-caps를 함께 사용할 경우, 각 단어의 첫 글자는 대문자로 변환되고, 그 소문자들은 작은 대문자 스타일 변형하여 표시됩니다.

HTML 
<div>Hello world!</div>
CSS 
div {
    text-transform: capitalize; /* 각 단어의 첫 글자를 대문자로 변환 */
    font-variant-caps: small-caps; /* 대문자는 변형이 없고, 소문자가 작은 대문자로 변형 */
}

이 경우, 텍스트는 각 단어의 첫 글자를 대문자로 변환되고, 그 소문자들은 small-caps 스타일(대문자는 변형이 없고, 소문자가 작은 대문자로 변형됩니다. )로 나타나게 됩니다.

실제 적용된 모습

브라우저 호환성

font-variant-caps 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
font-variant-caps 52 79 34 9.1
all-petite-caps 52 79 34 9.1
all-small-caps 52 79 34 9.1
normal 52 79 34 9.1
petite-caps 52 79 34 9.1
small-caps 52 79 34 9.1
titling-caps 52 79 34 9.1
unicase 52 79 34 9.1

명세서

font-variant-caps 속성의 명세서 사양
명세서 사양
font-variant-caps CSS Fonts Module Level 4
#font-variant-caps-prop

참고문헌

같이 보기