---
{"id":"typography","title":"타이포그래피·긴 문자열","category":"기초","order":12,"summary":"현재 글꼴을 유지하면서 한글, 수치, 식별자와 긴 내용을 읽기 쉽게 만듭니다.","status":"문서 기준 · UI 미검증","references":["elements/typography/overview","patterns/overflow-content/index"]}
---

# 타이포그래피·긴 문자열

## 현재 글꼴

확정 기준: TeamWicked 자체는 Geist + Pretendard를 유지하며, **WickedHost의 vPanel·Pterodactyl·Blesta UI는 Pretendard Variable을 공통 사용**합니다. 아래 제품 소스 기록은 통일 이전의 관측이며 새 디자인 기준을 덮어쓰지 않습니다.

메인 사이트는 현재 Geist + Pretendard를 사용합니다. 기존 메인 문서의 Noto Sans KR 설명과 달리 layout.tsx는 Pretendard를 주입하며 공개 화면의 CSS font-family도 이를 확인했습니다. VPS는 Pretendard Variable, Inter 순의 UI 스택입니다. Panel도 자체 호스팅 Pretendard Variable을 사용합니다. Blesta 토큰은 Geist/Noto Sans KR, 표시용 Playfair Display/Noto Serif KR, 코드용 IBM Plex Mono 계열을 구분합니다. 문서 뷰어는 실제 메인 폰트 파일을 자체 호스팅합니다.

## 기준

- TYPE-01 MUST: 제목은 시각 크기뿐 아니라 문서 계층 h1 → h2 → h3를 표현합니다. 제목처럼 보이는 굵은 div로만 구성하지 않습니다.
- TYPE-02 MUST: 서버 이름, UUID, 파일 경로, 공개 키를 번역하거나 의미 없이 대문자화하지 않습니다.
- TYPE-03 SHOULD: 긴 한글은 단어 단위를 우선하되 긴 식별자는 영역 밖으로 넘치지 않게 처리합니다.
- TYPE-04 MUST: 줄임표로 숨긴 중요 값은 키보드·터치에서도 전체 열람·복사가 가능해야 합니다. hover-only title에만 의존하지 않습니다.
- TYPE-05 SHOULD: 숫자 열은 단위와 소수점 기준을 맞추고 고정폭 숫자를 검토합니다.
- TYPE-06 MUST: 200% 확대와 사용자 텍스트 간격 변경에서 필수 내용·기능이 사라지지 않아야 합니다.

## Blesta 이행 전 스케일

--vx-text-xs .75rem, sm .875rem, base .9375rem, md 1.0625rem, lg 1.25rem, xl 1.5rem입니다. display는 유동 크기입니다. 이 값을 VPS/Panel 전체에 강제 적용하지 않습니다.

## 예시와 확인

좋음: 경로가 길면 읽기 영역 안에서 줄바꿈하고, 원문 복사 버튼을 별도로 제공합니다.

피함: 복사값에 줄임표를 넣거나 긴 UUID를 글자 축소만으로 맞추기.

확인: 한글 60자 서버명, 공백 없는 긴 경로, 영문/숫자 혼합, 모바일, 텍스트 확대, 글꼴 로딩 실패. 자세한 원칙은 [콘텐츠](content.md)를 함께 봅니다.