[CSS] font-style 속성에서 italic과 oblique

font-style 속성에서 italic과 oblique

font-style 속성에서 italic과 oblique은 모두 글자를 기울게 하는 스타일을 지정하지만, 미묘하게 다른 의미를 가지고 있습니다.

1. Italic (italic): 이탤릭체는 글자의 슬랜트(slant)가 기울어진 스타일을 의미합니다. italic을 사용할 때, 대부분의 경우 글꼴에 포함된 이탤릭 스타일의 글리프를 사용하게 됩니다. 이는 일반 글자와 다르게 디자인된 별도의 글리프로, 각 글자의 모양이 자연스럽게 기울어져 있습니다. 이탤릭체는 일반체와 구별되며, 보통 강조나 인용 구문에 사용됩니다.
2. Oblique (oblique): 오블리크체는 글꼴이 이탤릭체를 별도로 제공하지 않을 때 사용되는 기울기 스타일입니다. 오블리크체는 일반 글자를 기울여서 만든 것으로, 글꼴 자체에 별도의 오블리크 글리프가 없는 경우에 정규 글리프를 기울여 표시합니다. 실제로 많은 경우에 italic과 oblique는 시각적으로 구별이 거의 되지 않지만, 기술적으로는 오블리크체가 이탤릭체와 같은 디자인이 적용된 글리프를 사용하지 않는다는 차이가 있습니다.

실제로 글꼴이 이탤릭 버전을 제공하지 않을 때, oblique는 단순히 기울기 효과만을 적용하여 글꼴을 기울게 만듭니다. 반면, 이탤릭체는 글자의 형태 자체가 디자인적으로 변형되어서 만들어진 것입니다. 즉, italic은 보통 더 스타일리시하고 예술적인 글자의 형태를 제공하는 반면, oblique는 보다 기능적인 기울기를 제공합니다.

 

대부분의 서양 글꼴에서 이탤릭체는 오른쪽으로 기울어진 모습과 함께, 필기체와 같은 스타일의 변형을 가미하여 좀 더 독특한 모양을 제공합니다. 이탤릭체는 a, f, v 등의 글자에서 더 뚜렷한 디자인 변화를 볼 수 있습니다.

 

CSS에서 활용

CSS에서는 다음과 같이 사용됩니다.

.italic-text {
  font-style: italic;
}

.oblique-text {
  font-style: oblique;
}

 

caption: italic과 oblique의 비교

 

만약 사용 중인 글꼴에 이탤릭 버전이 없다면, oblique가 대체로 기울어진 정규 글자를 보여줄 것이고, 이탤릭 글꼴이 있으면 italic은 해당 이탤릭 글리프를 사용할 것입니다. 그러나, 모든 브라우저 또는 글꼴이 oblique를 지원하는 것은 아니며, 지원하지 않는 경우에는 italic으로 대체되어 표시될 수 있습니다.