# Typography

Display를 제외한 모든 스타일의 자간은 0이며 컬러와 정렬은 상황에 맞게 변형하여 사용합니다.  
Line Height는 가독성을 고려하여 140~150%로 설정합니다.

| 이름 | 주 용도 |
| --- | --- |
| Display_46_Bold | 마케팅 등 정보 전달 목적 |
| Display_46_SemiBold | 마케팅 등 정보 전달 목적 |
| Display_46_Medium | 마케팅 등 정보 전달 목적 |
| Display_46_Regular | 마케팅 등 정보 전달 목적 |
| Display_40_Bold | 마케팅 등 정보 전달 목적 |
| Display_40_SemiBold | 마케팅 등 정보 전달 목적 |
| Display_40_Medium | 마케팅 등 정보 전달 목적 |
| Display_40_Regular | 마케팅 등 정보 전달 목적 |
| Display_36_Bold | 마케팅 등 정보 전달 목적 |
| Display_36_SemiBold | 마케팅 등 정보 전달 목적 |
| Display_36_Medium | 마케팅 등 정보 전달 목적 |
| Display_36_Regular | 마케팅 등 정보 전달 목적 |
| Display_28_Bold | 마케팅 등 정보 전달 목적 |
| Display_28_SemiBold | 마케팅 등 정보 전달 목적 |
| Display_28_Medium | 마케팅 등 정보 전달 목적 |
| Display_28_Regular | 마케팅 등 정보 전달 목적 |
| Heading_24_Bold | 대 타이틀 |
| Heading_24_SemiBold | 대 타이틀 |
| Heading_24_Medium | 대 타이틀 |
| Heading_24_Regular | 대 타이틀 |
| Heading_20_Bold | 대 타이틀 |
| Heading_20_SemiBold | 대 타이틀 |
| Heading_20_Medium | 대 타이틀 |
| Heading_20_Regular | 대 타이틀 |
| Heading_18_Bold | 타이틀 |
| Heading_18_SemiBold | 타이틀 |
| Heading_18_Medium | 타이틀 |
| Heading_18_Regular | 타이틀 |
| Heading_17_Bold | 타이틀 |
| Heading_17_SemiBold | 타이틀 |
| Heading_17_Medium | 타이틀 |
| Heading_17_Regular | 타이틀 |
| Body_15_Bold | 서브 타이틀 |
| Body_15_SemiBold | 서브 타이틀 |
| Body_15_Medium | 서브 타이틀 |
| Body_15_Regular | 서브 타이틀 |
| Body_14_Bold | 본문 |
| Body_14_SemiBold | 본문 |
| Body_14_Medium | 본문 |
| Body_14_Regular | 본문 |
| Body_13_Bold | 본문 |
| Body_13_SemiBold | 본문 |
| Body_13_Medium | 본문 |
| Body_13_Regular | 본문 |
| Body_12_Bold | 본문 |
| Body_12_SemiBold | 본문 |
| Body_12_Medium | 본문 |
| Body_12_Regular | 본문 |
| Caption_11_Bold | UI 참고 설명 등 |
| Caption_11_SemiBold | UI 참고 설명 등 |
| Caption_11_Medium | UI 참고 설명 등 |
| Caption_11_Regular | UI 참고 설명 등 |
| Caption_10_Bold | 툴팁 및 작은 컴포넌트 내 사용 |
| Caption_10_SemiBold | 툴팁 및 작은 컴포넌트 내 사용 |
| Caption_10_Medium | 툴팁 및 작은 컴포넌트 내 사용 |
| Caption_10_Regular | 툴팁 및 작은 컴포넌트 내 사용 |

```tsx
import styled from '@emotion/styled';
import { text_styles, BaseText } from '@croquiscom/pds';
export const Element = () => {
  return (
    <section>
      <Heading>타이포그래피</Heading>
      <BaseText kind='Body_13_Regular'>
        Display를 제외한 모든 스타일의 자간은 0이며 컬러와 정렬은 상황에 맞게 변형하여 사용합니다.      </BaseText>
    </section>
  );
};
const Heading = styled.h1`
  ${text_styles.Heading_24_Bold}
`;
```