(HTML/CSS 기초부터 실전까지) 글자 크기(font-size)와 두께(font-weight) 완벽 가이드 - 가독성과 SEO를 높이는 법

안녕하세요, 코딩하는곰입니다! 웹사이트를 만들 때 가장 먼저 맞닥뜨리는 것이 바로 글자 스타일링이 아닐까요? 텍스트는 웹 콘텐츠의 95% 이상을 차지하는 핵심 요소입니다. 이 글자를 어떻게 보여주느냐에 따라 사이트의 첫인상, 가독성, 사용자 경험, 심지어 검색 엔진 최적화(SEO) 점수까지 영향을 미칩니다. 오늘은 HTML과 CSS에서 텍스트 스타일의 기초이자 핵심인 font-size(글자 크기)와 font-weight(글자 두께) 속성을 깊이 있게 파헤쳐보겠습니다. 20년 경력의 개발자로서, 단순한 속성 설명을 넘어 실무에서 마주치는 문제와 그 해결법, 그리고 SEO와 접근성을 고려한 최적의 활용법까지 알려드리겠습니다.

1. 글자 크기의 핵심, font-size 속성 완전 정복

font-size는 텍스트의 수직 크기를 정의하는 CSS의 기본 속성입니다. “크기를 정한다”는 개념은 간단해 보이지만, 사용할 수 있는 단위의 종류와 각각의 차이점, 그리고 언제 어떤 단위를 써야 하는지를 이해하는 것이 프로 개발자로 가는 첫걸음입니다.

절대 단위 vs 상대 단위: 근본적인 차이

글자 크기를 지정하는 단위는 크게 절대 단위와 상대 단위로 나뉩니다.

• 절대 단위 (Absolute Units): 화면의 다른 요소에 영향을 받지 않고 고정된 값을 가집니다. 대표적으로 px(픽셀)이 있습니다.

  h1 { font-size: 32px; }
  p { font-size: 16px; }

  장점: 정확한 크기 조절이 가능하고, 디자인 시안을 픽셀 단위로 받을 경우 구현이 직관적입니다. 단점: 사용자가 브라우저 설정에서 기본 글꼴 크기를 변경해도 반응하지 않습니다. 또한 다양한 화면 크기(데스크톱, 태블릿, 모바일)에 대응하는 반응형 디자인에는 유연성이 부족할 수 있습니다.
• 상대 단위 (Relative Units): 부모 요소나 뷰포트 등의 기준에 따라 상대적으로 크기가 결정됩니다. 반응형과 접근성 측면에서 현대 웹 개발의 표준입니다.
  • em: 직계 부모 요소의 font-size를 기준으로 합니다. 부모의 font-size가 16px일 때, 1.5em은 24px(16 * 1.5)입니다. 중첩 사용 시 계산이 복잡해질 수 있어 주의가 필요합니다.
  • rem (Root em): 최상위 요소(html)의 font-size를 기준으로 합니다. 대부분의 브라우저 기본 html font-size는 16px입니다. 따라서 1.5rem은 항상 24px(16 * 1.5)입니다. 예측 가능하고 관리하기 쉬워 현재 가장 권장되는 단위입니다.
  • % (퍼센트): em과 유사하게 부모 요소의 font-size에 대한 비율입니다. 150%는 1.5em과 동일합니다.
  • vw, vh (Viewport Width/Height): 화면(뷰포트) 너비 또는 높이의 1%를 기준으로 합니다. 5vw는 화면 너비의 5%입니다. 헤드라인 등 화면에 꽉 차는 큰 타이포그래피에 유용하지만, 지나치게 사용하면 가독성이 떨어질 수 있습니다.

실무 활용 가이드: 어떤 단위를 언제 쓸까?

• 기본 글자 크기 설정: rem을 사용하라html 요소에 기본 font-size를 퍼센트로 설정하는 것이 좋은 관행입니다. 이는 사용자의 브라우저 기본 설정(접근성 설정)을 존중하면서도, 계산을 쉽게 만듭니다.

  html {
    font-size: 62.5%; /* 10px 기준 (16px * 0.625 = 10px) */
  }
  body {
    font-size: 1.6rem; /* 16px */
  }
  h1 {
    font-size: 3.2rem; /* 32px */
  }
  p {
    font-size: 1.6rem; /* 16px */
    line-height: 1.5; /* 단위 없이 사용. 글자 크기의 1.5배 */
  }

  이렇게 하면 1rem = 10px로 계산이 간편해지고, rem을 일관되게 사용함으로써 전체적인 크기 조율이 매우 쉬워집니다.
