typographyStyle

Typography 스타일을 유틸리티로 제공해주는 함수입니다.

Introduce

Typography 컴포넌트를 스타일 유틸리티 함수로 제공합니다.

typographyStyle(variant, weight) 로 사용합니다.

Usage

Sx prop

import { Box, css, typographyStyle } from '@wanteddev/wds';

import type { Theme } from '@wanteddev/wds';

const Component = () => {
  return (
    <Box
      sx={typographyStyle('title1', 'bold')}
    />
  )
}

Css function

import { css, typographyStyle } from '@wanteddev/wds';

import type { Theme } from '@wanteddev/wds';

export const exampleStyle = (theme: Theme) => css`
  ${typographyStyle('title1', 'bold')}
`;

Variants

아래 variant를 사용할 수 있습니다.


명칭크기행간자간
Display 156px72px (1.286)-0.0319em
Display 240px52px (1.3)-0.0282em
Display 336px48px (1.334)-0.027em
Title 132px44px (1.375)-0.0253em
Title 228px38px (1.358)-0.0236em
Title 324px32px (1.334)-0.023em
Heading 122px30px (1.364)-0.0194em
Heading 220px28px (1.4)-0.012em
Headline 118px26px (1.444)-0.002em
Headline 217px26px (1.412)0em
Body 1/Normal16px24px (1.5)0.0057em
Body 1/Reading16px26px (1.625)0.0057em
Body 2/Normal15px22px (1.467)0.0096em
Body 2/Reading15px24px (1.6)0.0096em
Label 1/Normal14px20px (1.429)0.0145em
Label 1/Reading14px22px (1.571)0.0145em
Label 213px18px (1.385)0.0194em
Caption 112px16px (1.334)0.0252em
Caption 211px14px (1.273)0.0311em

© 2026 Wanted Lab, Inc.