타이포그래피

#개요

text-<token>으로 글자 크기, 행간, 자간을 하나의 클래스에 담은 전체 텍스트 설정을 적용하세요. 굵기, 글꼴, 색상은 별도 클래스로 추가합니다.

<p class="text-xs font-regular fg-text-muted">Field notes / 024</p><h2 class="text-2xl font-regular fg-text-strong">Make room for the details.</h2><p class="text-sm">A consistent type scale helps readers move from the main idea to the supporting detail.</p>

@layer theme {  :root,  :host {    --font-weight-regular: 400;    --font-size-2xl: 1.5rem;    --text-2xl: var(--font-size-2xl);    --text-2xl--line-height: 1.35;    --text-2xl--letter-spacing: -.015em  }}@layer utilities {  .text-2xl {    font-size: var(--text-2xl);    line-height: var(--text-2xl--line-height, normal);    letter-spacing: var(--text-2xl--letter-spacing, normal)  }  .font-regular {    font-weight: var(--font-weight-regular)  }}

이 계층은 기본 굵기를 유지하며 크기, 간격, 텍스트 역할을 활용합니다. 내용상 필요한 곳에만 강조를 더하세요. 제목이라고 해서 기본적으로 더 굵게 만들 필요는 없습니다. 모든 설정과 추가 방법은 텍스트를 참고하세요.

#텍스트 설정과 글자 크기

font-<size>는 글자 크기만 바꾸며 상속된 행간과 자간을 유지합니다. text-<token>은 세 속성을 모두 설정합니다. 같은 크기에서 두 형태를 비교해 보세요.

루트 글자 크기 16px에서 프리셋의 실제 타이포그래피를 보여 줍니다. 각 행은 줄 상자를 표시합니다. font-size만으로는 줄 사이 간격을 설명할 수 없습니다.

텍스트 설명

1. 글자 크기만 설정. font-3xl은 크기를 2rem으로 설정합니다. 이 부모에서는 line-height 1.6과 기본 자간을 상속합니다.
2. 전체 텍스트 설정. text-3xl은 같은 2rem 크기와 함께 line-height 1.25와 letter-spacing -0.02em을 설정합니다.
3. 줄 상자 비교. 루트 크기가 16px일 때 예제 텍스트는 32px이고 행 높이는 각각 51.2px와 40px입니다. 같은 두 줄이 서로 다른 높이를 차지합니다.

<div class="leading-md tracking-normal">  <p class="font-3xl">Designing for a clearer reading experience.</p>  <p class="text-3xl">Designing for a clearer reading experience.</p></div>

@layer theme {  :root,  :host {    --font-size-3xl: 2rem;    --text-3xl: var(--font-size-3xl);    --text-3xl--line-height: 1.25;    --text-3xl--letter-spacing: -.02em  }}@layer utilities {  .text-3xl {    font-size: var(--text-3xl);    line-height: var(--text-3xl--line-height, normal);    letter-spacing: var(--text-3xl--letter-spacing, normal)  }  .font-3xl {    font-size: var(--font-size-3xl)  }}

본문, 제목, 큰 표시용 텍스트에는 text-<token>을 사용하세요. 디자인상 의도적으로 설정에서 벗어날 때만 font-<size>, leading-<token>, tracking-<token>을 사용하세요.

font- 접두사는 글꼴과 굵기 키도 받습니다. font-sans는 글꼴을 선택하고 font-bold는 굵기를 요청합니다. 이 이름 공간들에서 사용자 지정 이름이 겹치지 않도록 하세요. 값과 해석 규칙은 글꼴에 정리되어 있습니다.

#사이트 글꼴

앱 글꼴은 @theme에서 한 번 설정하세요. 프리셋의 base 레이어가 문서에 적용하므로 마크업에 글꼴 클래스가 필요하지 않습니다.

@import "@master/css";@theme {  --font-sans: "Geist", "Noto Sans TC";  --font-mono: "IBM Plex Mono";  --font-feature-sans: "ss02", "ss03", "ss04", "ss06", "ss07", "ss08";  --font-feature-mono: "cv01", "cv02", "cv29";}

base 레이어는 --font-family-sans를 통해 --font-sans를 해석하여 body와 섀도 호스트에 적용합니다. --font-mono는 --font-family-mono를 통해 해석하여 code, kbd, samp, pre에 적용합니다. --font-feature-* 토큰은 선택 사항이며 normal로 대체됩니다. 폼 컨트롤은 주변 글꼴을 상속합니다. 글꼴 파일은 @font-face나 제공업체 스타일시트로 불러오세요. 한 요소에만 적용하려면 font-mono 같은 클래스를 사용하세요.

예시는 두 가용성 경우를 보여 주며 측정한 다운로드 타임라인이 아닙니다. 지정 글꼴은 불러온 Geist 파일로, 대체 글꼴은 브라우저의 serif로 표현합니다.

텍스트 설명

1. font-family 선언은 순서 있는 선호도를 지정하며 자체적으로 글꼴을 다운로드하지 않습니다.
2. 일치하는 글꼴을 사용할 수 있으면 텍스트를 렌더링하고 없으면 브라우저가 다음 계열을 시도합니다. 글리프 지원 범위도 중요하므로 한 줄의 다른 문자가 다른 글꼴을 사용할 수 있습니다.
3. 웹 글꼴은 @font-face나 공급자 스타일시트로 불러오고 계산된 font-family 문자열만 보지 말고 실제 렌더링 글꼴을 검사하세요.

#실제 텍스트로 검증

실제 콘텐츠 너비에서 짧은 제목, 긴 제목, 전체 문단을 확인하세요. 좁은 화면과 확대된 텍스트에서도 반복하세요. 계산된 글자 크기뿐 아니라 줄바꿈과 악센트 또는 글자의 아래쪽 부분이 잘리는지도 살펴보세요.

콘텐츠 너비만 바뀝니다. 두 문단 모두 14px Geist와 24px 줄 높이를 사용하고 전체 텍스트에 맞게 높이가 늘어납니다.

텍스트 설명

1. 좁은 텍스트 너비는 더 일찍 줄바꿈해 같은 문단이 높아집니다. 넓은 너비는 한 줄에 더 많은 단어를 유지합니다.
2. 두 예시 모두 고정 높이나 축약한 텍스트가 없습니다. 구성을 평가할 때 글꼴 크기와 함께 실제 문단 너비를 확인하세요.

비교를 위해 너비를 맞췄습니다. 두 텍스트 상자 모두 고정 높이가 없으며 콘텐츠가 세로 길이를 결정합니다.

텍스트 설명

같은 너비의 두 텍스트 견본에 짧은 내용과 긴 내용이 들어 있습니다. 긴 제목은 더 많은 줄을 차지해 뒤의 내용을 아래로 밀어냅니다.

글꼴 패밀리 선언은 요청일 뿐, 글꼴 파일이 로드되었거나 모든 글리프를 포함한다는 증거는 아닙니다. 특히 라틴 문자와 CJK 문자가 한 줄에 섞일 때 실제 렌더링 글꼴을 확인하세요. 컨테이너가 텍스트와 함께 늘어날 수 있게 하세요. 영어 견본 하나의 줄 수를 유지하려고 카드 높이를 고정하지 마세요.