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

• 막대 차트: {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

• 테이블/대시보드/리포트 등에도 쉽게 삽입 가능

• @font-face로 폰트 로드 → font-family: 'Datatype' 지정 → HTML에 <span class="chart">{l:20,40,70}</span> 작성
• font-variation-settings로 wdth 등 추가 조정 옵션 제공

• Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900) 등 용도별 프리셋 포함

동작 설명

• OpenType 합자 치환(ligature substitution) 기능을 활용함
• 원래 합자는 fi, fl 같은 글자 조합을 하나의 글리프로 치환하는 기능
• Datatype은 이를 응용해 {b:30,70,50,90} 같은 패턴 전체를 하나의 차트 글리프 {b:30,70,50,90} 로 치환
• 브라우저나 앱이 폰트 합자 기능만 지원하면 자바스크립트 실행 없이 즉시 렌더링