Tailwind CSS Academy · 강의

글꼴 크기와 글꼴 굵기

text-sm부터 text-9xl까지, 그리고 font-thin부터 font-black까지 사용해 텍스트의 시각적 강조 정도를 조절합니다.

레슨 1/413개 단계

글꼴 크기와 글꼴 굵기은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Tailwind's Font Size Scale

Set text size with the text-* scale, from text-xs up to text-9xl. Pick from these steps instead of typing pixels, and your typography stays consistent.

<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>

Display and Hero Text Sizes

For big display text on hero sections, reach for text-7xl, text-8xl, or text-9xl. Pair them with font-extrabold and tracking-tight for headlines that grab attention.

<h1 class="text-7xl font-black tracking-tight text-gray-900">
  Make it big.
</h1>

Font Weight Utilities

Control thickness with font weight: font-normal for body, font-semibold for labels, font-bold for headings, and font-extrabold or font-black for big emphasis.

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>
<p class="font-black">Black (900)</p>

Combining Size and Weight

Size and weight are independent, so they team up: text-sm font-medium for a nav label, text-4xl font-bold for a heading. Together they build hierarchy.

<!-- Article typographic hierarchy -->
<h1 class="text-4xl font-bold text-gray-900 mb-2">Main Headline</h1>
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Section Title</h2>
<p class="text-base font-normal text-gray-600 mb-2">Body paragraph text...</p>
<span class="text-xs font-medium text-gray-400">Caption or metadata</span>

Responsive Font Sizes

Type can scale with the screen. Add a breakpoint prefix like md: to any size — text-3xl md:text-5xl is small on phones and large on desktops.

<h1 class="text-2xl md:text-4xl lg:text-6xl font-extrabold text-gray-900">
  Scales with the screen
</h1>

Font Style: Italic

Add italic to slant text and not-italic to reset it. It is great for quotes and citations — italic font-light text-gray-500 gives that classic testimonial feel.

<blockquote class="italic font-light text-gray-500 text-lg border-l-4 border-indigo-400 pl-4">
  'Tailwind makes styling enjoyable again.'
</blockquote>
<cite class="text-sm font-medium text-gray-700">— A happy developer</cite>

Font Variant Numeric

For numbers, tabular-nums makes every digit the same width, so prices and stats line up neatly in tables and columns. A small touch that looks very tidy.

<!-- Tabular numbers align in columns -->
<table>
  <tr>
    <td class="tabular-nums text-right">1,234.56</td>
  </tr>
  <tr>
    <td class="tabular-nums text-right">98,765.00</td>
  </tr>
</table>

Practical: Navigation Typography

Nav links love a small, medium look: text-sm font-medium. Mark the active link by bumping it to font-semibold text-indigo-600 so it stands apart.

<nav class="flex gap-6">
  <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Home</a>
  <a href="#" class="text-sm font-semibold text-indigo-600">Products</a>
  <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">About</a>
</nav>

Practical: Article Body Text

Comfortable body text is text-base or text-lg with relaxed spacing and text-gray-700, not harsh black. Add max-w-prose to keep lines at an easy reading width.

<article class="max-w-prose mx-auto">
  <p class="text-lg font-normal text-gray-700 leading-relaxed">
    This is body text set at a comfortable reading size.
    The max-w-prose constraint keeps lines short enough
    to read without losing your place.
  </p>
</article>

Practical: Data Display Typography

For dashboards, make numbers pop: text-3xl font-bold text-gray-900 for a value, with a smaller text-sm uppercase tracking-wider label above it.

<div class="text-center">
  <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
    Total Users
  </p>
  <p class="text-3xl font-bold text-gray-900 tabular-nums">
    24,781
  </p>
</div>

Common Font Size Reference

A quick mental map: text-xs for captions, text-base for body, text-2xl to text-4xl for headings, text-5xl and up for hero text. Match each with the right weight.

Quick Check

Quick check! See how size and weight stuck. 🔤

인터랙티브 레슨에서 답해보세요

Lesson Recap

Nice! text-* controls size, font-thin through font-black sets weight, and mixing size, weight, and color builds hierarchy. Next up: text color and opacity.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“글꼴 크기와 글꼴 굵기” 강의는 무료인가요?

네 — “글꼴 크기와 글꼴 굵기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“글꼴 크기와 글꼴 굵기”에서 뭘 배우나요?

text-sm부터 text-9xl까지, 그리고 font-thin부터 font-black까지 사용해 텍스트의 시각적 강조 정도를 조절합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“글꼴 크기와 글꼴 굵기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Tailwind CSS Academy(으)로 돌아가기