CSS font-variant 속성을 활용해 텍스트에 스몰캡스(small caps)를 적용하는 방법을 알아보세요. 그리고 스몰캡스를 정말 사용해야 할지 판단하는 기준까지 함께 살펴봅니다.
CSS font-variant 속성은 텍스트를 일반 대소문자로 표시할지, 아니면 스몰캡스(small-caps) 폰트로 표시할지 지정합니다. 이 속성에는 세 가지 값이 있습니다:
- normal — 기본 텍스트 케이스
- inherit — 부모 요소의 값을 상속
- small-caps — 스몰캡스 폰트 적용
기본적인 사용법은 다음과 같습니다:
.small-caps {
font-variant: small-caps;
}font-variant 속성을 사용하기 전에, 무엇을 언제 어떻게 정확하게 사용하는지 반드시 이해하고 시작하세요. 많은 개발자가 이 부분을 놓치곤 합니다.
먼저 일반 텍스트와 스몰캡스의 차이부터 정의해 보겠습니다:
- 일반 텍스트 케이스(Sentence case): 문장의 첫 글자만 대문자로 표기하는 평범한 문장 형태입니다. 지금 읽고 계신 이 문장처럼요.
- 스몰캡스(Small caps): 소문자와 자연스럽게 어우러지도록 설계된 작은 크기의 대문자입니다. 소문자의 x-height(엑스 하이트)와 비슷한 높이를 가집니다.
아쉽게도 웹 폰트 중에서 진짜(real) 스몰캡스를 제공하는 경우는 많지 않습니다.
텍스트에 font-variant: small-caps;를 적용하면 다음 두 가지 결과 중 하나가 나타납니다:
- 일반/문장 케이스 텍스트와 매끄럽게 어우러지는, 세심하게 디자인된 아름다운 스몰캡스 👌
- 컴퓨터가 임의로 생성한 가짜 스몰캡스로, 일반 텍스트와 어울리지 않아 전문성이 떨어져 보이는 경우 😒
진짜 스몰캡스 예시
다음은 일반/문장 케이스와 완벽하게 어우러지는 진짜 스몰캡스 폰트의 예시입니다:
위 예시가 잘 어울리는 이유는 사용된 폰트 패밀리인 Alegreya가 진짜 스몰캡스를 제공하기 때문입니다.
가짜 스몰캡스 예시
다음은 가짜 스몰캡스 폰트의 예시입니다:
이 스몰캡스가 일반 텍스트 케이스와 자연스럽게 어우러지지 않는 모습을 확인해 보세요.
위 예시 역시 Alegreya를 사용했지만, Alegreya SC 폰트 페이스를 비활성화해 가짜 스몰캡스로 표시되는 모습을 보여주고 있습니다.
font-variant: small-caps 적용 시 텍스트가 어떻게 보이는지는 선택한 서체(폰트 패밀리)가 진짜 스몰캡스를 제공하는지 여부에 달려 있습니다.
안타깝게도 진짜 스몰캡스는 드물습니다. 따라서 CSS 스타일시트에서 font-variant: small-caps를 사용하기 전에 다음 두 가지를 먼저 확인하세요:
- 사용하려는 서체에 진짜 스몰캡스가 포함되어 있는지 조사합니다. (있다면 서체 디자이너가 명시해 두었으니 찾아보면 됩니다.)
- 진짜 스몰캡스가 있다면, 프로젝트에서 올바르게 활성화되어 있는지 확인합니다.
이 조건을 충족하지 못한다면 이 속성을 사용하지 않는 것이 좋습니다.
다행히 font-variant 속성은 폰트에 OpenType 스몰캡스가 존재하면 자동으로 이를 불러옵니다. 하지만 다른 폰트를 임포트하듯 해당 폰트 파일을 프로젝트에 직접 포함해야 합니다. 그렇지 않으면 font-variant 속성은 컴퓨터가 생성한 저품질 가짜 스몰캡스를 대체(fallback)로 사용하게 되는데, 이는 절대 원하는 결과가 아닐 겁니다.