폰트 크기

폰트 크기 (Font Size)

요소의 글자 크기(font size)를 정해 주는 유틸리티예요. 글자 크기뿐 아니라 함께 쓰이는 기본 line-height까지 자동으로 챙겨주기 때문에 타이포그래피를 편하게 맞출 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

text-xs font-size: var(--text-xs); /* 0.75rem (12px) */ line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */

text-sm font-size: var(--text-sm); /* 0.875rem (14px) */ line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */

text-base font-size: var(--text-base); /* 1rem (16px) */ line-height: var(--text-base--line-height); /* calc(1.5 / 1) */

text-lg font-size: var(--text-lg); /* 1.125rem (18px) */ line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */

text-xl font-size: var(--text-xl); /* 1.25rem (20px) */ line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */

text-2xl font-size: var(--text-2xl); /* 1.5rem (24px) */ line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */

text-3xl font-size: var(--text-3xl); /* 1.875rem (30px) */ line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */

text-4xl font-size: var(--text-4xl); /* 2.25rem (36px) */ line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */

text-5xl font-size: var(--text-5xl); /* 3rem (48px) */ line-height: var(--text-5xl--line-height); /* 1 */

text-6xl font-size: var(--text-6xl); /* 3.75rem (60px) */ line-height: var(--text-6xl--line-height); /* 1 */

text-7xl font-size: var(--text-7xl); /* 4.5rem (72px) */ line-height: var(--text-7xl--line-height); /* 1 */

text-8xl font-size: var(--text-8xl); /* 6rem (96px) */ line-height: var(--text-8xl--line-height); /* 1 */

text-9xl font-size: var(--text-9xl); /* 8rem (128px) */ line-height: var(--text-9xl--line-height); /* 1 */

text-(length:<custom-property>) font-size: var(<custom-property>);

text-[<value>] font-size: <value>;

기본 예제 (Basic example)

text-sm, text-lg 같은 유틸리티를 사용해 요소의 글자 크기를 설정할 수 있어요.

text-sm The quick brown fox jumps over the lazy dog.

text-base The quick brown fox jumps over the lazy dog.

text-lg The quick brown fox jumps over the lazy dog.

text-xl The quick brown fox jumps over the lazy dog.

text-2xl The quick brown fox jumps over the lazy dog.

<p class="text-sm ...">The quick brown fox ...</p><p class="text-base ...">The quick brown fox ...</p><p class="text-lg ...">The quick brown fox ...</p><p class="text-xl ...">The quick brown fox ...</p><p class="text-2xl ...">The quick brown fox ...</p>

line-height 설정하기 (Setting the line-height)

text-sm/6, text-lg/7 같은 유틸리티를 사용하면 요소의 글자 크기와 line-height를 동시에 설정할 수 있어요.

text-sm/6 So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

text-sm/7 So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

text-sm/8 So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="text-sm/6 ...">So I started to walk into the water...</p><p class="text-sm/7 ...">So I started to walk into the water...</p><p class="text-sm/8 ...">So I started to walk into the water...</p>

커스텀 값 사용하기 (Using a custom value)

text-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 글자 크기를 설정할 수 있어요.

<p class="text-[14px] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수를 쓸 때는 text-(length:<custom-property>) 문법을 사용할 수도 있어요.

<p class="text-(length:--my-text-size) ...">
  Lorem ipsum dolor sit amet...
</p>

이것은 text-[length:var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

font-size 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<p class="text-sm md:text-base ...">
  Lorem ipsum dolor sit amet...
</p>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.

테마 커스터마이징 (Customizing your theme)

--text-* 테마 변수를 사용하면 프로젝트의 글자 크기 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --text-tiny: 0.625rem;
}

이제 마크업에서 text-tiny 유틸리티를 사용할 수 있어요.

<div class="text-tiny">
  <!-- ... -->
</div>

글자 크기에 기본 line-height, letter-spacing, font-weight 값을 함께 제공할 수도 있어요.

@theme {
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem;
  --text-tiny--letter-spacing: 0.125rem;
  --text-tiny--font-weight: 500;
}

테마 커스터마이징에 대해 더 자세히 알고 싶다면 theme 문서를 확인해 보세요.

더 알아보기 (Learn more)