• 컴포넌트 내부의 미세 조정: em을 활용하라 버튼, 카드 같은 독립된 컴포넌트 내부에서 아이콘 크기나 패딩을 글자 크기에 비례하게 조정하고 싶을 때 em이 유용합니다.

  .button {
    font-size: 1.6rem; /* 16px */
    padding: 0.8em 1.6em; /* 상하: 12.8px(16*0.8), 좌우: 25.6px(16*1.6) */
  }

  버튼의 font-size를 변경하면 패딩도 자동으로 비례하여 변경됩니다.

📱 앱 개발에 도전하고 싶다면, (자바 기초) static 필드와 메서드 완벽 가이드 - 인스턴스 없이 호출하는 비밀를 참고해보세요.

2. 글자의 무게감을 결정하는 font-weight 속성

font-weight는 글자의 두께 또는 굵기를 지정합니다. 단순히 “굵게”가 아니라, 폰트 패밀리가 제공하는 다양한 두께 축(variable font axis) 중 하나를 선택하는 개념입니다.

값의 종류와 의미

• 키워드: normal(기본값, 보통 400), bold(굵게, 보통 700)
• 상대적 키워드: lighter(부모보다 얇게), bolder(부모보다 굵게)
• 숫자 값: 100(Thin) ~ 900(Black). 100 단위로 증가합니다. 400이 normal, 700이 bold에 대응하는 것이 일반적입니다. 가장 중요한 사실: font-weight 값이 제대로 적용되려면, 사용 중인 폰트(글꼴) 자체가 해당 두께를 지원해야 합니다. 매우 흔히 하는 실수가, “Noto Sans” 폰트를 불러왔는데 font-weight: 800;을 지정해도 아무 변화가 없는 경우입니다. 이는 해당 폰트 파일에 800 두께가 포함되어 있지 않기 때문입니다.

실무 활용 가이드: 폰트와 두께 올바르게 불러오기

구글 폰트(Google Fonts)를 예로 들어보겠습니다. 폰트를 선택할 때 “Select this style”를 클릭하여 필요한 두께(및 기울기)를 정확히 선택해야 합니다.

<!-- 잘못된 예: 폰트만 불러오고 두께는 CSS에서 임의로 지정 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
  .title {
    font-family: 'Roboto', sans-serif;
    font-weight: 800; /* Roboto Regular(400)만 불러왔으므로 800은 적용되지 않음! */
  }
</style>

<!-- 올바른 예: 사용할 두께를 스타일로 명시하여 불러오기 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  .light { font-family: 'Roboto', sans-serif; font-weight: 400; }
  .bold { font-weight: 700; } /* 불러온 폰트 패밀리 내에서 변경 */
  .black { font-weight: 900; }
</style>

링크의 wght@400;700;900 부분이 핵심입니다. 이렇게 불러온 후에는 CSS에서 해당 숫자 값(400, 700, 900)을 자유롭게 사용할 수 있습니다.

가변 폰트(Variable Fonts)의 혁명

최신 웹 기술인 가변 폰트는 하나의 폰트 파일에 여러 두께, 너비, 기울기 등이 포함되어 있습니다. font-weight 값을 100에서 900 사이의 어떤 숫자로도 부드럽게 조절할 수 있습니다.

@font-face {
  font-family: 'MyVariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900; /* 두께 축의 범위를 지정 */
}
h1 {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 356; /* 400이나 700이 아닌, 정밀한 중간값도 가능! */
}

블로그나 쇼핑몰 운영자라면 방문자의 IP나 대략적인 위치가 궁금할 수 있습니다. 이럴 땐 내 IP 정보 확인 도구를 활용해보세요.

3. font-size, font-weight와 SEO/사용자 경험의 깊은 관계

단순한 스타일링을 넘어, 이 두 속성은 웹사이트의 품질을 평가하는 중요한 지표인 SEO(검색 엔진 최적화)와 UX(사용자 경험)에 직접적인 영향을 미칩니다.

가독성(Accessibility)과 접근성(Accessibility)

