Fonts/OpenType features

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

98/190

안녕하세요! 프론트엔드 개발 강사입니다. 이번에 가져오신 문서는 타이포그래피의 꽃이자, 웹 페이지의 디테일한 퀄리티를 한 단계 끌어올려 주는 오픈타입(OpenType) 폰트 기능에 대한 내용이군요!

평소에 글자를 타이핑할 때 'fi'나 'ff'가 부딪혀서 미묘하게 안 예뻐 보이거나, 숫자들이 줄이 안 맞아서 답답했던 적 있으신가요? 고급 오픈타입 폰트 안에는 이런 문제를 해결해 줄 수 있는 '숨겨진 보물' 같은 디자인들이 가득 들어있습니다. 영문 문서라 속성 이름들이 낯설고 어려워 보일 텐데, 제가 실무에서 어떻게 쓰는지 이해하기 쉬운 구어체로 꼼꼼히 번역해 드릴게요. 같이 살펴볼까요? 😊

오픈타입 폰트 기능 (OpenType font features)

폰트 기능(Font features) 또는 변형(variants)이란, 하나의 오픈타입(OpenType) 폰트 파일 안에 숨겨져 있는 다양한 글리프(glyphs, 글꼴의 모양)나 문자 스타일을 말합니다. 여기에는 합자(ligatures) ('fi'나 'ffl'처럼 여러 문자가 합쳐져서 만들어진 특별한 모양), 커닝(kerning) (특정 글자 쌍 사이의 간격을 미세하게 조정하는 것), 분수(fractions), 숫자 스타일(numeral styles) 등 여러 가지가 포함됩니다. 이 모든 것들을 통틀어 '오픈타입 기능(OpenType Features)'이라고 부르며, 웹에서는 특정한 CSS 속성들이나 좀 더 원초적인 제어를 할 수 있는 font-feature-settings 속성을 통해 사용할 수 있습니다. 이 글에서는 CSS에서 오픈타입 폰트 기능을 사용하기 위해 알아야 할 모든 것을 알려드릴게요!

어떤 폰트들은 이런 기능 중 한두 개를 기본적으로 켜두기도 합니다(보통 커닝이나 기본 합자가 켜져 있는 경우가 많아요). 반면 어떤 기능들은 디자이너나 개발자가 특정 상황에 맞춰 직접 선택해서 켜도록 폰트 안에 숨겨져 있죠.

합자나 라이닝 피겨(lining figures: 소문자처럼 들쭉날쭉한 '올드스타일(oldstyle)' 숫자와 달리, 대문자처럼 키가 똑같이 맞춰진 숫자) 같은 포괄적인 기능뿐만 아니라, 아주 구체적인 기능들도 있습니다. 예를 들어 폰트 디자이너가 세트로 함께 쓰라고 만들어 둔 스타일 세트(stylistic sets), 알파벳 'a' 하나에 대해서도 여러 가지 모양을 선택할 수 있는 대체 글자(alternates), 심지어 동아시아 언어를 위한 언어별 맞춤 변형도 있습니다. 특히 동아시아 언어 변형 같은 경우는 단순히 예뻐 보이려는 '취향'의 문제를 넘어서, 그 언어를 올바르게 표현하기 위해 반드시 필요한 경우가 많습니다.

⚠️ 경고! (저수준 vs 고수준 속성)
폰트 기능을 활용하기 위해 만들어진 CSS 속성들이 꽤 많지만, 아쉽게도 모든 브라우저가 이를 완벽하게 지원하지는 않습니다. 이 문서에는 모든 속성이 소개되어 있지만, 많은 기능들은 여전히 저수준(low-level) 속성인 font-feature-settings를 사용해야만 제대로 작동합니다. 호환성을 위해 두 가지 방식을 모두 섞어 쓸 수도 있지만 코드가 너무 길어지겠죠.
font-feature-settings 하나로 모든 걸 제어할 때의 단점은, 여러 기능 중 딱 하나만 켜고 끄고 싶을 때도 기존에 적어둔 다른 폰트 기능 문자열까지 매번 전부 다 다시 적어줘야 한다는 점입니다. (이는 가변 폰트를 다루는 font-variation-settings 속성과 비슷한 골칫거리입니다.)

