Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

타이포그래피에서 볼드체와 이탤릭체, 언제 어떻게 사용해야 할까?

타이포그래피에는 다양한 강조 기법이 있으며, 그중 가장 널리 쓰이는 것이 바로 이탤릭체와 볼드체입니다. 이탤릭과 볼드는 원래 서체 디자인의 변형 형태로, 각각 다른 방식으로 텍스트에 시각적 강조 효과를 줍니다. 이 글에서는 타이포그래피에서 이탤릭체와 볼드체를 언제 사용해야 하는지, 그리고 하나의 문서 안에서 두 가지를 함께 사용해도 괜찮은지 자세히 알아보겠습니다.

이 글의 대부분 텍스트는 일반 굵기(regular)의 'Alegreya' 서체로 작성되었습니다. 참고로 CSS에서 font-weight 속성의 기본값은 400(regular)입니다.

  • 볼드체(bold)는 일반 서체와 동일한 스타일을 유지하되, 글자 획이 더 두꺼운 버전입니다.
  • 이탤릭체(italic)는 일반 서체를 왼쪽에서 오른쪽으로 기울인 버전입니다.
  • 볼드 이탤릭체(bold italic)는 일반 서체를 기울이면서 동시에 두껍게 만든 버전입니다.

CSS에서 font-weight를 bold로 설정하기

p {
  font-weight: bold;
}

숫자 값으로도 지정할 수 있으며, 일반적으로 700bold에 해당합니다.

HTML 태그로 볼드체를 적용하려면 강조하고 싶은 단어를 <strong> 태그로 감싸면 됩니다.

<strong>여기에 텍스트</strong>

CSS에서 font-style을 italic으로 설정하기

p {
  font-style: italic;
}

HTML 태그로 이탤릭체를 적용하려면 강조하고 싶은 단어를 <em> 태그로 감싸면 됩니다.

<em>여기에 텍스트</em>

CSS에서 볼드 이탤릭 설정하기

p {
  font-style: italic;
  font-weight: bold; /* 또는 700 */
}

HTML에서 볼드 이탤릭을 사용하려면 아래와 같이 태그를 중첩하면 됩니다.

<strong><em>여기에 텍스트</em></strong>

일반체, 볼드체, 이탤릭체, 볼드 이탤릭체를 나란히 비교해 보겠습니다.

텍스트

텍스트

텍스트

텍스트


이탤릭 vs 볼드, 언제 무엇을 써야 할까?

한 가지 견해는 이탤릭과 볼드가 모두 텍스트 블록 내 특정 부분을 강조하는 도구이므로, 최소한 같은 텍스트 블록 안에서는 둘 중 하나만 사용해야 한다는 것입니다. 또 다른 견해는 이탤릭은 가벼운 강조에, 볼드는 강한 강조에 사용하라는 것입니다.

하지만 필자의 생각은 조금 다릅니다. 결국 서체(font-family)에 따라 달라진다는 것입니다. 볼드나 이탤릭이 주는 강조의 강도는 서체마다 크게 차이가 나기 때문입니다.

일부 서체 디자인, 특히 산세리프(sans-serif) 계열은 이탤릭이 상당히 약한 편입니다. 즉, 글자가 기울어졌다는 사실조차 거의 눈에 띄지 않아 강조 도구로서 제 역할을 하지 못합니다. 이런 경우에는 볼드를 사용하는 것이 좋습니다.

반면 일부 서체, 특히 세리프(serif) 계열은 강하고 뚜렷한 이탤릭을 지녀 볼드만큼이나 눈에 띕니다. 이 경우에는 어느 쪽을 사용할지 스스로 판단하면 되는데, 단순함을 유지하고 싶다면 같은 텍스트 블록 안에서는 한 가지 강조 스타일만 사용해 독자의 혼란을 피하는 것이 현명합니다.

그러나 서체가 강한 이탤릭을 가지면서 동시에 그보다 한층 더 강력한 볼드를 갖추고 있다면, 이탤릭은 가벼운 강조에, 볼드는 강한 강조에 구분해 사용할 수 있습니다. 바로 지금 보고 계신 'Alegreya'가 대표적인 예입니다. 이 문단 속 이탤릭 텍스트가 충분히 눈에 띄지만, 볼드만큼은 아니라는 점을 확인해 보세요.

사람의 시선은 픽셀이 가장 많은 곳으로 먼저 향하는 경향이 있습니다. 그렇기 때문에 획이 두꺼운 볼드는 강한 강조에 가장 적합하며, (잘 설계된) 이탤릭은 가벼운 강조에 잘 어울립니다.

볼드 이탤릭은 언제 사용할까?

가끔은 중요한 텍스트를 평소보다 더욱 강하게 부각하고 싶을 때가 있습니다. 이럴 때 볼드와 이탤릭을 결합한 볼드 이탤릭이 유용합니다.

필자의 견해로는 볼드 이탤릭의 사용은 실용적인 디자인 선택이라기보다 예술적 선택에 가깝습니다. 서체에 아름다운 볼드 이탤릭이 포함되어 있고 문서 전체와 잘 어울린다면 얼마든지 사용하세요. 다만 먼저 볼드와 이탤릭을 개별적으로 활용해 보는 것이 좋습니다. 볼드 이탤릭은 과유불급일 수 있기 때문입니다. 강조가 지나치면 오히려 가독성을 해칩니다.

Alegreya는 아름다운 이탤릭을 가지고 있습니다

Alegreya는 아름다운 볼드를 가지고 있습니다

Alegreya는 아름다운 볼드 이탤릭을 가지고 있습니다

필자는 볼드 이탤릭을 일회성 텍스트 요소에 한정해 아주 드물게 사용합니다.

내 서체의 가능성을 직접 탐색해 보세요

최종 결정을 내리기 전에 반드시 해당 서체의 다양한 폰트 변형, 즉 이탤릭부터 볼드까지 모두 직접 테스트해 보세요. 또한 일부 서체는 '헤어(hair)'(가장 얇은 굵기)부터 '블랙(black)'(가장 두꺼운 굵기)까지 매우 다양한 굵기를 제공한다는 점도 기억하세요. 여러분의 콘텐츠 맥락에서는 '미디엄(medium)' 굵기가 가장 적합할 수도 있고, '엑스트라 볼드(extra-bold)'가 더 나은 선택일 수도 있습니다. 테스트, 테스트, 또 테스트!

필자는 개인적으로 단일 단어에 가벼운 강조를 줄 때 이탤릭을 사용하는 편입니다. 가끔은 문장의 일부를 강하게 부각하고 싶을 때처럼 연속된 여러 단어에 볼드를 적용하기도 합니다. 물론 이 방식이 Alegreya라는 서체에는 잘 어울렸지만, 여러분의 서체에는 그렇지 않을 수 있습니다.

절대 볼드와 이탤릭을 용도 구분 없이 섞어 사용하지 마세요. 항상 명확한 이유를 갖고, 같은 문서 내에서는 선택한 스타일을 일관되게 유지해야 합니다. 무엇보다 강조는 절제할수록 효과적이라는 사실을 기억하세요.

모든 것을 강조하면, 결국 아무것도 강조하지 않은 것과 같습니다.