타이포그래피 스타일 프로퍼티

텍스트를 스타일링할 때 쓸 수 있는 JSX 스타일 프로퍼티에 대해 알아봐요. 글꼴, 크기, 행간, 장식 등 텍스트와 관련된 다양한 속성을 토큰 기반으로 제어할 수 있어요.

출처: 문서

본문

Font Family

fontFamily 프로퍼티로 텍스트 요소의 글꼴을 설정해요.

<Text fontFamily="mono">Hello World</Text>

Prop	CSS Property	Token Category
`fontFamily`	`font-family`	`fonts`

Prop	CSS Property	Token Category
`fontSize`	`font-size`	`fonts`

Text Styles

textStyle 프로퍼티로 글자 크기, 행간, 자간(letter spacing) 구성을 한 번에 적용해요.

<Text textStyle="xs">Hello World</Text>
<Text textStyle="sm">Hello World</Text>
<Text textStyle="md">Hello World</Text>
<Text textStyle="lg">Hello World</Text>
<Text textStyle="xl">Hello World</Text>
<Text textStyle="2xl">Hello World</Text>
<Text textStyle="3xl">Hello World</Text>
<Text textStyle="4xl">Hello World</Text>
<Text textStyle="5xl">Hello World</Text>

Prop	Config
`textStyle`	`theme.textStyles`

Font Style

fontStyle 프로퍼티로 텍스트 요소의 글꼴 스타일(이탤릭 등)을 설정해요.

<Text fontStyle="italic">Hello World</Text>

Prop	CSS Property	Token Category
`fontStyle`	`font-style`	none

Font Weight

fontWeight 프로퍼티로 텍스트 요소의 글자 굵기를 설정해요.

// hardcoded values
<Text fontWeight="600">Hello World</Text>

// token values
<Text fontWeight="semibold">Hello World</Text>

Prop	CSS Property	Token Category
`fontWeight`	`font-weight`	`fontWeights`

Font Variant Numeric

fontVariantNumeric 프로퍼티로 텍스트 요소의 숫자 변형을 설정해요.

<Text fontVariantNumeric="lining-nums">Hello World</Text>

Prop	CSS Property	Token Category
`fontVariantNumeric`	`font-variant-numeric`	none

Letter Spacing

letterSpacing 프로퍼티로 텍스트 요소의 자간을 설정해요.

// hardcoded values
<Text letterSpacing="0.1rem">Hello World</Text>

// token values
<Text letterSpacing="tight">Hello World</Text>
<Text letterSpacing="wide">Hello World</Text>
<Text letterSpacing="wider">Hello World</Text>
<Text letterSpacing="widest">Hello World</Text>

Prop	CSS Property	Token Category
`letterSpacing`	`letter-spacing`	`letterSpacings`

Truncation

truncate 프로퍼티로 텍스트를 잘라내요.

<Text truncate>Lorem ipsum dolor sit amet...</Text>

Prop	CSS Property	Token Category
`truncate`	`text-overflow`	none

Line Clamp

lineClamp 프로퍼티로 여러 줄 텍스트를 잘라내요. lineClamp를 none으로 설정하면 잘라내기를 해제해요.

<Text lineClamp="2">Lorem ipsum dolor sit amet...</Text>

// revert truncation
<Text lineClamp="none">Lorem ipsum dolor sit amet...</Text>

Prop	CSS Property	Token Category
`lineClamp`	`webkit-line-clamp`	none

Line Height

lineHeight 프로퍼티로 텍스트 요소의 행간을 설정해요.

// hardcoded values
<Text lineHeight="1.5">Hello World</Text>

// token values
<Text lineHeight="tall">Hello World</Text>

Prop	CSS Property	Token Category
`lineHeight`	`line-height`	`lineHeights`

Text Align

textAlign 프로퍼티로 텍스트 요소의 정렬을 설정해요.

<Text textAlign="left">Hello World</Text>
<Text textAlign="center">Hello World</Text>
<Text textAlign="right">Hello World</Text>
<Text textAlign="justify">Hello World</Text>

