CSS

CSS font Property

lshjju 2026. 2. 18. 17:45

웹 디자인의 시각적 언어이자 가독성의 핵심인 CSS 폰트(font) 속성에 대해 정리해 드리겠습니다.

폰트 속성은 글꼴의 종류, 크기, 굵기 등을 제어하여 텍스트에 생명력을 불어넣는 역할을 합니다.

1. font-family (글꼴 종류)

텍스트에 적용할 글꼴을 지정합니다.

  • 기본 원칙: 사용자의 컴퓨터에 해당 폰트가 없을 경우를 대비해 여러 개의 후보 글꼴을 쉼표로 구분하여 작성합니다.
  • Generic Family (태그): 마지막에는 반드시 sans-serif(고딕 계열)나 serif(명조 계열) 같은 일반적인 글꼴 유형을 써서 대체 폰트가 작동하게 합니다.
  • 주의: 폰트 이름에 공백이 있다면 반드시 따옴표(" ")로 감싸야 합니다.
CSS
 
body {
  font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
}

2. font-size (글자 크기)

글자의 크기를 결정합니다.

  • 절대 단위: px(픽셀) - 기기 화면의 화소 단위로 고정된 크기를 가집니다.
  • 상대 단위: em, rem - 부모나 최상위 요소의 크기에 비례하여 변하므로 반응형 웹에 적합합니다.
  • 키워드: small, medium, large 등으로도 지정할 수 있습니다.

3. font-style (글자 스타일)

글자를 기울일지 말지를 결정합니다.

  • normal: 일반적인 형태입니다. (기본값)
  • italic: 이탈릭체(기울임꼴)로 표시합니다.
  • oblique: 글자를 강제로 비스듬히 기울입니다. (italic과 비슷하지만 방식이 다릅니다.)

4. font-weight (글자 굵기)

텍스트의 두께를 조절하여 강조 정도를 정합니다.

  • 키워드: normal(기본), bold(굵게)를 주로 사용합니다.
  • 숫자 값: 100부터 900까지 100 단위로 세밀하게 조절할 수 있습니다.
    • 400은 normal과 같고, 700은 bold와 유사합니다.

5. font (축약형 속성)

위의 속성들을 한 줄로 합쳐서 작성할 수 있습니다.

  • 순서: style weight size family (크기와 글꼴은 필수 입력 사항입니다.)
  • 예시: font: italic 700 16px "Arial", sans-serif;

📋 폰트 주요 속성 요약표

속성 설명 주요 값 예시
font-family 서체 지정 "Roboto", sans-serif
font-size 글자 크기 16px, 1.2rem
font-style 기울임 여부 italic, normal
font-weight 굵기 조절 bold, 400, 700

학습 정리 > * 웹 접근성을 높이기 위해 본문 텍스트의 크기는 px보다는 rem 단위를 사용하는 것이 좋습니다.

  • 웹 폰트(Google Fonts 등)를 사용할 때는 로딩 속도를 고려해 필요한 **font-weight**만 골라 담는 것이 성능 최적화의 팁입니다.

텍스트의 인상을 결정하는 폰트 속성들을 모두 정복하셨습니다!

코드예제

방금 설명해 드린 폰트 속성들을 한눈에 확인하고 직접 실습해 볼 수 있는 코드 예제를 준비했습니다.

🖥️ CSS 폰트 속성 실전 예제

이 코드는 구글 폰트를 연동하여 글꼴, 크기, 굵기, 스타일을 다양하게 적용하는 방법을 보여줍니다.

HTML
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    /* 1. 웹 폰트 외부 연결 (예시: 나눔고딕) */
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

    body {
      /* font-family: 기본 서체 설정 (시스템 폰트 -> 샌세리프 순) */
      font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif;
      line-height: 1.6;
    }

    .title {
      /* font-size: 상대 단위 rem 사용 (1rem = 보통 16px) */
      font-size: 2.5rem;
      /* font-weight: 숫자로 세밀하게 굵기 지정 */
      font-weight: 800;
      color: #333;
    }

    .subtitle {
      /* font-style: 기울임꼴 적용 */
      font-style: italic;
      font-size: 1.2rem;
      font-weight: 400;
      color: #666;
    }

    .bold-text {
      /* font-weight: 키워드로 굵게 지정 */
      font-weight: bold;
    }

    .shorthand {
      /* font 축약형: [style] [weight] [size] [family] */
      font: italic 700 18px "Nanum Gothic", sans-serif;
      margin-top: 20px;
      color: royalblue;
    }
  </style>
</head>
<body>

  <h1 class="title">나만의 웹 타이포그래피</h1>
  <p class="subtitle">CSS 폰트 속성을 활용한 스타일링 예제입니다.</p>
  
  <p>이 문장은 일반적인 굵기의 텍스트입니다.</p>
  <p class="bold-text">이 문장은 font-weight: bold가 적용되어 강조되었습니다.</p>
  
  <div class="shorthand">
    축약형 속성(shorthand)을 사용하여 한 줄로 정의한 스타일입니다.
  </div>

</body>
</html>

💡 코드 설명 및 팁

  1. rem 단위 사용: font-size에서 px 대신 rem을 사용하면, 사용자가 브라우저 설정에서 글자 크기를 키웠을 때 웹사이트 전체 글꼴도 함께 유동적으로 변하여 웹 접근성에 매우 좋습니다.
  2. font-weight 숫자 값: 구글 폰트처럼 웹 폰트를 불러올 때 해당 굵기(400, 700 등)를 명시적으로 포함해야 숫자로 제어할 수 있습니다.
  3. 축약형 주의사항: font 축약형을 쓸 때는 **font-size와 font-family**가 반드시 포함되어야 하며, 순서가 틀리면 속성이 무시될 수 있으니 주의하세요.

이제 폰트의 모든 기본기를 마스터하셨습니다!

이 예제를 브라우저에서 실행해 보시고, font-weight 숫자를 바꾸거나 font-style을 변경하며 직접 변화를 확인해 보세요.

'CSS' 카테고리의 다른 글

CSS text style property  (0) 2026.02.18
Web font  (0) 2026.02.18
CSS Padding property  (0) 2026.02.16
CSS Margins property  (0) 2026.02.16
CSS Borders property  (0) 2026.02.16

'CSS'의 다른글

  • 현재글CSS font Property

관련글

티스토리툴바