Font

Installation

pnpm add @teamsparta/stack-font

yarn add @teamsparta/stack-font

사용설명서

1. 폰트 스타일 가져오기

@teamsparta/stack-font 패키지에서 필요한 폰트 스타일을 가져옵니다.

import { heroTitle, bodyM, captionSb } from "@teamsparta/stack-font";

2. 스타일 적용하기

emotion의 css 프로퍼티나 emotion/styled를 사용하여 스타일을 적용할 수 있습니다.

emotion 사용 예시:

import { css } from "@emotion/react";
import { heroTitle } from "@teamsparta/stack-font";

const MyComponent = () => (
  <div css={css`
    ${heroTitle}
    color: blue;
  `}>
    Hero Title Text
  </div>
);

import styled from "@emotion/styled";
import { bodyM } from "@teamsparta/stack-font";

const StyledParagraph = styled.p`
  ${bodyM}
  color: gray;
`;

const MyComponent = () => (
  <StyledParagraph>
    This is a body text with medium weight.
  </StyledParagraph>
);

3. 사용 가능한 폰트 스타일

• heroTitle: 대형 제목용 (40px, 700 weight)
• largeTitle: 큰 제목용 (32px, 700 weight)
• title1: 제목 1 (28px, 700 weight)
• title2: 제목 2 (22px, 700 weight)
• subTitle1: 부제목 1 (22px, 700 weight)
• subTitle2: 부제목 2 (18px, 700 weight)
• subTitle3: 부제목 3 (16px, 700 weight)
• bodyB: 본문 굵은 글씨 (15px, 700 weight)
• bodyM: 본문 중간 굵기 (15px, 500 weight)
• bodyLong: 긴 본문용 (15px, 500 weight, 행간 넓음)
• captionSb: 캡션 세미볼드 (13px, 600 weight)
• captionM: 캡션 중간 굵기 (13px, 600 weight)
• tag1: 태그 1 (12px, 600 weight)
• tag2: 태그 2 (10px, 600 weight)

각 스타일은 이미 font-family, font-size, font-weight, line-height가 설정되어 있어 일관된 디자인을 유지할 수 있습니다.

4. 주의사항

• 모든 폰트 스타일은 Pretendard 폰트를 기본으로 사용합니다.
• 필요에 따라 색상이나 다른 스타일 속성을 추가로 적용할 수 있습니다.
• 반응형 디자인을 위해 미디어 쿼리와 함께 사용할 수 있습니다.

이 가이드를 참고하여 프로젝트 전반에 걸쳐 일관된 타이포그래피를 유지하세요.