Prop	CSS Property	Token Category
`textAlign`	`text-align`	none

Text Color

color 프로퍼티로 텍스트 요소의 색을 설정해요.

<Text color="red">Hello World</Text>

Prop	CSS Property	Token Category
`color`	`color`	`colors`

Text Decoration

textDecoration 또는 textDecor 프로퍼티로 텍스트 요소의 장식을 설정해요.

<Text textDecoration="underline">Hello World</Text>

Prop	CSS Property	Token Category
`textDecor`, `textDecoration`	`text-decoration`	none

Text Decoration Color

textDecorationColor 프로퍼티로 텍스트 장식의 색을 설정해요.

<Text textDecoration="underline" textDecorationColor="red">
  Hello World
</Text>

Prop	CSS Property	Token Category
`textDecorationColor`	`text-decoration-color`	`colors`

Text Decoration Style

textDecorationStyle 프로퍼티로 텍스트 장식의 스타일을 설정해요.

<Text textDecoration="underline" textDecorationStyle="dashed">
  Hello World
</Text>

Prop	CSS Property	Token Category
`textDecorationStyle`	`text-decoration-style`	none

Text Decoration Thickness

textDecorationThickness 프로퍼티로 텍스트 장식의 두께를 설정해요.

<Text textDecoration="underline" textDecorationThickness="1px">
  Hello World
</Text>

Prop	CSS Property	Token Category
`textDecorationThickness`	`text-decoration-thickness`	none

Text Underline Offset

textUnderlineOffset 프로퍼티로 텍스트 밑줄의 오프셋을 설정해요.

<Text textDecoration="underline" textUnderlineOffset="1px">
  Hello World
</Text>

Prop	CSS Property	Token Category
`textUnderlineOffset`	`text-underline-offset`	none

Text Transform

textTransform 프로퍼티로 텍스트 요소의 변형(대문자/소문자 등)을 설정해요.

<Text textTransform="uppercase">Hello World</Text>

Prop	CSS Property	Token Category
`textTransform`	`text-transform`	none

Text Overflow

textOverflow 프로퍼티로 텍스트 요소의 오버플로 처리를 설정해요.

<Text textOverflow="ellipsis">Hello World</Text>

Prop	CSS Property	Token Category
`textOverflow`	`text-overflow`	none

Text Shadow

textShadow 프로퍼티로 텍스트 요소의 그림자를 설정해요.

<Text textShadow="0 0 1px red">Hello World</Text>

Prop	CSS Property	Token Category
`textShadow`	`text-shadow`	`shadows`

Text Indent

textIndent 프로퍼티로 텍스트 요소의 들여쓰기를 설정해요.

// hardcoded values
<Text textIndent="1rem">Hello World</Text>

// token values
<Text textIndent="3">Hello World</Text>

Prop	CSS Property	Token Category
`textIndent`	`text-indent`	`spacing`

Vertical Align

verticalAlign 프로퍼티로 텍스트 요소의 세로 정렬을 설정해요.

<Text verticalAlign="top">Hello World</Text>

Prop	CSS Property	Token Category
`verticalAlign`	`vertical-align`	none

White Space

whiteSpace 프로퍼티로 텍스트 요소의 공백 처리 방식을 설정해요.

<Text whiteSpace="nowrap">Hello World</Text>

Prop	CSS Property	Token Category
`whiteSpace`	`white-space`	none

Word Break

wordBreak 프로퍼티로 텍스트가 콘텐츠 박스를 넘칠 때 줄바꿈이 생기는 위치를 설정해요.

<Text wordBreak="break-all">Hello World</Text>

Prop	CSS Property	Token Category
`wordBreak`	`word-break`	none

Hyphens

hyphens 프로퍼티로 텍스트에 하이픈 사용 여부를 설정해요.

<Text hyphens="auto">Hello World</Text>

Prop	CSS Property	Token Category
`hyphens`	`hyphens`	none

타이포그래피 스타일 프로퍼티