타이틀 서체 섞어짜기

출처·통합 메모 (Q30): 이 문서는 design PR #28 의 docs/landing-title-typography.md 에서 최신 main 으로 통합했습니다. 색/팔레트 변경이 없고 현재 canon 과 상충하지 않아 그대로 가져왔습니다. 파일명의 landing 은 적용 범위 제한이 아니며 모든 환경의 타이틀 서체 사용에 적용됩니다. Figma·제품·템플릿 전수 반영은 미확인(부모가 외부 PR·Figma 처리).

모든 환경에서 Tiro 타이틀 서체를 사용하는 한글·일본어 제목 안에 들어가는 영문은 Reckless로 조판하고, 주변 글자와 크기·획·폭·기준선을 맞춘다. 제목 전체를 같은 서체로 바꾸지 않는다.

• 관리: Heizel / brand_system. 기록일: 2026-09-16.
• 이 문서는 모든 환경에서 필수인 타이틀 서체·광학 보정 계약이다. 웹·앱·Figma·이메일의 브랜드 타이틀·마케팅 이미지·슬라이드·인쇄물·영상 등에서 해당 타이틀 서체를 쓰면 반드시 적용한다. 본문·버튼·내비 등 기존 UI 역할과 별도 wordmark는 각자의 계약을 유지한다.
• 규칙의 의무화와 실제 반영 상태는 구분한다. 기존 랜딩 구현은 확인했으며 Figma·공통 컴포넌트·각 제품·템플릿의 전수 반영은 미확인이다.
• 온톨로지: 적용 범위·판단 기준은 tiro-ontology design/guides/landing-title-typography.md (ontology PR #995 검토 중). 부모가 처리.

역할을 먼저 고른다

영문 단독 제목에는 역할별 차이가 있다. 현재 fonts.css의 large는 wght 500 / CNTR 10 / wdth 106 / tracking −0.024em, small은 400 / 10 / 120 / −0.016em이다. 모든 영문 제목을 large 값으로 통일하거나, 이 값을 한·일 제목 안 영문에 복사하지 않는다. 별도 wordmark 역할도 이 혼식 규칙의 대상이 아니다.

혼식 영문 설정

아래 값은 한글·일본어 타이틀 안 라틴 run에 필수 적용한다. 웹에서는 DisplayText의 라틴 span이 기존 구현 사례이며 다른 도구에서도 같은 비율·가변 축·기준선을 재현한다. 부모 제목의 크기·굵기·행간을 덮어쓰지 않는다. 혼식의 small/large 폭 예외는 최종 확정에서 통일됐다.

기준선과 접경 여백의 em은 부모 기준이다. 자식이 이미 확대됐으므로 CSS에서 나눗셈을 생략하면 의도보다 더 많이 이동한다. 부모 40px에서는 영문 47.2px, 아래 이동 1.4px, 해당 일본어 접경 여백 3.2px다. 접경 여백은 한글, 원래 공백이 있는 곳, 문장부호 앞뒤에 추가하지 않는다.

적용 예시와 경계

기존 랜딩 컴포넌트 app/i18n/DisplayText.tsx를 디스플레이 제목 안에서 명시적으로 사용한다. 아래는 그 프로젝트에서의 사용 예이며 디자인 레포가 컴포넌트를 배포한다는 뜻은 아니다.

<h1><DisplayText locale="ko">AI와 함께 기록하는 회의</DisplayText></h1>
<h2><DisplayText locale="ja">AI議事録でチームをつなぐ</DisplayText></h2>

• AI와 함께 기록하는 회의: AI만 Reckless, 나머지 Hahmlet.
• AI議事録: AI만 Reckless, 뒤의 일본어 글자와 직접 맞닿는 곳에 접경 여백.
• Claude Code, SOC 2, AI-native, Otter.ai, tl;dv: 각각 한 라틴 run으로 유지. SOC 2의 숫자는 라틴 이름에 포함된다.
• 2026년, 24시간, 숫자만 있는 가격: 이 함수는 숫자만인 부분을 바꾸지 않는다. 숫자 폰트 비교 모드와 혼식은 별도 계약이다.
• locale="en": 혼식 래퍼를 추가하지 않는다.

현재 분리기는 ASCII 영문자로 시작하는 run을 인식하며 숫자와 ./&+;:-, 라틴 단어 사이 공백을 함께 유지한다. 악센트 문자·아포스트로피·괄호까지 모든 브랜드명을 온전히 인식하는 범용 언어 분석기는 아니다. 그런 카피나 여러 줄 문자열은 실제 분리 결과를 확인한다. 긴 복합 이름은 nowrap 때문에 좁은 화면에서 넘칠 수 있다.

결정 과정과 적용 상태

9월 11일 기록에는 중간 실험값과 최종 확정값이 함께 있다. 앞부분의 1.20배 / 475나 크기별 폭 예외를 현재 값으로 되살리지 않는다. 같은 기록의 혼식 조판 최종 확정과 현재 구현이 일치하는 위 표를 따른다. 일본어 후보 비교와 Kozuka 선택도 구분한다.

광학 보정의 의도는 영문이 주변 한·일 글자와 자연스럽게 이어지도록 보이는 크기·획·폭·높이를 조절하는 것이다. 새로운 서체 비교 시안은 Heizel의 명시적인 변경 결정이 생기기 전까지 이 공통 타이틀 계약을 대체하지 않는다.

변경·검수 방법

1. 온톨로지에서 적용 역할을 정하고, 이 문서에서 수치를 읽는다.
2. 한·일 제목의 동일 카피를 큰 제목·작은 제목·좁은 화면에서 비교한다. 원문 문자열과 언어별 줄바꿈이 보존되는지 확인한다.
3. 실제 로드된 서체와 computed style을 확인한다. 폰트 이름 선언만으로 로딩 완료를 판정하지 않는다. 일본어 웹폰트 로딩 전후도 확인한다.
4. 영문 이름이 하나로 유지되는지, 일본어 직접 접경에만 여백이 생기는지, 단독 숫자·본문·버튼·영문 단독 제목이 영향을 받지 않는지 확인한다.
5. 변경 시 날짜·이유·Heizel 결정 근거·적용 범위를 기록한다. 이 문서와 실제 소비 코드, 온톨로지의 개념·출처를 함께 갱신한다. Figma·코드 반영·배포 확인 상태를 각각 기록한다.

모든 환경의 적용·완료 조건

• 타이틀 역할을 선택하면 해당 언어의 서체와 광학 보정을 한 묶음으로 적용한다. DisplayText를 명시적으로 호출하는 구현 방식은 디자인 규칙을 선택 사항으로 만들지 않는다.
• Figma·슬라이드·인쇄·영상에서는 부모 크기 대비 비율로 크기와 기준선을 환산하고 실제 출력물을 대조한다. 도구가 가변 축이나 기준선 이동을 지원하지 않으면 검증된 제작 도구에서 조판한 벡터/이미지를 사용한다. 웹·앱 텍스트를 이미지로 바꾸는 일반 해법으로 확대하지 않으며 접근성·검색·현지화를 유지하는 구현을 우선한다.
• 서체 이름만 지정하고 크기·획·폭·자간·기준선·일본어 접경 처리를 생략하면 완료로 보지 않는다. 영문 단독 제목은 large/small 역할별 설정을 사용하며 혼식용 확대를 적용하지 않는다.
• 이 문서는 규범과 검수 기준을 확정한다. 모든 소비처에 자동 적용하는 런타임이나 Figma 스타일 배포가 완료됐다는 뜻은 아니다.