Typography

Typography

타이포그래피를 사용하면 디자인과 콘텐츠를 가능한 한 명확하고 효율적으로 표현할 수 있어요.

출처: 문서

본문

Roboto 폰트

Material UI는 기본적으로 Roboto 폰트를 사용해요. Fontsource를 통해 또는 Google Fonts CDN으로 프로젝트에 추가할 수 있어요.

npm install @fontsource/roboto

pnpm add @fontsource/roboto

yarn add @fontsource/roboto

그런 다음 엔트리 포인트에서 이렇게 임포트하면 돼요:

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

:::info Fontsource는 특정 서브셋, 두께, 스타일을 로드하도록 설정할 수 있어요. Material UI의 기본 타이포그래피 설정은 300, 400, 500, 700 폰트 두께만 사용해요. :::

Google Web Fonts

Google Web Fonts CDN으로 Roboto를 설치하려면, 프로젝트의 <head /> 태그 안에 다음 코드를 추가하세요:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>

컴포넌트 (Component)

사용법 (Usage)

Typography 컴포넌트는 Material Design 타이포그래피 스케일을 따르며, 일관된 레이아웃을 위해 서로 잘 어울리는 제한된 타입 크기 세트를 제공해요.

import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function Types() {
  return (
    <Box sx={{ width: '100%', maxWidth: 500 }}>
      <Typography variant="h1" gutterBottom>
        h1. Heading
      </Typography>
      <Typography variant="h2" gutterBottom>
        h2. Heading
      </Typography>
      <Typography variant="h3" gutterBottom>
        h3. Heading
      </Typography>
      <Typography variant="h4" gutterBottom>
        h4. Heading
      </Typography>
      <Typography variant="h5" gutterBottom>
        h5. Heading
      </Typography>
      <Typography variant="h6" gutterBottom>
        h6. Heading
      </Typography>
      <Typography variant="subtitle1" gutterBottom>
        subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
        blanditiis tenetur
      </Typography>
      <Typography variant="subtitle2" gutterBottom>
        subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
        blanditiis tenetur
      </Typography>
      <Typography variant="body1" gutterBottom>
        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
        blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
        neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
        quasi quidem quibusdam.
      </Typography>
      <Typography variant="body2" gutterBottom>
        body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
        blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
        neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
        quasi quidem quibusdam.
      </Typography>
      <Typography variant="button" gutterBottom sx={{ display: 'block' }}>
        button text
      </Typography>
      <Typography variant="caption" gutterBottom sx={{ display: 'block' }}>
        caption text
      </Typography>
      <Typography variant="overline" gutterBottom sx={{ display: 'block' }}>
        overline text
      </Typography>
    </Box>
  );
}

테마 키 (Theme keys)

어떤 상황에서는 Typography 컴포넌트를 사용할 수 없을 수도 있어요. 그럴 때 테마의 typography 키를 활용하면 좋아요.

import { styled } from '@mui/material/styles';

const Div = styled('div')(({ theme }) => ({
  ...theme.typography.button,
  backgroundColor: (theme.vars || theme).palette.background.paper,
  padding: theme.spacing(1),
}));

export default function TypographyTheme() {
  return <Div>{"This div's text looks like that of a button."}</Div>;
}

커스터마이즈 (Customization)

변형 추가 & 비활성화 (Adding & disabling variants)

기본 타이포그래피 변형을 사용하는 것에 더해, 커스텀 변형을 추가하거나 필요 없는 변형을 비활성화할 수 있어요. 자세한 내용은 Adding & disabling variants 페이지를 참고하세요.

시맨틱 요소 바꾸기 (Changing the semantic element)

Typography 컴포넌트는 variantMapping prop을 사용해서 UI 변형을 시맨틱 요소와 연결해요. 타이포그래피 컴포넌트의 스타일이 기반이 되는 시맨틱 요소와 독립적이라는 점을 이해하는 게 중요해요.

페이지에 h1 요소가 두 개 있는 것을 피하는 같은 일회성 상황에서 기반 요소를 바꾸려면 component prop을 사용하세요:

<Typography variant="h1" component="h2">
  h1. Heading
</Typography>

타이포그래피 요소 매핑을 전역으로 바꾸려면 테마를 사용하세요:

const theme = createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          h1: 'h2',
          h2: 'h2',
          h3: 'h2',
          h4: 'h2',
          h5: 'h2',
          h6: 'h2',
          subtitle1: 'h2',
          subtitle2: 'h2',
          body1: 'span',
          body2: 'span',
        },
      },
    },
  },
});

sx prop

sx prop을 사용하면 MUI System 패키지의 모든 스타일 함수와 테마 인식 속성에 접근할 수 있는 CSS의 상위집합을 이용해 어떤 Typography 인스턴스든 빠르게 커스터마이즈할 수 있어요. 아래는 이 prop을 사용해 margin을 적용하는 예시예요:

<Typography sx={{ m: 2 }} />

접근성 (Accessibility)

접근 가능한 타이포그래피를 위해 따라야 할 핵심 요소들이 있어요:

Typography API

데모 (Demos)

이 React 컴포넌트의 사용 예시와 세부 사항은 컴포넌트 데모 페이지를 방문해보세요:

임포트 (Import)

import Typography from '@mui/material/Typography';
// or
import { Typography } from '@mui/material';

Props

Name Type Default Required Description
align 'center' | 'inherit' | 'justify' | 'left' | 'right' 'inherit' No
children node - No
classes object - No Override or extend the styles applied to the component.
color 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'textPrimary' | 'textSecondary' | 'textDisabled' | string - No
component elementType - No
gutterBottom bool false No
noWrap bool false No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
variant 'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'overline' | 'subtitle1' | 'subtitle2' | string 'body1' No
variantMapping object `{
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h4',
h5: 'h5',
h6: 'h6',
subtitle1: 'h6',
subtitle2: 'h6',
body1: 'p',
body2: 'p',
inherit: 'p',
}` No

Note: The ref is forwarded to the root element (HTMLParagraphElement).

Any other props supplied will be provided to the root element (native element).

테마 기본 props (Theme default props)

MuiTypography를 사용하면 테마로 이 컴포넌트의 기본 props를 바꿀 수 있어요.

CSS 규칙 이름 (Rule name)

Global class Rule name Description
- alignCenter Styles applied to the root element if align="center".
- alignJustify Styles applied to the root element if align="justify".
- alignLeft Styles applied to the root element if align="left".
- alignRight Styles applied to the root element if align="right".
- body1 Styles applied to the root element if variant="body1".
- body2 Styles applied to the root element if variant="body2".
- button Styles applied to the root element if variant="button".
- caption Styles applied to the root element if variant="caption".
- gutterBottom Styles applied to the root element if gutterBottom={true}.
- h1 Styles applied to the root element if variant="h1".
- h2 Styles applied to the root element if variant="h2".
- h3 Styles applied to the root element if variant="h3".
- h4 Styles applied to the root element if variant="h4".
- h5 Styles applied to the root element if variant="h5".
- h6 Styles applied to the root element if variant="h6".
- inherit Styles applied to the root element if variant="inherit".
- noWrap Styles applied to the root element if nowrap={true}.
- overline Styles applied to the root element if variant="overline".
- root Styles applied to the root element.
- subtitle1 Styles applied to the root element if variant="subtitle1".
- subtitle2 Styles applied to the root element if variant="subtitle2".

소스 코드 (Source code)

이 페이지에서 원하는 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트의 구현을 살펴보는 것을 고려해보세요.

더 알아보기 (Learn more)