CSS 폰트 설정과 웹 타이포그래피 알아보기

CSS 폰트 설정과 웹 타이포그래피 알아보기

웹에서 텍스트의 가독성과 미적 감각을 높이는 것은 매우 중요합니다. 이를 위해 CSS(Cascading Style Sheets)를 사용하여 다양한 폰트를 설정하는 방법에 대해 알아보겠습니다. CSS에서는 주로 두 가지 유형의 폰트 설정이 있습니다: 패밀리 폰트(family font)와 제너릭 폰트(generic font)입니다. 이 두 가지를 적절히 활용하면 각기 다른 환경에서도 일관된 폰트 디자인을 유지할 수 있습니다.

1. 패밀리 폰트와 제너릭 폰트

패밀리 폰트는 우리가 일반적으로 인식하는 구체적인 글꼴을 의미합니다. 예를 들어 Georgia, Arial, 나눔고딕, 궁서체, 굴림체, Times New Roman과 같은 글꼴이 이에 해당합니다. 이처럼 특정 글꼴을 지정하면 원하는 스타일로 텍스트를 표현할 수 있습니다.

반면 제너릭 폰트는 유사한 스타일의 글꼴 집합을 나타내며, 사용자가 지정한 글꼴이 없을 경우 대체할 수 있도록 합니다. 제너릭 폰트를 사용하면, 예를 들어 serif, sans-serif, monospace, cursive, fantasy와 같이 다양한 스타일을 선택할 수 있습니다. 각 제너릭 폰트의 특징은 다음과 같습니다:

• Serif: 삐침이 있는 고전풍의 글꼴 모음입니다.
• Sans-serif: 삐침이 없는 깔끔한 고딕 계열 글꼴 모음입니다.
• Cursive: 손으로 쓴 것과 같은 느낌의 글꼴입니다.
• Monospace: 글자의 폭과 간격이 일정한 글꼴을 의미합니다.
• Fantasy: 화려한 스타일의 폰트들로 구성되어 있습니다.

2. 패밀리 폰트 사용하기

CSS 스타일시트에서 글꼴을 설정하려면 ‘font-family’ 속성을 사용합니다. 이때 사용법은 아래와 같습니다:

font-family: "글꼴명";

예를 들어, HTML 문서에서 다양한 텍스트에 대해 각기 다른 패밀리 폰트를 설정할 수 있습니다. 아래는 간단한 예시입니다:

  
  
  


  
안녕하세요, 반갑습니다.
  
웹 개발을 배우고 있습니다.


.font1 {
  font-family: 'Arial', sans-serif;
}
.font2 {
  font-family: 'Times New Roman', serif;
}

여기서 주의해야 할 점은 여러 개의 글꼴을 지정할 때 첫 번째 글꼴이 없다면 다음 글꼴을 자동으로 선택하도록 쉼표로 구분지어 나열해야 한다는 점입니다. 이는 브라우저나 사용자의 환경에 따라 지정된 폰트가 없을 경우 대체할 수 있도록 설계된 것입니다.

3. 폰트 파일과 웹 폰트

웹 프로젝트에서 특정 글꼴을 사용하려면, @font-face라는 규칙을 사용해 직접 폰트 파일을 불러올 수 있습니다. 이는 사용자가 폰트를 로컬에 설치하지 않아도 웹사이트에서 해당 폰트를 사용할 수 있도록 도와줍니다. 기본 형식은 다음과 같습니다:

@font-face {
  font-family: '커스텀폰트';
  src: url('폰트파일경로.woff') format('woff');
}

이렇게 정의한 후, CSS에서 ‘font-family’ 속성을 사용하여 해당 폰트를 적용하면 됩니다. 다양한 형식의 폰트 파일을 지원하기 위해 여러 포맷을 정의할 수도 있습니다:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
     url('myfont.woff2') format('woff2'),
     url('myfont.woff') format('woff'),
     url('myfont.ttf') format('truetype');
}

4. 구글 폰트 활용하기

구글 폰트(Google Fonts)는 사용자가 쉽게 웹폰트를 적용할 수 있도록 도와주는 매우 유용한 리소스입니다. 구글 폰트의 장점은 사용자가 직접 파일을 다운로드하지 않고도 다양한 폰트를 손쉽게 사용할 수 있다는 점입니다. 웹사이트에서 원하는 폰트를 찾고 ‘임포트’ 또는 ‘링크’ 정보를 CSS에 삽입하면 간단하게 적용할 수 있습니다. 구글 폰트를 활용한 예시는 다음과 같습니다:

이와 같은 방식으로 구글 폰트를 통해 다양한 글꼴을 손쉽게 적용할 수 있는 점이 매우 유용합니다.

5. 글꼴의 굵기 조절하기

CSS에서는 글씨의 굵기를 설정하는 font-weight 속성도 제공하고 있습니다. 이에 따라 글꼴의 굵기를 세밀하게 조정할 수 있으며, 일반적으로 사용되는 값은 다음과 같습니다:

• normal: 기본 굵기(400)
• bold: 굵은 글꼴(700)
• lighter: 한 단계 얇은 글꼴
• bolder: 한 단계 굵은 글꼴

숫자로도 직접 설정할 수 있으며, 이 경우 감각적으로 굵기를 조절할 수 있습니다. 예를 들어:

font-weight: 300; /* 얇은 글꼴 */
font-weight: 500; /* 중간 굵기 */
font-weight: 700; /* 굵은 글꼴 */

6. 폰트 앤티앨리어싱(anti-aliasing)

웹 개발 시 폰트의 가독성 향상을 위해 앤티앨리어싱을 적용할 수 있습니다. 앤티앨리어싱은 글자의 경계선을 부드럽게 처리하여 더욱 매끄럽고 깨끗하게 보여주는 기술입니다. 이를 통해 사용자는 글자를 더욱 쉽게 읽을 수 있습니다.

특히, 웹사이트의 전반적인 디자인 요소와 통합하여 시각적으로 매력적인 글꼴 설정을 할 수 있습니다. 폰트를 살짝 회전시키는 것처럼 간단한 CSS 변환 속성을 사용하여도 앤티앨리어싱 효과를 더할 수 있습니다.

결론

CSS를 통해 폰트를 설정하는 방법에 대해 알아보았습니다. 각기 다른 폰트를 효과적으로 관리하고 설정하면 웹사이트의 가독성과 시각적 매력을 크게 향상시킬 수 있습니다. 이러한 기술을 활용하여 더 나은 웹사이트를 설계해보세요!

자주 찾는 질문 Q&A