이 문서의 내용

폰트에 어떤 기능이 있는지 알아내기 (Discovering availability of features in fonts)
이 기능들을 왜 사용하나요? (Why you would use them?)
폰트 기능들 살펴보기 (The font features)
font-feature-settings 속성 (Font feature settings)
CSS 기능 감지(@supports)를 활용해 적용하기 (Using CSS feature detection for implementation)
같이 보기 (See also)

폰트에 어떤 기능이 있는지 알아내기 (Discovering availability of features in fonts)

폰트를 살 때 안내 문서가 딸려오지 않았다면, 내 폰트에 어떤 숨겨진 기능이 있는지 알아내는 게 가장 까다로운 일일 수 있습니다. (사실 폰트 제작자나 디자이너들은 이런 수고를 덜어주기 위해 샘플 페이지나 CSS 코드를 같이 제공하는 경우가 많습니다.) 하지만 이를 쉽게 알아낼 수 있게 도와주는 웹사이트들이 있어요.

wakamaifondue.com에 접속해서 화면의 동그라미 안에 여러분의 폰트 파일을 끌어다 놓으세요(Drop). 그러면 잠시 후 해당 폰트가 가진 모든 기능과 능력에 대한 완벽한 리포트를 볼 수 있습니다. Axis-praxis.org 역시 비슷한 기능을 제공하며, 테스트용 텍스트 블록에서 각 기능 버튼을 클릭하며 껐다 켰다 해볼 수도 있습니다.

💡 강사의 실무 팁! "Wakamai Fondue, 필수 즐겨찾기!"
실무에서 디자이너가 특이한 폰트 파일을 주고 "이거 숫자만 좀 다른 모양으로 나오게 해주세요~" 할 때가 있어요. 이럴 때 폰트 안에 그 기능이 있는지 없는지 끙끙대지 마시고, 바로 Wakamai Fondue에 던져 넣으세요! 그 폰트가 지원하는 CSS 코드를 그대로 복사해서 쓸 수 있게 다 알려줍니다.

이 기능들을 왜 사용하나요? (Why you would use them?)

이 기능들을 찾아내고 적용하는 데 품이 꽤 든다는 점을 생각하면, "굳이 이렇게까지 해야 해?"라는 질문이 당연히 나올 수 있습니다. 정답은 바로 이 기능들이 웹사이트를 훨씬 더 유용하고, 읽기 편하며, 고급스럽게(polished) 만들어주기 때문입니다.

합자(Ligatures): 'ff'나 'fi' 처럼 글자들이 겹쳐서 미워 보이는 곳을 자연스럽게 하나로 합쳐주어 글자 간격을 고르게 만들고 가독성을 높입니다.
분수(Fractions): 인테리어나 요리 레시피 사이트에서 1/2, 3/4 같은 분수를 한 덩어리로 예쁘게 만들어주어 훨씬 읽고 이해하기 쉽게 해 줍니다.
숫자(Numerals): 본문(문장) 사이에 껴있는 숫자들을 'oldstyle(올드스타일)'로 설정하면 소문자들과 키가 비슷해져서 글 속에 자연스럽게 스며듭니다. 반면, 가격표나 재무 제표처럼 숫자가 위아래로 정렬되어야 할 때는 'tabular numbers(표 숫자)'를 사용해 숫자의 가로폭을 똑같이 맞춰주면 표가 훨씬 깔끔해지죠. 대문자로 이루어진 단어 앞이나 숫자만 따로 있을 때는 키가 다 똑같은 'lining(라이닝)' 피겨를 쓰는 것이 더 보기 좋습니다.

