Typography

라이브러리의 타입 스케일에 맞춰 텍스트를 렌더링합니다. 제목과 본문, 캡션이 모두 같은 크기 체계를 씁니다.

import { Typography } from 'neba';

<Typography level="h2">잘라낸 아크릴 한 장</Typography>
<Typography>모든 표면은 같은 재료를, 다른 불투명도로 쓴 것입니다.</Typography>;

Props

Prop	타입	기본값	설명
level	'h1'…'h6' | 'lead' | 'body' | 'caption' | 'overline'	'body'	타입 스케일과 렌더링할 요소를 함께 정합니다. variant라고 부르지 않는 이유는 이 라이브러리에서 variant가 이미 표면의 무게를 뜻하기 때문입니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	의미론적 색 역할. 다른 컴포넌트와 달리 기본값이 없습니다. 지정하지 않으면 페이지의 글자색을 그대로 씁니다
weight	'regular' | 'medium' | 'semibold' | 'bold'	—	level이 정한 굵기를 덮어씁니다
align	'start' | 'center' | 'end' | 'justify'	—	텍스트 정렬
lines	number	—	이 줄 수로 자르고 말줄임표를 붙입니다. 1이면 한 줄 자르기
gutter	boolean	false	아래 여백을 붙입니다. 기본이 꺼짐인 이유는 여백을 스스로 만드는 컴포넌트는 레이아웃이 싸워야 할 대상이기 때문입니다
render	useRender.RenderProp	—	타입 스케일은 그대로 두고 요소만 바꿉니다. Base UI의 render prop 그대로
children	ReactNode	—	텍스트
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="fade"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요

다른 컴포넌트와 두 가지가 다릅니다. 타입 스케일을 고르는 prop은 variant가 아니라 level입니다. variant는 라이브러리 전체에서 표면의 무게를 뜻하기 때문입니다. 그리고 color에 기본값이 없어서, 지정하지 않으면 주변 텍스트 색을 물려받습니다.

루트에는 neba-typography 클래스가 붙습니다. React 바깥의 stylesheet가 이 텍스트를 잡는 후크입니다. .neba-typography { text-wrap: balance }처럼 씁니다. level이 만들어 내는 유틸리티 클래스 이름은 약속된 API가 아닙니다.

예시

level

level은 타입 스케일과 렌더링할 요소를 함께 정합니다. body는 md 크기 Card의 본문과 같은 단계이므로, Card 안팎의 문단이 같은 크기로 보입니다. 제목 단계는 커질수록 행간 비율이 좁아집니다.

import { Typography } from 'neba';

const LEVELS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'lead', 'body', 'caption', 'overline'] as const;

export default function TypographyScale() {
  return (
    <div className="flex flex-col gap-3">
      {LEVELS.map((level) => (
        <div key={level} className="flex items-baseline gap-4">
          <code className="w-20 shrink-0 text-[0.6875rem] text-[var(--neba-muted-fg)]">
            {level}
          </code>
          <Typography level={level}>The quick brown fox</Typography>
        </div>
      ))}
    </div>
  );
}

color

import { Typography } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function TypographyColors() {
  return (
    <div className="flex flex-col gap-1.5">
      <Typography>No colour asked for — inherits the page.</Typography>
      {COLORS.map((color) => (
        <Typography key={color} color={color}>
          {color}
        </Typography>
      ))}
    </div>
  );
}

lines

lines={1}은 말줄임표를 붙여 한 줄로 자릅니다. 2 이상은 그 줄 수까지만 보이는 line clamp입니다.

import { Typography } from 'neba';

const COPY =
  'A Neba surface is a sheet of cut acrylic, not a moulded plastic key. Press is instant and release is slow, elevation is opt-in, and no control ever moves under the cursor.';

export default function TypographyClamp() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <div className="flex flex-col gap-1">
        <Typography level="overline">lines=1</Typography>
        <Typography lines={1}>{COPY}</Typography>
      </div>
      <div className="flex flex-col gap-1">
        <Typography level="overline">lines=2</Typography>
        <Typography lines={2}>{COPY}</Typography>
      </div>
      <div className="flex flex-col gap-1">
        <Typography level="overline">no clamp</Typography>
        <Typography>{COPY}</Typography>
      </div>
    </div>
  );
}

render

level이 정하는 요소와 실제로 필요한 요소가 다를 때 render로 요소만 바꿉니다. 문서 개요에 들어가면 안 되는 소제목, 또는 제목처럼 보여야 하는 <p>가 그런 경우입니다.

<Typography level="h3" render={<p />}>
  제목처럼 보이지만 제목은 아닙니다
</Typography>

gutter

gutter는 기본적으로 꺼져 있어 위아래 여백이 없습니다. 이어지는 산문에는 켜고, 간격을 이미 관리하는 flex 컨테이너 안에서는 끈 채로 두세요.

크기를 덮어쓸 때

각 level의 행간은 길이가 아니라 비율입니다. className으로 크기를 바꿔도 행간이 그 크기에 맞춰 따라옵니다.

<Typography level="h2" className="text-[2.75rem]!">
  42
</Typography>

!는 필수이고, weight와 글자색, gutter를 덮어쓸 때도 마찬가지입니다. 이 scale은 host 스타일시트를 이기려고 class 두 겹으로 씁니다. .prose h2와 VitePress의 .vp-doc h2가 태그 이름으로 font-size, line-height, letter-spacing, font-weight를 지정하는데 class 하나로는 그 특정도에 닿지 않고, 그대로 두면 Markdown 본문 안의 Neba heading이 자기 scale 대신 본문 typography를 뒤집어씁니다. 그 규칙보다 위이면서 맨 utility보다 아래인 특정도는 존재하지 않으므로 !가 들어갈 자리입니다. 비율 자체를 바꾸고 싶다면 옆에 leading-*을 붙이세요.

align과 lines는 일부러 맨 utility로 두었습니다. text-align이나 line clamp를 태그 이름으로 지정하는 host는 없어서 className이 ! 없이 닿습니다.