Typography

Typography (타이포그래피)

타이포그래피를 사용하고 조정하는 안내 문서예요.

출처: 문서

기본 컴포넌트 (Base components)

Text와 Heading 컴포넌트를 사용해 제목과 본문을 렌더링해요. 이 컴포넌트들은 size와 weight prop을 공유하며, 앱 전체에서 일관된 타이포그래피를 보장하도록 내부 타입 시스템에 매핑돼요.

<Heading mb="2" size="4">Typographic principles</Heading>

<Text>The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.</Text>

포맷팅 컴포넌트 (Formatting components)

포맷팅 컴포넌트를 조합해 강조, 중요도 표시, 코드 표시 등을 추가할 수 있어요.

<Text>
  The <Em>most</Em> important thing to remember is, <Strong>stay positive</Strong>.
</Text>

타입 스케일 (Type scale)

타이포그래피 시스템은 9단계 size 스케일을 기반으로 해요. 각 단계에는 조합해서 사용하도록 설계된 대응하는 폰트 크기, 줄 높이, 자간 값이 있어요.

<Text size="6">The quick brown fox jumps over the lazy dog.</Text>

Step	Size	Letter spacing	Line height
1	`12px`	`0.0025em`	`16px`
2	`14px`	`0em`	`20px`
3	`16px`	`0em`	`24px`
4	`18px`	`-0.0025em`	`26px`
5	`20px`	`-0.005em`	`28px`
6	`24px`	`-0.00625em`	`30px`
7	`28px`	`-0.0075em`	`36px`
8	`35px`	`-0.01em`	`40px`
9	`60px`	`-0.025em`	`60px`

폰트 굵기 (Font weight)

다음 굵기들이 지원돼요. 굵기는 커스터마이징해서 자신의 서체에 매핑할 수 있어요.

<Text size="6">
  <Flex direction="column">
    <Text weight="light">Light</Text>

    <Text weight="regular">Regular</Text>

    <Text weight="medium">Medium</Text>

    <Text weight="bold">Bold</Text>
  </Flex>
</Text>

Weight	Default value
Light	`300`
Regular	`400`
Medium	`500`
Bold	`700`

폰트 패밀리 (Font family)

기본적으로 Radix Themes는 이식성과 가독성을 위해 시스템 폰트 스택을 사용해요. 다음 섹션에서 커스텀 폰트로 테마를 커스터마이징하는 방법을 알아보세요.

Type	Default value
Text	`-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
Code	`'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji'`
Emphasis	`'Times New Roman', 'Times', serif`
Quote	`'Times New Roman', 'Times', serif`

커스터마이징 (Customization)

Radix Themes 타이포그래피는 토큰 시스템의 대응 CSS 변수를 덮어써서 커스터마이징할 수 있어요. 타이포그래피 토큰의 전체 목록은 소스 코드를 참고해 주세요.

CSS가 Radix Themes 스타일보다 나중에 적용되어 우선순위를 가지도록 해야 해요.

커스텀 폰트 (Custom fonts)

자신만의 폰트를 제공할 수 있지만, import하고 제공하는 방법은 자유예요. 이름 붙인 폰트를 올바른 구문으로 지정하기만 하면 돼요.

테마에서 사용되는 폰트 패밀리를 커스터마이징하려면 대응하는 font-family 토큰을 다시 매핑해 주세요.

.radix-themes {
  --default-font-family:  /* Your custom default font */ --heading-font-family:
    /* Your custom font for <Heading> components */
    --code-font-family: /* Your custom font for <Code> components */
    --strong-font-family: /* Your custom font for <Strong> components */
    --em-font-family: /* Your custom font for <Em> components */
    --quote-font-family: /* Your custom font for <Quote> components */;
}

next/font 사용 (With next/font)

next/font로 커스텀 폰트를 불러오려면 variable 옵션을 사용해 CSS 변수 이름을 정의해 주세요. 그런 다음 그 CSS 변수 class를 HTML 문서에 추가해 주세요.

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],

  display: "swap",

  variable: "--font-inter",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

마지막으로 커스텀 CSS에서 CSS 변수를 할당해 주세요.

.radix-themes {
  --default-font-family: var(--font-inter);
}

app router를 실행 중이라면 CSS import 순서 문제가 발생할 수 있어요. 자세한 내용은 common styling issues를 참고해 주세요.

커스텀 폰트 굵기 (Custom font weights)

테마에서 사용되는 정확한 폰트 굵기를 커스터마이징하려면 대응하는 font-weight 토큰을 자신만의 값으로 다시 매핑해 주세요.

.radix-themes {
  --font-weight-light: 200;

  --font-weight-regular: 300;

  --font-weight-medium: 600;

  --font-weight-bold: 800;
}

고급 설정 (Advanced settings)

커스터마이징할 수 있는 고급 타이포그래피 기능이 몇 가지 있어요. 여기에는 특정 컴포넌트의 폰트 크기 배율, 폰트 스타일, 자간, 리딩 트림이 포함돼요. 예를 들어 헤딩이 기본 폰트보다 상대적으로 더 크게, 다른 리딩 트림 값으로, 그리고 더 타이트한 자간으로 렌더링되도록 커스터마이징할 수 있어요.

.radix-themes {
  --heading-font-family: "Untitled Sans", sans-serif;

  --heading-font-size-adjust: 1.05;

  --heading-font-style: normal;

  --heading-leading-trim-start: 0.42em;

  --heading-leading-trim-end: 0.38em;

  --heading-letter-spacing: -0.01em;
}

더 알아보기 (Learn more)

커스텀 폰트를 지정하려면 --default-font-family 같은 토큰을 다시 매핑하고, 굵기·자간·리딩 트림도 세부 조정할 수 있어요.