CSS font-style 속성 완벽 가이드: normal, italic, oblique의 차이점

CSS font-style 속성이란?

CSS의 font-style 속성을 사용하면 텍스트에 세 가지 서로 다른 글꼴 스타일을 적용할 수 있습니다. 바로 normal, italic, oblique입니다.

.normal{
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

세 가지 값의 의미

• normal: 일반 텍스트에 사용되는 기본 로만/레귤러 글꼴 스타일입니다.
• italic: 오른쪽으로 살짝 기울어진 글꼴로, 주로 강조 목적으로 사용됩니다.
• oblique: 역시 오른쪽으로 살짝 기울어진 글꼴로, 강조 목적으로 사용됩니다.

italic과 oblique, 대체 뭐가 다를까?

둘 다 강조 용도로 쓰이는데, 과연 무엇이 다를까요?

• italic 글꼴은 자체적으로 설계된 고유한 글리프(glyph) 세트를 갖춘 독립적인 글꼴입니다.
• oblique 글꼴은 단순히 로만/레귤러 글꼴을 기울여 만든 버전에 불과합니다.

언제 어떤 글꼴 스타일을 사용해야 할까?

솔직히 말씀드리면, 저는 oblique를 거의 사용하지 않습니다. 제 눈에는 oblique가 faux italic(가짜 이탤릭)과 같은 부류로 보입니다. 물론 공식적으로 가짜 이탤릭이라고 분류되지는 않지만요.

아래 비교 이미지는 모두 Droid Serif 서체에서 가져온 것입니다.

차이점이 보이시나요? 안 보이셔도 괜찮습니다. 많은 사람들이 눈치채지 못하기 때문이죠. 하지만 알아보는 사람도 분명 많기 때문에, 이 차이는 결코 무시할 수 없습니다.

• italic 글꼴 스타일은 다른 모든 이탤릭처럼 로만/일반 글꼴을 기반으로 하지만, 자체적인 글리프를 갖춘 실제 글꼴입니다. 즉, 전문 서체 디자이너가 직접 설계한 것입니다.
• oblique 글꼴은 일반 글꼴을 단순히 기울이거나 왜곡한 버전입니다. 이는 컴퓨터가 자동으로 생성한 이탤릭, 즉 디자이너의 손길이 닿지 않은 faux italic과 정확히 같은 방식입니다.

혹시 oblique 글꼴 스타일과 faux italic의 차이를 명확히 짚어주실 수 있는 분이 계시다면 이메일로 알려주세요. 확인하는 대로 이 글을 업데이트하겠습니다! 🙂