Typography
원티드의 타이포그래피를 웹 환경에서 사용할 수 있는 컴포넌트입니다.
일반적으로 텍스트를 표시할 때 사용하는 컴포넌트입니다.
display1
원티드
원티드
원티드
display2
원티드
원티드
원티드
title1
원티드
원티드
원티드
title2
원티드
원티드
원티드
title3
원티드
원티드
원티드
heading1
원티드
원티드
원티드
heading2
원티드
원티드
원티드
headline1
원티드
원티드
원티드
headline2
원티드
원티드
원티드
body1
원티드
원티드
원티드
body1-reading
원티드
원티드
원티드
body2
원티드
원티드
원티드
body2-reading
원티드
원티드
원티드
label1
원티드
원티드
원티드
label1-reading
원티드
원티드
원티드
label2
원티드
원티드
원티드
caption1
원티드
원티드
원티드
caption2
원티드
원티드
원티드
아래 variant를 사용할 수 있습니다.
| 명칭 | 크기 | 행간 | 자간 |
|---|---|---|---|
| Display 1 | 56px | 72px (1.286) | -0.0319em |
| Display 2 | 40px | 52px (1.3) | -0.0282em |
| Display 3 | 36px | 48px (1.334) | -0.027em |
| Title 1 | 32px | 44px (1.375) | -0.0253em |
| Title 2 | 28px | 38px (1.358) | -0.0236em |
| Title 3 | 24px | 32px (1.334) | -0.023em |
| Heading 1 | 22px | 30px (1.364) | -0.0194em |
| Heading 2 | 20px | 28px (1.4) | -0.012em |
| Headline 1 | 18px | 26px (1.444) | -0.002em |
| Headline 2 | 17px | 26px (1.412) | 0em |
| Body 1/Normal | 16px | 24px (1.5) | 0.0057em |
| Body 1/Reading | 16px | 26px (1.625) | 0.0057em |
| Body 2/Normal | 15px | 22px (1.467) | 0.0096em |
| Body 2/Reading | 15px | 24px (1.6) | 0.0096em |
| Label 1/Normal | 14px | 20px (1.429) | 0.0145em |
| Label 1/Reading | 14px | 22px (1.571) | 0.0145em |
| Label 2 | 13px | 18px (1.385) | 0.0194em |
| Caption 1 | 12px | 16px (1.334) | 0.0252em |
| Caption 2 | 11px | 14px (1.273) | 0.0311em |
| Name | Types | defaultValue |
|---|---|---|
as | ElementType | - |
xl | Merge<Pick<TypographyDefaultProps, "variant" | "weight" | "align">, { sx?: CSSInterpolation; }> | undefined | - |
lg | Merge<Pick<TypographyDefaultProps, "variant" | "weight" | "align">, { sx?: CSSInterpolation; }> | undefined | - |
md | Merge<Pick<TypographyDefaultProps, "variant" | "weight" | "align">, { sx?: CSSInterpolation; }> | undefined | - |
sm | Merge<Pick<TypographyDefaultProps, "variant" | "weight" | "align">, { sx?: CSSInterpolation; }> | undefined | - |
xs | Merge<Pick<TypographyDefaultProps, "variant" | "weight" | "align">, { sx?: CSSInterpolation; }> | undefined | - |
color | ThemeColorsToken | - |
children | ReactNode | - |
sx | SxProp | - |
variant | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "heading1" | "heading2" | "headline1" | "headline2" | "body1" | "body1-reading" | "body2" | "body2-reading" | "label1" | "label1-reading" | "label2" | "caption1" | "caption2" | "body1" |
weight | "medium" | "regular" | "bold" | "regular" |
align | Property.TextAlign | undefinedThe alignment of the text. | - |
noWrap | booleanWhether to wrap the text. If `noWrap` is set to true, the text will not wrap and overflowing content will be displayed with ellipsis. | false |
display | Property.Display | undefinedThe display of the text. | - |