Themes
Advanced
Utils
Theme

Typography

테마에서 타이포그래피를 사용하는 방법과 조정하는 방법에 대한 안내입니다.

Base components

타이포그래피는 Text 및 Heading 구성 요소를 사용하여 제목 및 본문 텍스트를 렌더링합니다. 이러한 구성 요소는 size 및 weight props를 공유하며, 기본 타이포그래피 시스템에 매핑되어 애플리케이션 전반에 걸쳐 일관된 타이포그래피를 보장합니다.

Typographic principles

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.
<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

포맷팅 구성 요소를 조합하여 강조, 중요성 신호, 코드 등을 표현할 수 있습니다.

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

	The <Em>most</Em> important thing to remember is,{" "}

	<Strong>stay positive</Strong>.

</Text>

Type scale

타이포그래피 시스템은 9단계 size 스케일을 기반으로 합니다. 각 단계는 해당하는 글꼴 크기, 줄 높이 및 글자 간격 값을 가지며, 이들은 모두 조합하여 사용하도록 설계되었습니다.

Aa
1
Aa
2
Aa
3
Aa
4
Aa
5
Aa
6
Aa
7
Aa
8
Aa
9
The quick brown fox jumps over the lazy dog.
<Text size="6">The quick brown fox jumps over the lazy dog.</Text>
StepSizeLetter spacingLine height
112px0.0025em16px
214px0em20px
316px0em24px
418px-0.0025em26px
520px-0.005em28px
624px-0.00625em30px
728px-0.0075em36px
835px-0.01em40px
960px-0.025em60px

Font weight

다음과 같은 두께가 지원됩니다. 두께는 사용자 정의 가능하며, 자신의 서체에 매핑할 수 있습니다.

LightRegularMediumBold
<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>
WeightDefault value
Light300
Regular400
Medium500
Bold700

Font family

기본적으로 Confy-ui Themes는 이식성과 가독성을 위해 시스템 글꼴 스택을 사용합니다. 다음 섹션으로 넘어가서 사용자 정의 글꼴로 테마를 사용자 정의하는 방법을 알아보세요.

TypeDefault 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

Confy-ui Themes 타이포그래피는 토큰 시스템의 해당 CSS 변수를 오버라이드하여 사용자 정의할 수 있습니다.

CSS가 Confy-ui Themes 스타일 뒤에 적용되도록 하여 우선권을 가질 수 있도록 하세요.

Custom fonts

자신의 글꼴을 제공할 수 있지만, 이를 가져오고 제공하는 방법은 귀하에게 달려 있습니다. 이름이 지정된 글꼴을 올바른 구문을 사용하여 지정하는 것만 요구됩니다.

테마에서 사용되는 글꼴 패밀리를 사용자 정의하려면 해당 font-family 토큰을 다시 매핑하세요:

.radix-themes {

	--default-font-family:  /* 사용자 정의 기본 글꼴 */ --heading-font-family:

		/* <Heading> 구성 요소에 대한 사용자 정의 글꼴 */ --code-font-family:

		/* <Code> 구성 요소에 대한 사용자 정의 글꼴 */ --strong-font-family:

		/* <Strong> 구성 요소에 대한 사용자 정의 글꼴 */ --em-font-family:

		/* <Em> 구성 요소에 대한 사용자 정의 글꼴 */ --quote-font-family:

		/* <Quote> 구성 요소에 대한 사용자 정의 글꼴 */ ;

}

With next/font

Next/font를 통해 사용자 정의 글꼴을 로드하려면, variable 옵션을 사용하여 CSS 변수 이름을 정의하세요. 그런 다음 해당 CSS 변수 클래스를 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);

}

앱 라우터를 실행하는 경우 CSS 가져오기 순서 문제에 직면할 수 있으므로 주의하세요. 일반적인 스타일링 문제에 대한 자세한 내용은 여기에서 확인하세요.

Custom font weights

테마에서 사용되는 정확한 글꼴 두께를 사용자 정의하려면 해당 글꼴 두께 토큰을 자신의 값으로 다시 매핑하세요:

.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;

}
PreviousDark mode
NextSpacing
Edit this page on GitHub.