이런 기능들 중 하나가 빠졌다고 해서 웹사이트가 고장 나는 건 아닙니다. 하지만 이 디테일들을 하나하나 챙길 때마다, 여러분의 사이트는 훨씬 사용하기 편해지고, 작은 디테일까지 신경 쓴 퀄리티 높은 사이트로 사용자들의 기억에 남게 될 것입니다.

오픈타입 기능은 폰트 안에 있는 '비밀의 방'과 같습니다. 이 방의 자물쇠를 열면 폰트의 모양과 동작을 미묘하게, 혹은 아주 극적으로 바꿔버릴 수 있는 방법들을 발견하게 되죠. 모든 오픈타입 기능을 항상 써야 하는 건 아니지만, 훌륭한 타이포그래피를 위해 반드시 필요한 기능들이 분명히 존재합니다. -- Tim Brown (Adobe 타이포그래피 총괄)

단순한 멋 부리기를 넘어, 본질일 때도 있습니다 (Sometimes it's substance, not just style)

font-variant-east-asian 같은 속성들은 특정 글자의 형태를 완전히 다른 모양으로 바꾸는 데 쓰입니다. 이것은 글의 의미나 가독성에 직접적인 영향을 미치죠. 이런 경우에는 단순히 "예뻐 보이라고" 넣는 것이 아니라, 콘텐츠 그 자체를 올바르게 전달하기 위한 필수적인 요소가 됩니다. (예: 한자/한문의 번체, 간체, 이체자 표현 등)

폰트 기능들 살펴보기 (The font features)

고려해야 할 여러 가지 폰트 기능들이 있습니다. 여기서는 W3C 사양서에 정의된 주요 속성(attributes)과 옵션들을 기준으로 그룹화하여 설명해 드리겠습니다.

📝 참고:
아래 예제들은 고수준(high-level) CSS 속성과 그에 상응하는 저수준(font-feature-settings) CSS 코드를 함께 보여줍니다. 브라우저마다 지원 현황이 달라서 완벽하게 똑같이 보이지 않을 수도 있지만, 대부분의 경우 첫 번째 코드와 두 번째 코드는 같은 결과를 만듭니다. 예제에 사용된 폰트는 Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script, Kokoro 입니다. (모두 무료로 사용할 수 있으며, 대부분 Google Fonts 등에서 제공됩니다.)

커닝 (Kerning)

관련 CSS 속성: font-kerning

커닝은 특정 글자 쌍(예: 'A'와 'V', 'T'와 'o') 사이의 간격을 아주 미세하게 조정하여 시각적으로 고르게 보이게 하는 기능입니다. 오픈타입 사양의 권장 사항에 따라, 이 기능은 브라우저에서 기본적으로 항상 켜져(on) 있습니다. 참고로 CSS의 letter-spacing(자간) 속성을 주면, 커닝 계산이 모두 끝난 다음에 그 위에 추가로 간격이 벌어진다는 점을 알아두세요.

(MDN Playground에서 코드를 수정하며 테스트해 보세요!)

/* 고수준 속성: auto | normal | none */
.container1 * {
  font-kerning: normal; /* 커닝 켜기 */
}
.inactive.container1 * {
  font-kerning: none; /* 커닝 끄기 */
}

/* 저수준 속성: 'kern' 1|0 (켜기 또는 끄기) */
.container2 * {
  font-feature-settings: "kern" 1;
}
.inactive.container2 * {
  font-feature-settings: "kern" 0;
}

💡 강사의 실무 팁! "커닝 끄지 마세요!"
특별히 레트로한 느낌이나 타이프라이터 같은 효과를 내고 싶은 게 아니라면, font-kerning은 절대 none으로 끄지 마세요. 폰트 디자이너가 피땀 흘려 맞춰놓은 글자 간의 최적의 밸런스가 다 깨져버리거든요!

대체 글자 (Alternates)

관련 CSS 속성: font-variant-alternates

폰트 제작자는 기본 글자 외에도, 소문자 'a'를 다른 스타일로 그렸다거나, 필기체에서 꼬리를 길게 빼는 화려한 장식(swashes) 등 다양한 대체 글리프(모양)를 폰트 파일 안에 넣어둘 수 있습니다. 이 속성을 사용하면 지정한 값에 따라 대체 글자 세트 전체를 한 번에 켜거나, 아니면 특정 글자 모양 하나만 콕 집어서 바꿀 수 있습니다.

아래 예제는 대체 글자를 다루는 여러 가지 방식을 보여줍니다. 이런 기능이 있는 폰트는 대체 글자들을 전체적으로 제공하기도 하고, '스타일 세트(stylistic sets)'로 묶어 제공하기도 하며, 개별 글자 단위로 제공하기도 합니다.
아래 CSS 예제에서는 @font-feature-values라는 특수한 규칙(at-rule)이 등장합니다. 이건 폰트 패밀리별로 쓸 수 있는 긴 오픈타입 태그 이름 대신, 우리가 외우기 쉬운 '단축 이름'이나 '옵션명'을 지어주는 데 사용됩니다. 이렇게 하면 특정 폰트 하나에만 적용되는 옵션을 만들 수도 있고, 여러 폰트에 공통으로 쓸 수 있는 옵션을 만들 수도 있죠.

/* @font-feature-values로 폰트의 숨겨진 기능 번호에 이름을 붙여줍니다 */
@font-feature-values "Plex Serif" {
  @styleset {
    alt-a: 1; /* 1번 세트를 'alt-a'라고 부르겠음 */
    alt-g: 2; /* 2번 세트를 'alt-g'라고 부르겠음 */
  }
  @stylistic {
    alternates: 1;
  }
}

@font-feature-values "Dancing Script" {
  @stylistic {
    alternates: 1;
  }
}

/* 고수준 속성으로 위에서 만든 이름을 불러와 적용합니다 */
.container1 * {
  font-variant-alternates: styleset(alt-a); /* 소문자 a의 스타일이 바뀝니다 */
}
.container1 .script {
  font-variant-alternates: stylistic(alternates);
}
.inactive.container1 * {
  font-variant-alternates: normal; /* 원래대로 복구 */
}

/* 저수준 속성으로 직접 4자리 코드를 입력하는 방식 (위와 똑같은 결과) */
.container2 * {
  font-feature-settings: "ss01"; /* ss01(스타일 세트 1번)을 켭니다 */
}
.container2 .script {
  font-feature-settings: "salt"; /* salt(스타일러스 앨터네이트)를 켭니다 */
}
.inactive.container2 * {
  font-feature-settings:
    "ss01" 0,
    "salt" 0;
}

이 예제에서, Dancing Script 폰트의 'My'라는 글자에 stylistic(alternates) (또는 "salt")를 주면 'M'의 모양이 훨씬 화려하게 렌더링 됩니다. 그리고 Plex Serif 폰트에 styleset(alt-a) (또는 "ss01")를 주면 오직 소문자 'a'의 모양만 변경되죠.

만약 코드에서 styleset(alt-a)를 styleset(alt-g)로 바꾼다면 어떻게 될까요? 소문자 'a'는 다시 원래의 밋밋한 둥근 모양으로 돌아가고, 대신 소문자 'g'의 꼬리 모양이 화려하게 바뀔 것입니다!

합자 (Ligatures)

관련 CSS 속성: font-variant-ligatures

합자(Ligatures)는 두 개 이상의 떨어져 있는 글자를, (자간을 맞추거나 미학적인 이유로) 더 매끄럽고 자연스럽게 보이도록 하나로 합쳐서 그린 특별한 글리프를 말합니다. 가장 흔한 합자로는 'fi', 'fl', 'ffl' 같은 것들이 있죠 (f의 머리와 i의 점이 부딪히는 걸 막기 위해 아예 글자를 이어버리는 겁니다).
이렇게 가장 자주 쓰이는 것들을 '표준 합자(common ligatures)'라고 부릅니다. 이 외에도 폰트에 따라 '임의 합자(discretionary ligatures)', '역사적 합자(historical ligatures)', '문맥 대체(contextual alternates)' 등 특수한 카테고리도 존재합니다. ('문맥 대체'는 엄밀히 말해 합자는 아니지만, 특정 글자들이 서로 만났을 때 모양을 자연스럽게 바꿔준다는 점에서 합자와 비슷한 역할을 합니다.)

보통 필기체(script) 폰트에서 많이 쓰이지만, 프로그래밍용 폰트 등에서는 아래 예제처럼 -> 기호를 실제 화살표(→) 모양으로 바꿔주는 데 사용하기도 합니다.

/* 고수준 속성 */
.container1 * {
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}
.inactive.container1 * {
  font-variant-ligatures: none;
}

/* 저수준 속성 (4자리 코드) */
/* 'liga'(기본 합자), 'dlig'(임의 합자), 'hlig'(역사적), 'calt'(문맥 대체) */
.container2 * {
  font-feature-settings: "dlig", "liga", "calt";
}
.inactive.container2 * {
  font-feature-settings:
    "dlig" 0,
    "liga" 0,
    "calt" 0;
}

💡 강사의 실무 팁! "코딩용 폰트의 비밀, 합자"
요즘 개발자들이 많이 쓰는 'Fira Code'나 'JetBrains Mono' 같은 폰트에서 === 나 != 를 타이핑하면 기호가 멋지게 합쳐지죠? 이게 바로 font-variant-ligatures 의 힘입니다! 코드 스니펫이나 개발 블로그를 만드실 때 이 기능을 켜주시면 정말 멋진 뷰를 만들 수 있어요.

위치 지정 (Position)

관련 CSS 속성: font-variant-position

이 속성은 타이포그래피에서 제대로 디자인된 위첨자(superscript)와 아래첨자(subscript) 글리프를 활성화할 때 사용합니다. 브라우저가 일반 글자 크기를 강제로 줄여서 위로 올리는 찌그러진 위첨자가 아니라, 폰트 디자이너가 기준선(baseline)이나 줄 간격(line spacing)을 망치지 않고 주변 텍스트와 완벽하게 어우러지도록 처음부터 작게 그려놓은 진짜 위/아래첨자 글자를 꺼내 쓰는 기능입니다. HTML의 <sup>(위첨자)나 <sub>(아래첨자) 태그와 함께 사용할 때 특히 유용합니다.

/* 고수준 속성: normal | sub | super */
.container1 .super {
  font-variant-position: super; /* 진짜 위첨자 글리프 사용 */
}
.container1 .sub {
  font-variant-position: sub; /* 진짜 아래첨자 글리프 사용 */
}
.inactive.container1 * {
  font-variant-position: normal;
}

/* 저수준 속성: 'subs', 'sups' */
.container2 .super {
  font-feature-settings: "sups";
}
.container2 .sub {
  font-feature-settings: "subs";
}
.inactive.container2 * {
  font-feature-settings:
    "sups" 0,
    "subs" 0;
}

대문자 형태 (Capitals)

관련 CSS 속성: font-variant-caps

오픈타입 기능 중에서 가장 많이 쓰이는 것 중 하나가 바로 완벽한 형태의 작은 대문자(small caps)입니다.
단순히 글자 크기만 줄여놓은 얇고 부실한 대문자가 아니라, 소문자들과 섞여 있을 때 두께와 밸런스가 딱 맞도록 디자이너가 특수하게 그려놓은 대문자들을 말합니다. 보통 긴 약어(acronyms)나 줄임말(abbreviations)을 본문에 쓸 때 눈에 확 띄는 걸 방지하기 위해 아주 많이 사용됩니다.

/* 고수준 속성: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps */
.container1 .small-caps {
  font-variant-caps: small-caps; /* 소문자를 스몰 캡스로 변경 */
}
.container1 .all-small-caps {
  font-variant-caps: all-small-caps; /* 대문자/소문자 모두 스몰 캡스로 변경 */
}
.inactive.container1 * {
  font-variant-caps: normal;
}

/* 저수준 속성: 'smcp', 'c2sc' */
.container2 .small-caps {
  font-feature-settings: "smcp" 1; /* small caps */
}
.container2 .all-small-caps {
  font-feature-settings:
    "c2sc" 1, /* capitals to small caps (대문자도 스몰 캡스로) */
    "smcp" 1; 
}
.inactive.container2 * {
  font-feature-settings:
    "smcp" 0,
    "c2sc" 0;
}

숫자 스타일 (Numerals)

관련 CSS 속성: font-variant-numeric

고급 폰트 안에는 한 가지 숫자에 대해서도 용도에 맞게 쓸 수 있는 여러 가지 스타일이 들어있습니다.

'Lining'(라이닝) 숫자: 숫자들이 모두 대문자처럼 똑같은 높이를 가지고 있고, 같은 기준선(baseline) 위에 올라가 있습니다.
'Oldstyle'(올드스타일) 숫자: 소문자처럼 위로 솟은 부분(ascenders)과 밑으로 내려오는 부분(descenders)이 있어서 숫자의 키가 들쭉날쭉합니다. 본문 텍스트 사이에 숫자가 껴 있을 때 주변 소문자들과 이질감 없이 스며들게 하기 위해 디자인된 숫자입니다.

또한 숫자들의 '간격(spacing)'에 대한 개념도 있습니다. 기본 설정은 '비례 간격(Proportional spacing, 숫자 1은 좁게 8은 넓게)'이지만, '표 간격(Tabular spacing)'을 설정하면 1이든 8이든 상관없이 모든 숫자가 똑같은 가로폭을 가지게 됩니다. 재무 제표처럼 수많은 숫자들이 위아래로 반듯하게 줄이 맞아야 할 때 필수적인 기능이죠.

이 속성을 통해 분수(fractions)도 예쁘게 표현할 수 있는데, 두 가지 방식을 지원합니다:

사선으로 그어진 분수 (Diagonal slashed fractions)
위아래로 쌓인 분수 (Vertically stacked fractions)

이 밖에도 '1st'나 '3rd' 같은 서수(Ordinals) 표현이나, 알파벳 O와 구분하기 위해 숫자 0 가운데에 사선을 긋는 'Slashed zero' 기능도 지원합니다.

라이닝 숫자와 올드스타일 숫자 (Lining and old-style figures)

/* 고수준 속성 */
.container1 .lining {
  font-variant-numeric: lining-nums; /* 키가 똑같은 숫자 */
}
.container1 .oldstyle {
  font-variant-numeric: oldstyle-nums; /* 키가 들쭉날쭉한 숫자 */
}
.inactive.container1 * {
  font-variant-numeric: normal;
}

/* 저수준 속성: 'lnum', 'onum' */
.container2 .lining {
  font-feature-settings: "lnum" 1;
}
.container2 .oldstyle {
  font-feature-settings: "onum" 1;
}
.inactive.container2 * {
  font-feature-settings:
    "lnum" 0,
    "onum" 0;
}

분수, 서수, 그리고 사선 그어진 0 (Fractions, ordinals, and slashed zero)

/* 고수준 속성 */
.container1 .diagonal-fractions {
  font-variant-numeric: diagonal-fractions; /* 3/16을 예쁜 한 덩어리로! */
}
.container1 .ordinal {
  font-variant-numeric: ordinal; /* 1st의 st를 작고 예쁘게 위로! */
}
.container1 .zero {
  font-variant-numeric: slashed-zero; /* 숫자 0 가운데에 빗금을 쫙! */
}
.inactive.container1 * {
  font-variant-numeric: normal;
}

/* 저수준 속성: 'frac', 'ordn', 'zero' */
.container2 .diagonal-fractions {
  font-feature-settings: "frac" 1;
}
.container2 .ordinal {
  font-feature-settings: "ordn" 1;
}
.container2 .zero {
  font-feature-settings: "zero" 1;
}
.inactive.container2 * {
  font-feature-settings:
    "frac" 0,
    "ordn" 0,
    "zero" 0;
}

동아시아 언어 (East Asian)

관련 CSS 속성: font-variant-east-asian

이 속성은 폰트 내에 포함된 다양한 동아시아 문자의 대체 형태(이체자, 번체/간체 등)를 꺼내 쓸 수 있게 해 줍니다. 아래 예제에서 원본 글자들과 jis78(1978년 일본 산업 규격에 맞춘 글자 모양) 속성을 주었을 때 한자의 모양이 어떻게 달라지는지 확인해 보세요.

/* 고수준 속성 */
.container1 * {
  font-variant-east-asian: normal;
}
.inactive.container1 * {
  font-variant-east-asian: jis78; /* JIS 1978 기준의 한자 형태로 변경! */
}

/* 저수준 속성: 'jp78' */
.container2 * {
  font-feature-settings: "jp78" 0;
}
.inactive.container2 * {
  font-feature-settings: "jp78";
}

font-variant 단축 속성 (Font variant shorthand)

font-variant 속성은 지금까지 소개한 위 모든 고수준(high-level) 속성들을 한 번에 정의할 수 있는 단축 속성(shorthand)입니다.

여기에 normal 값을 주면 모든 기능이 리셋되어 폰트의 기본 상태로 돌아갑니다.
반면 none 값을 주면, 합자(ligatures) 기능만 none으로 꺼버리고 나머지 기능들은 모두 기본(initial) 상태로 되돌립니다. 즉, 폰트 제작자가 커닝(kerning)을 기본적으로 켜두었다면, 여러분이 font-variant: none을 선언해도 커닝은 여전히 켜져 있다는 뜻입니다!

/* 고수준 단축 속성 사용 */
.container1 * {
  font-variant: common-ligatures discretionary-ligatures contextual diagonal-fractions;
}
.inactive.container1 * {
  font-variant: none; /* 모두 리셋 */
}

/* 저수준 속성으로 위와 똑같이 만들기 */
.container2 * {
  font-feature-settings: "dlig", "liga", "calt", "frac";
}
.inactive.container2 * {
  font-feature-settings:
    "dlig" 0,
    "liga" 0,
    "calt" 0,
    "frac" 0;
}

font-feature-settings 속성 (Font feature settings)

font-feature-settings는 오픈타입 폰트 안에 있는 모든 기능의 4자리 코드를 이름으로 직접 불러내서 켜고 끌 수 있는 '저수준(low level)' 속성입니다.

모든 기능을 강제로 제어할 수 있다는 점은 좋지만, 치명적인 단점이 있습니다. 앞서 말했듯이, 이 속성을 사용할 때 단 하나의 기능만 상태를 바꾸고 싶어도 전체 문자열을 통째로 다시 선언해야 한다는 것입니다.
(단, CSS 사용자 지정 속성(CSS custom properties, CSS 변수)를 영리하게 활용하면 이 문제를 피할 수 있긴 합니다.)
이러한 단점 때문에, 그리고 상속(inheritance) 문제 때문에라도 가능하면 위에서 배운 고수준 속성(font-variant-*)들을 사용하는 것이 훨씬 바람직합니다.

문법은 매우 단순합니다:

.small-caps {
  font-feature-settings: "smcp", "c2sc"; /* 4자리 코드를 콤마로 연결합니다. */
}

사양서에 따르면, 4자리 문자 코드만 적어도 되고, 그 뒤에 1을 붙여서 이 기능을 명시적으로 켜겠다(enable)고 선언할 수도 있습니다. 반대로 기능을 끄고 싶다면 코드 뒤에 0 (숫자 영)을 붙여주면 됩니다. 이 방식은 폰트가 기본적으로 켜놓은 기능(예: 합자)을 강제로 끄고 싶을 때 아주 유용합니다:

.no-ligatures {
  font-feature-settings:
    "liga" 0, /* 기본 합자 끄기 */
    "dlig" 0; /* 임의 합자 끄기 */
}

font-feature-settings 4자리 코드 더 알아보기

세상에 존재하는 모든 4자리 기능 코드가 궁금하다면 아래 링크들을 확인해 보세요.

'오픈타입 기능을 위한 완벽한 CSS 데모' (가장 거대한 기능 모음집입니다.)
위키백과의 오픈타입 타이포그래피 기능 목록

CSS 기능 감지(@supports)를 활용해 적용하기 (Using CSS feature detection for implementation)

우리가 배운 멋진 고수준 속성(font-variant-*)들이 아직 모든 브라우저에 똑같이 지원되지는 않습니다. 따라서, 실무에서는 CSS의 @supports (기능 감지)를 사용해서, 고수준 속성을 지원하는 브라우저에는 고수준 속성을 먹이고, 그렇지 않은 브라우저를 위해 저수준인 font-feature-settings를 '안전장치(fallback)'로 먼저 깔아두는 것이 가장 좋은 프랙티스(best practice)입니다.

예를 들어, 작은 대문자(Small caps)를 설정할 때 만약 원본 텍스트가 대문자든 소문자든 가리지 않고 완벽하게 전부 스몰 캡스로 바꾸려면, 저수준인 font-feature-settings를 쓸 때는 "smcp"와 "c2sc" 두 가지를 모두 켜야 합니다. 하지만 고수준인 font-variant-caps를 쓰면 all-small-caps라는 값 딱 하나면 해결되죠.

이럴 때 아래와 같이 코드를 작성하면 완벽합니다:

/* 1단계: 일단 모든 브라우저가 알아듣는 저수준(fallback) 속성으로 세팅해 둡니다. */
.small-caps {
  font-feature-settings: "smcp", "c2sc";
}

/* 2단계: 만약 브라우저가 font-variant-caps 속성을 완벽히 지원한다면? */
@supports (font-variant-caps: all-small-caps) {
  .small-caps {
    font-feature-settings: normal; /* 저수준 속성은 깨끗하게 지워버리고 */
    font-variant-caps: all-small-caps; /* 모던하고 깔끔한 고수준 속성을 덮어씌웁니다! */
  }
}

같이 보기 (See also)

CSS 오픈타입 기능 데모 (Demos of CSS OpenType features in CSS)

* [The Complete CSS Demo for OpenType Features](https://sparanoid.com/lab/opentype-features/)

웹 폰트 분석 도구 (Web font analysis tools)

* [Wakamai Fondue](https://wakamaifondue.com/) * [Axis Praxis](https://www.axis-praxis.org/)

W3C 사양서 (W3C Specifications)

* [CSS Fonts Module Level 3의 폰트 기능 속성들](https://drafts.csswg.org/css-fonts-3/#font-rend-props) * [CSS Fonts Module Level 4의 font-variant-alternates](https://drafts.csswg.org/css-fonts-4/#propdef-font-variant-alternates)

기타 자료 (Other resources)

* [Using OpenType features](https://helpx.adobe.com/fonts/using/use-open-type-features.html) (작성자: Tim Brown, Adobe 타이포그래피 총괄) * [CSS에서의 OpenType 기능을 위한 Adobe의 구문 가이드](https://helpx.adobe.com/fonts/using/open-type-syntax.html)

MDN 개선에 참여하기 (Help improve MDN)

이 페이지가 도움이 되셨나요? [네 (Yes)] / [아니요 (No)]

기여하는 방법 알아보기 (Learn how to contribute)

이 페이지는 2025년 11월 7일에 MDN 기여자들 (MDN contributors)에 의해 마지막으로 수정되었습니다.

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

Flexible box layout/Typical use cases

다음 포스트