Tokens
Typography Tokens는 폰트 크기, 줄 간격, 자간, 폰트 weight 등 텍스트 스타일을 구성하는 기초 속성값들을 정의합니다.
이 값들은 디자인 시스템 전반에 걸쳐 재사용 가능한 기준 단위로 활용되며, 일관된 타이포그래피 표현을 위한 기반이 됩니다.
중앙행정기관 사이트에서는 기본 글꼴로 국문과 영문 모두 Pretendard GOV를 사용합니다. (🔗 Pretendard GOV)
Font Family
| Token | Value | Preview |
|---|
Font-Family 순서
- 웹폰트 우선 (ex: Pretendard, Noto Sans KR)
- 시스템 폰트 순 (ex: Apple SD Gothic Neo, Malgun Gothic, Segoe UI, Helvetica Neue, Roboto)
- OS 최적화 폰트 (ex: -apple-system, BlinkMacSystemFont, system-ui)
- 이모지 처리용 폰트 (ex: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)
- 최종 fallback sans-serif
Font Size
| Token | Value | Preview |
|---|---|---|
--bbc-font-size-10 |
10px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-12 |
12px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-14 |
14px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-16 |
16px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-18 |
18px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-20 |
20px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-22 |
22px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-26 |
26px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-32 |
32px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-40 |
40px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-42 |
42px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-50 |
50px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-52 |
52px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-size-64 |
64px | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
Font Weight
| Token | Value | Preview |
|---|---|---|
--bbc-font-weight-400 |
400 | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-weight-500 |
500 | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-weight-600 |
600 | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
--bbc-font-weight-700 |
700 | 교육을 연결하는 에듀테크 플랫폼, 버블콘 |
Line Height
| Token | Value | Preview |
|---|---|---|
--bbc-line-height
|
1.5 | 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. |