• 충분한 크기와 대비: WCAG(웹 콘텐츠 접근성 지침)는 본문 텍스트의 최소 크기를 18pt (약 24px) 이상으로 권장합니다(시력이 약한 사용자를 위해). font-size가 너무 작으면 가독성이 떨어지고, 사용자가 브라우저 확대 기능을 사용하게 만듭니다. font-weight가 너무 얇으면(100, 200) 배경색과의 대비가 낮아 읽기 힘들 수 있습니다.
• 의미론적 마크업과의 연동: <h1>~<h6> 제목 태그에 적절한 font-size와 font-weight를 적용하는 것은 시각적 계층 구조를 만듭니다. 이는 사용자가 콘텐츠를 빠르게 훑어보고 이해하는 데 도움을 주며, 검색 엔진이 페이지 구조와 중요도를 이해하는 데에도 결정적인 힌트를 줍니다. CSS로 <p> 태그를 크게 만드는 것과 <h2> 태그를 사용하는 것은 SEO 측면에서 천지차이입니다.

반응형 디자인과 성능

• 미디어 쿼리 활용: 모바일 화면에서는 데스크톱보다 글자 크기를 조금 키우는 것이 일반적입니다(손가락 터치와 가까운 거리를 고려).

  html { font-size: 62.5%; }
  h1 { font-size: 3.2rem; } /* 모바일: 32px */
  @media (min-width: 768px) {
    h1 { font-size: 4.0rem; } /* 태블릿 이상: 40px */
  }

• 폰트 최적화: font-weight마다 별도의 폰트 파일을 불러오면(예: NotoSans-Regular.woff2, NotoSans-Bold.woff2) 요청 수가 증가해 로딩이 느려집니다. 가변 폰트를 사용하거나, 필요한 두께만 선별하여 불러오는 것이 성능에 유리합니다. 구글 폰트 링크에서 불필요한 두께 스타일을 제거하는 것만으로도 성능 향상을 기대할 수 있습니다.

CSS 변수(Custom Properties)를 활용한 시스템 구축

프로젝트의 규모가 커지면 글자 크기와 두께를 시스템화하여 관리하는 것이 필수입니다. CSS 변수를 사용하면 한 곳에서 모든 값을 제어할 수 있습니다.

:root {
  --font-size-sm: 1.4rem;
  --font-size-base: 1.6rem;
  --font-size-lg: 2.0rem;
  --font-size-xl: 3.2rem;
  --font-size-xxl: 4.8rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}
body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
}
.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.hero-title {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
}

이렇게 하면 디자인 변경 시 :root의 변수 값만 수정하면 전체 사이트에 일관되게 반영됩니다.

로또 번호를 과학적으로 접근하고 싶다면, AI 분석과 통계 기반 번호 추천 앱 지니로또AI가 최적의 도구입니다.

지금까지 font-size와 font-weight라는 두 개의 기본 속성을 통해 웹 타이포그래피의 세계를 탐험해보았습니다. 단위 하나 선택하는 것, 두께 값 하나 지정하는 것에도 사용자 경험, 접근성, 성능, 유지보수성, 그리고 SEO까지 고려해야 할 요소가 많다는 것을 느끼셨을 겁니다. 요약하자면, font-size는 rem을 기본으로, 상황에 따라 em이나 뷰포트 단위를 활용하고, font-weight는 사용하는 폰트가 실제로 지원하는지 꼭 확인하라는 것입니다. 그리고 이 모든 스타일링은 의미론적인 HTML 태그(<h1>, <p>, <strong> 등)와 함께 사용되어야 그 진가를 발휘합니다. 코딩하는곰의 한 마디: “아름다운 타이포그래피는 눈을 위한 것이고, 올바른 타이포그래피는 모든 사람(와 검색 로봇)을 위한 것입니다.” 오늘 배운 내용을 토대로 여러분의 웹사이트 텍스트가 더 명확하고, 아름답고, 검색 결과 상단에 빛날 수 있도록 적용해보시기 바랍니다. 다음 시간에는 line-height와 letter-spacing으로 글자의 세밀한 공간을 조율하는 방법을 알아보겠습니다. 감사합니다!

매일 두뇌 운동을 위한 스도쿠 게임이 필요하다면, 한국어 지원과 함께하는 스도쿠 저니를 다운로드하세요.