타이포그래피

타이포그래피 (Typography)

폰트 변경

다음 theme 속성으로 제목, 코드 및 다른 모든 컴포넌트의 폰트와 기타 텍스트 스타일을 바꿀 수 있어요:

• theme.fontFamily – Title, Code, Kbd를 제외한 모든 컴포넌트의 font-family를 제어해요

• theme.fontFamilyMonospace – monospace 폰트가 필요한 컴포넌트(Code, Kbd, CodeHighlight)의 font-family를 제어해요

• theme.headings.fontFamily – Title과 Typography 컴포넌트에서 h1-h6 태그의 font-family를 제어해요; 정의되지 않으면 theme.fontFamily로 폴백돼요

import { Button, Code, Title, MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  fontFamily: 'Verdana, sans-serif',
  fontFamilyMonospace: 'Monaco, Courier, monospace',
  headings: { fontFamily: 'Outfit, sans-serif' },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Title>Outfit or sans-serif title</Title>
      <Button>Verdana button</Button>
      <Code>Monaco, Courier Code</Code>
    </MantineProvider>
  );
}

출처: 문서

본문

시스템 폰트

기본적으로 Mantine은 시스템 폰트를 사용해요. 즉 서로 다른 기기는 사용 가능한 폰트에 따라 컴포넌트를 표시해요. 예를 들어 macOS와 iOS 사용자는 San Francisco 폰트를, Windows 사용자는 Segoe UI 폰트를, Android 사용자는 Roboto 폰트를 보게 돼요. 이 접근 방식은 사용자에게 익숙한 경험을 제공하고 커스텀 폰트 로딩과 관련된 흔한 문제(레이아웃 이동, 보이지 않는 텍스트 등)를 피하게 해줘요. 엄격한 요구사항이 없다면 더 나은 성능을 위해 시스템 폰트를 사용하는 것이 권장돼요.

theme 속성의 기본값:

• theme.fontFamily와 theme.headings.fontFamily의 기본값은 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji

• theme.fontFamilyMonospace의 기본값은 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

Font sizes

theme.fontSizes 속성은 모든 Mantine 컴포넌트의 font-size 값을 정의해요:

import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  fontSizes: {
    xs: 10,
    sm: 11,
    md: 14,
    lg: 16,
    xl: 20,
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

기본 theme.fontSizes 값:

Line heights

theme.lineHeights 속성은 Text 컴포넌트의 line-height 값을 정의해요; 대부분의 다른 컴포넌트는 기본적으로 theme.lineHeights.md를 사용해요:

import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  lineHeights: {
    xs: '1.4',
    sm: '1.45',
    md: '1.55',
    lg: '1.6',
    xl: '1.65',
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

기본 theme.lineHeights 값:

h1-h6 스타일

Title과 Typography 컴포넌트의 제목 스타일을 커스터마이즈하려면 theme.headings를 설정해요:

import { createTheme, MantineProvider, rem } from '@mantine/core';

const theme = createTheme({
  headings: {
    // properties for all headings
    fontWeight: '400',
    fontFamily: 'Roboto',

    // properties for individual headings, all of them are optional
    sizes: {
      h1: {
        fontWeight: '100',
        fontSize: 36,
        lineHeight: '1.4',
      },
      h2: { fontSize: 30, lineHeight: '1.5' },
      // ...up to h6
      h6: { fontWeight: '900' },
    },
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

theme.headings로 제목 레벨별 font-size, font-weight, line-height를 커스터마이즈할 수 있어요. 스타일에 대한 더 많은 제어가 필요하면 Styles API와 함께 :is selector를 사용해 특정 제목 레벨을 타겟팅해요:

import { Title, MantineProvider } from '@mantine/core';
import classes from './Demo.module.css';

const theme = createTheme({
  components: {
    Title: Title.extend({
      classNames: {
        root: classes.heading,
      },
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Title order={1}>Heading 1</Title>
      <Title order={2}>Heading 2</Title>
      <Title order={3}>Heading 3</Title>
      <Title order={4}>Heading 4</Title>
      <Title order={5}>Heading 5</Title>
      <Title order={6}>Heading 6</Title>
    </MantineProvider>
  );
}

.heading:is(h1, h2, h3) {
  text-transform: uppercase;
}

더 알아보기 (Learn more)

• Color schemes
• Default props