# Datatype - 텍스트를 차트로 변환하는 가변 폰트

> Clean Markdown view of GeekNews topic #29640. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=29640](https://news.hada.io/topic?id=29640)
- GeekNews Markdown: [https://news.hada.io/topic/29640.md](https://news.hada.io/topic/29640.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-05-19T09:31:02+09:00
- Updated: 2026-05-19T09:31:02+09:00
- Original source: [github.com/franktisellano](https://github.com/franktisellano/datatype)
- Points: 28
- Comments: 11

## Topic Body

- **"데이터를 타이포그래피로(data as type)"** 라는 컨셉으로, JS/이미지/렌더링 라이브러리 없이 **텍스트만으로 차트 표시**  
- **OpenType 합자 치환**을 활용해 `{b:30,70,50,90}` 같은 단순 텍스트 표현을 인라인 차트로 변환  
- **막대/라인/파이 3가지 차트 유형** 지원  
  - 막대 차트: {b:30,70,50,90,64,27,72,42} 콤마로 구분된 값(각 0–100), 최대 20개 막대  
  - 스파크라인: {l:10,50,30,80,20,15,48,72,37} 콤마로 구분된 값(각 0–100), 최대 20개 포인트  
  - 파이 차트: {p:69} {p:43} 0–100 사이의 단일 백분율 값  
- **폰트 크기**와 **두 개의 가변 축**으로 시각적 조정  
  - Width(wdth): 50–150, 간격 조절, 기본값 100  
  - Weight(wght): 100–900, 선 두께 조절, 기본값 400  
- 글자 사이에서도 렌더링 가능해서 본문 중간, 표 안, 로그 메시지 등 **텍스트가 들어가는 모든 곳**에 그대로 동작  
  - **테이블/대시보드/리포트** 등에도 쉽게 삽입 가능   
- 웹에서는 **3줄 CSS만으로 도입 가능**  
  - `@font-face`로 폰트 로드 → `font-family: 'Datatype'` 지정 → HTML에 `<span class="chart">{l:20,40,70}</span>` 작성  
  - `font-variation-settings`로 wdth 등 추가 조정 옵션 제공  
- 데스크톱: TTF 설치 후 OpenType 합자 지원 앱(Adobe 등)에서 사용 가능  
- **[Google Fonts](https://fonts.google.com/specimen/Datatype?preview.script=Latn)에서도 배포** 중이라 별도 호스팅 없이 사용 가능  
- **15개 Named 인스턴스** 제공 (표준 Weight 9개 + 커스텀 너비 조합 6개)  
  - Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900) 등 용도별 프리셋 포함  
- **글리프 수** 마스터당 10,850개, 총 9개 마스터 구성  
- **파일 크기**: TTF 4.0MB / WOFF2 78KB, 유니코드 커버리지는 Google Fonts Latin Core  
- **브라우저 지원**: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+  
- ## 동작 설명  
  - **OpenType 합자 치환(ligature substitution)** 기능을 활용함  
  - 원래 합자는 `fi`, `fl` 같은 글자 조합을 하나의 글리프로 치환하는 기능  
  - Datatype은 이를 응용해 `{b:30,70,50,90}` 같은 패턴 전체를 하나의 차트 글리프 {b:30,70,50,90} 로 치환  
  - 브라우저나 앱이 폰트 합자 기능만 지원하면 **자바스크립트 실행 없이 즉시 렌더링**  
- SIL Open Font License 1.1  
- [Specimen](https://franktisellano.github.io/datatype/) 사이트에서 실제 적용 사례 확인 가능

## Comments



### Comment 57773

- Author: winterjung
- Created: 2026-05-19T09:59:39+09:00
- Points: 10

{p:75} {l:40,10,10,40} {p:75}

### Comment 57792

- Author: shakespeares
- Created: 2026-05-19T11:29:07+09:00
- Points: 1
- Parent comment: 57773
- Depth: 1

{p:75} {l:40,10,10,40} {p:75}  
우와..

### Comment 57785

- Author: xguru
- Created: 2026-05-19T10:30:27+09:00
- Points: 1
- Parent comment: 57773
- Depth: 1

이런 활용법이?!

### Comment 57780

- Author: crawler
- Created: 2026-05-19T10:07:26+09:00
- Points: 1
- Parent comment: 57773
- Depth: 1

ㅋㅋㅋㅋㅋㅋㅋ

### Comment 57796

- Author: bichi
- Created: 2026-05-19T12:14:59+09:00
- Points: 1
- Parent comment: 57780
- Depth: 2

ㅋㅋㅋㅋㅋ

### Comment 57801

- Author: sigco
- Created: 2026-05-19T13:09:52+09:00
- Points: 1

{l:40,10,10,40} {p:75}

### Comment 57757

- Author: xguru
- Created: 2026-05-19T09:32:02+09:00
- Points: 2

긱뉴스에 잘 어울리는 거 같아서, 소개하면서 한번 베타 기능으로 도입해봤습니다. 크기가 작아서 직접 호스팅해도 부담이 없네요.   
`{b:30,70,90,64,27,42}` {b:30,70,90,64,27,42} 나 `{l:10,50,30,80,20}` {l:10,50,30,80,20} 처럼 입력하면 요 문자열만 캐치해서 폰트로 둘러쌉니다.  
백틱(`) 없이 문자열만 입력해야 합니다.

### Comment 57779

- Author: crawler
- Created: 2026-05-19T10:07:15+09:00
- Points: 1
- Parent comment: 57757
- Depth: 1

와 짱신기해요 ㅋㅋㅋㅋㅋ

### Comment 57764

- Author: xguru
- Created: 2026-05-19T09:43:18+09:00
- Points: 1
- Parent comment: 57757
- Depth: 1

긱뉴스는 이미지를 가능 하면 안쓰고 있어서, 이런 텍스트 기반 경량 솔루션이 나오면 가능하면 도입해보고 있습니다.  
[구글, 흑백 이모지 폰트 Noto Emoji 공개](https://news.hada.io/topic?id=6473) 도 적용된지 4년째인데 아직 잘 쓰고 있네요 😀😃😄😁😆😅😍🥰😘

### Comment 57790

- Author: kimjeongwonn
- Created: 2026-05-19T10:51:04+09:00
- Points: 1

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}

### Comment 57781

- Author: seoseonyu
- Created: 2026-05-19T10:09:14+09:00
- Points: 1

우와ㅋㅋ 신기하네요