概要

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

書式設定コンポーネント

書式設定コンポーネントを組み合わせて、強調を追加し、重要性を示し、コードなどを表示します。

覚えておくべき最も重要なことは、 前向きでいることです.

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

タイプスケール

タイポグラフィシステムは、9段階のサイズスケールに基づいています。各ステップには、対応するフォントサイズ、行の高さ、文字間隔の値があり、すべて組み合わせて使用するように設計されています。

The quick brown fox jumps over the lazy dog. (速い茶色のキツネは怠惰な犬を飛び越えます。 - 英語のフォント確認用例文)

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

ステップ	サイズ	文字間隔	行の高さ
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`

フォントウェイト

以下のウェイトがサポートされています。ウェイトは、独自の書体にマッピングするようにカスタマイズできます。

ライトレギュラーミディアムボールド

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

ウェイト	デフォルト値
ライト	`300`
レギュラー	`400`
ミディアム	`500`
ボールド	`700`

フォントファミリー

デフォルトでは、Radix Themesは移植性と読みやすさのためにシステムフォントスタックを使用します。カスタムフォントでテーマをカスタマイズする方法については、次のセクションに進みます。

種類	デフォルト値
テキスト	`-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
コード	`'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji'`
強調	`'Times New Roman', 'Times', serif`
引用	`'Times New Roman', 'Times', serif`

カスタマイズ

Radix Themesのタイポグラフィは、トークンシステムの対応するCSS変数をオーバーライドすることでカスタマイズできます。タイポグラフィットークンの完全なリストについては、ソースコードを参照してください。

CSSがRadix Themesスタイルの後に適用されるようにして、優先順位が付けられるようにしてください。

カスタムフォント

独自のフォントを提供できますが、インポートおよび提供する方法を選択するかはあなた次第です。正しい構文を使用して名前付きフォントを指定することのみが必要です。

テーマで使用されるフォントファミリーをカスタマイズするには、対応する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を使用する場合

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インポート順序の問題が発生する可能性があることに注意してください。詳細については、一般的なスタイリングの問題を参照してください。

カスタムフォントウェイト

テーマで使用される正確なフォントウェイトをカスタマイズするには、対応するfont-weightトークンを独自の値に再マッピングします

.radix-themes {
  --font-weight-light: 200;
  --font-weight-regular: 300;
  --font-weight-medium: 600;
  --font-weight-bold: 800;
}

詳細設定

カスタマイズできる高度なタイポグラフィ機能がいくつかあります。これらには、特定のコンポーネントのフォントサイズ乗数、フォントスタイル、文字間隔、リーディングトリムが含まれます。たとえば、デフォルトのフォントよりも相対的に大きいフォントサイズ、異なるリーディングトリム値、およびより狭い文字間隔でレンダリングするように見出しをカスタマイズできます

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

前へダークモード

次へスペーシング

GitHubでこのページを編集する。