Typeset

사용 시기

페이지의 텍스트가 설계된 타이포그래피가 아닌 기본 타이포그래피처럼 보일 때 /impeccable typeset을 사용하세요. 흐릿한 계층, 같아 보이는 세 가지 크기, 14px 본문, 사실 그냥 Inter bold인 디스플레이 폰트, 커닝 신경 안 쓴 헤드라인.

일반적인 트리거: “계층이 평면적으로 느껴져요”, “가독성이 이상해요”, “폰트가 평범해 보여요”.

작동 방식

스킬은 5가지 차원에서 타이포그래피를 평가합니다:

1. 폰트 선택: 보이지 않는 기본값(Inter, Roboto, Arial, Open Sans)을 사용 중인지, 서체가 브랜드에 맞는지, 2~3개 패밀리를 넘는지.
2. 계층: 제목, 본문, 캡션이 한눈에 명확히 다른지, 단계 간 크기 대비가 최소 1.25배인지, 무게 대비가 읽기 좋은지.
3. 크기와 스케일: 일관된 타입 스케일이 있는지, 본문 텍스트가 16px 최솟값을 충족하는지, 앱 UI는 고정 rem, 마케팅 페이지는 유동 clamp 스케일인지.
4. 가독성: 행 길이 45~75자, 폰트와 문맥에 맞춘 행간, 대비.
5. 일관성: 같은 요소가 어디서나 같은 처리를 받는지, 일회성 font-size 오버라이드가 없는지.

그다음 발견한 것을 수정합니다: 독특한 서체 선택, 모듈러 스케일 구축, 계층 대비 확대, 적절한 행 길이와 행간 설정.

직접 해보기

/impeccable typeset the article layout

예상 diff:

• 디스플레이 폰트를 Inter 700에서 진짜 디스플레이 서체로 교체
• 타입 스케일 재구축: 3rem / 2rem / 1.25rem / 1rem / 0.875rem, 비율 1.333
• 본문 텍스트 14px에서 16px로 증가
• 기사 컬럼 행 길이 68ch로 제한
• 행간: 본문 1.6, 디스플레이 1.1
• 컴포넌트 스타일에 흩어져 있던 일회성 font-size 값 4개 제거

주의 사항

• 문맥 없이 새 폰트 요청하기. Typeset은 PRODUCT.md 브랜드 보이스를 기반으로 선택합니다. /impeccable teach를 실행하지 않았다면 제안이 일반적일 것입니다.
• 문제가 레이아웃일 때 typeset 찾기. 단락은 괜찮은데 페이지가 답답해 보인다면 /impeccable layout이 필요합니다.
• 앱 UI에서 유동 clamp 스케일 기대하기. Typeset은 앱 인터페이스에 고정 rem 스케일을 사용합니다. 유동 타이포그래피는 행 길이가 극적으로 변하는 마케팅 및 콘텐츠 페이지용입니다.