AAtomic CSS

font-variant

스몰캡(small-caps)과 커닝(kerning)을 제어합니다. fvsc로 장식적인 헤딩이나 라벨에 스몰캡을 적용할 수 있습니다.

클래스 목록

클래스CSS설명
fvnfont-variant: normal기본값. 특수 변형 없음
fvscfont-variant: small-caps소문자를 작은 대문자로 변환
fvascfont-variant: all-small-caps대소문자 모두 스몰캡으로 변환
fkafont-kerning: auto브라우저 자동 커닝 판단
fknfont-kerning: none커닝 비활성화
fknlfont-kerning: normal커닝 항상 적용

시각적 비교

font-variant와 font-kerning이 텍스트에 미치는 영향을 비교합니다.

Normal — fvn

The Quick Brown Fox Jumps Over The Lazy Dog

Small Caps — fvsc

The Quick Brown Fox Jumps Over The Lazy Dog

All Small Caps — fvasc

The Quick Brown Fox Jumps Over The Lazy Dog

Kerning None — fkn

The Quick Brown Fox Jumps Over The Lazy Dog

Kerning Normal — fknl

The Quick Brown Fox Jumps Over The Lazy Dog

클래스별 상세

fvnfont-variant: normal

기본값입니다. 스몰캡 등 특수 변형을 제거합니다.

<!-- 스몰캡 리셋 -->
<div class="fvsc">
  <p>스몰캡 적용된 텍스트</p>
  <p class="fvn">다시 일반 텍스트로</p>
</div>

fvscfont-variant: small-caps

소문자를 작은 대문자로 변환합니다. 장식적인 헤딩, 라벨, 약어 표시에 적합합니다.

<!-- 장식적 헤딩 -->
<h2 class="fvsc fs2-4rem fw700 cFAFAFA ls0-05em">
  Section Title
</h2>

<!-- 약어 라벨 -->
<span class="fvsc fs14px cA1A1AA ls0-05em">html / css / javascript</span>

fvascfont-variant: all-small-caps

대문자와 소문자 모두 스몰캡으로 변환합니다. 균일한 크기의 대문자 텍스트가 필요할 때 사용합니다.

<!-- 균일한 스몰캡 -->
<p class="fvasc fs16px cFAFAFA ls0-05em">
  All Letters Become Small Caps
</p>

fkafont-kerning: auto

브라우저가 커닝 적용 여부를 자동으로 결정합니다. 대부분의 경우 기본값으로 충분합니다.

<!-- 자동 커닝 -->
<p class="fka fs2rem cFAFAFA">AVATAR Typography WAR</p>

fknfont-kerning: none

커닝을 비활성화합니다. 고정폭 글자 간격이 필요하거나 성능 최적화가 필요한 경우 사용합니다.

<!-- 커닝 비활성화 -->
<p class="fkn fs2rem cFAFAFA">AVATAR Typography WAR</p>

fknlfont-kerning: normal

폰트에 포함된 커닝 정보를 항상 적용합니다. 타이포그래피 품질을 보장하고 싶을 때 명시적으로 사용합니다.

<!-- 커닝 강제 적용 -->
<p class="fknl fs2rem cFAFAFA">AVATAR Typography WAR</p>

팁 & 주의사항

small-caps vs text-transform: uppercase

fvsc는 소문자를 작은 대문자로 바꾸지만, ttu는 모두 같은 크기의 대문자로 변환합니다. 시각적 계층이 필요하면 small-caps를 사용하세요.

커닝은 폰트에 따라 다름

커닝 정보가 없는 폰트에서는 fknl과 fkn의 차이가 없을 수 있습니다.

font-stylefont-weighttext-transform