탐색
토큰

텍스트

글꼴 크기, 줄 높이, 자간을 함께 설정하는 텍스트 스타일입니다.

이 페이지의 내용

클래스

클래스선언
text-<name>font-size: var(--text-<name>);line-height: var(--text-<name>--line-height, normal);letter-spacing: var(--text-<name>--letter-spacing, normal);

주 --text-<name> 토큰이 클래스를 만듭니다. 보조 토큰인 --line-height와 --letter-spacing은 선택 사항이며 없으면 normal을 사용합니다. 글꼴 계열, 굵기, 색상은 별도 클래스로 지정합니다.

값

각 행은 클래스 하나가 참조하는 세 값을 보여 줍니다. 프리셋 크기는 대응하는 font-size 토큰을 참조하며, 표에서는 읽기 쉽도록 참조를 해석해 표시합니다. 모든 프리셋 스타일은 두 보조 토큰을 모두 포함합니다.

클래스크기줄 높이자간
text-3xs.5rem8px1.50
text-2xs.625rem10px1.50
text-xs.75rem12px1.50
text-sm.875rem14px1.50
text-md1rem16px1.60
text-lg1.125rem18px1.50
text-xl1.25rem20px1.4-.01em
text-2xl1.5rem24px1.35-.015em
text-3xl2rem32px1.25-.02em
text-4xl2.25rem36px1.2-.025em
text-5xl2.5rem40px1.15-.03em
text-6xl3rem48px1.1-.035em
text-7xl3.75rem60px1.05-.04em
text-8xl4.5rem72px1.05-.04em
text-9xl6rem96px1-.045em
text-10xl8rem128px1-.05em
모든 텍스트 스타일 비교
text-3xs
Aa
text-2xs
Aa
text-xs
Aa
text-sm
Aa
text-md
Aa
text-lg
Aa
text-xl
Aa
text-2xl
Aa
text-3xl
Aa
text-4xl
Aa
text-5xl
Aa
text-6xl
Aa
text-7xl
Aa
text-8xl
Aa
text-9xl
Aa
text-10xl
Aa

주 토큰 하나, 선언 세 개

--text-card는 text-card를 등록합니다. 이 클래스는 항상 글꼴 크기, 줄 높이, 자간을 출력합니다. --text-card--line-height 또는 --text-card--letter-spacing이 없으면 해당 선언은 normal을 사용하며 상속한 값을 유지하지 않습니다.

텍스트 스타일은 항상 속성 세 개를 설정합니다

여기서는 주 --text-card 토큰만 정의합니다. 두 보조 선언은 여전히 존재하며 normal을 사용해 상속한 줄 높이나 자간을 대체합니다.

텍스트 설명
  1. 사용자 지정 테마는 --text-card를 1.5rem으로 정의하고 보조 토큰은 둘 다 정의하지 않습니다.
  2. text-card는 font-size: var(--text-card), line-height: var(--text-card--line-height, normal), letter-spacing: var(--text-card--letter-spacing, normal)을 출력합니다.
  3. 실선으로 된 세 갈래는 모두 출력되는 선언을 나타냅니다. 없는 보조 값은 다른 줄 높이나 자간을 상속하는 대신 normal로 대체됩니다.
  4. 보조 토큰만으로는 text-card가 등록되지 않습니다. 글꼴 계열, 굵기, 색상은 이 조합 스타일에 포함되지 않습니다.

보조 토큰만으로는 텍스트 스타일이 등록되지 않습니다. 줄 높이나 자간만 바꾸고 싶어도 주 크기 토큰을 추가하세요.

보조 토큰은 이 조합 스타일이 사용하는 값이며 별도 클래스 이름이 아닙니다. 독립적으로 조정하려면 font-<size>, leading-<name>, tracking-<name>을 사용하세요. 같은 조건에서는 이 단일 속성 유틸리티들이 텍스트 조합 스타일 뒤에 정렬되어 대응하는 선언을 덮어쓸 수 있습니다. class 속성 안의 순서는 결과를 정하지 않습니다.

이 조합 스타일은 글꼴을 불러오거나 계열 및 굵기를 선택하거나 마진을 추가하거나 문단 너비를 정하지 않습니다. 스타일을 선택하고 조합해 위계를 만드는 방법은 타이포그래피 가이드에서 다룹니다.

관련 문서: 글꼴, 줄 높이, 자간, 생성 규칙의 순서.

사용 예

문단에 텍스트 스타일 하나를 적용합니다. 글꼴 계열, 굵기, 색상은 여전히 독립적으로 지정합니다.

A paragraph keeps its size, line height and letter spacing together. Its container can grow when the same text wraps onto another line.

<p class="… text-lg">A paragraph keeps its size,…</p>
생성된 CSS
@layer theme {  :root,  :host {    --font-size-lg: 1.125rem;    --text-lg: var(--font-size-lg);    --text-lg--line-height: 1.5;    --text-lg--letter-spacing: 0  }}@layer utilities {  .text-lg {    font-size: var(--text-lg);    line-height: var(--text-lg--line-height, normal);    letter-spacing: var(--text-lg--letter-spacing, normal)  }}

사용자 정의

보조 토큰과 함께 텍스트 스타일을 추가하세요. --text-display를 정의하면 text-display가 생성됩니다.

@theme {  --text-display: 3.5rem;  --text-display--line-height: 1.1;  --text-display--letter-spacing: -.03em;}
생성된 CSS
@layer theme {  :root,  :host {    --text-display: 3.5rem;    --text-display--line-height: 1.1;    --text-display--letter-spacing: -.03em  }}@layer utilities {  .text-display {    font-size: var(--text-display);    line-height: var(--text-display--line-height, normal);    letter-spacing: var(--text-display--letter-spacing, normal)  }}

관련 문서: 테마 지시문, 타이포그래피.