Hierarchy
각 스타일은 Tokens 값을 조합하여 구성되며, 디자인 및 콘텐츠 구조에 맞는 시각적 우선순위를 제공합니다.
- 다양한 크기의 텍스트를 일관되게 사용할 수 있도록 스타일에 따라 구분하여 정의한다.
- 반응형에 대응하기 위하여 폰트 규격은 개발 시 코드상에서는 rem 값을 사용한다.
| 시스템 기본 폰트 크기 | rem | % | px |
|---|---|---|---|
| 16px 기준 | 1rem | 100% | 16px |
| 62.5% | 10px | ||
| 50% | 8px |
Responsive Mode
타이포그래피는 프로젝트의 특성과 사용자 환경에 따라 아래 3가지 모드 중 하나를 기본 모드(Base Mode)로 설정하여 사용합니다.
필요하다면, 개별 텍스트 스타일별로 별도 지정하여 유연하게 대응할 수 있습니다.
| 설명 | 권장 사용처 | 예시 | |
|---|---|---|---|
| Fixed |
디자인 시안 기준의 고정값(px) 디바이스나 해상도에 관계없이 항상 동일한 크기로 표시됩니다. |
브랜드 타이틀, 로고 옆 텍스트 등 정밀도가 중요한 정적 요소에 사용 |
20px |
| Fluid |
브라우저 너비에 따라 부드럽게 변하는 비율형(rem) 뷰포트 너비에 따라 폰트 크기가 비율적으로 유동하며 자연스럽게 변화합니다. |
앱형 UI, 대시보드, 전체 레이아웃에 유연한 흐름이 필요한 콘텐츠 영역 |
clamp(14px, 1.2vw, 16px)
|
| Scalable |
디바이스 구간별로 폰트 크기를 단계적으로 조정(rem) 브레이크포인트별로 단계적으로 폰트 크기를 조정하는 방식입니다. 각 기기별 최적 크기 제공 가능 |
콘텐츠 중심 서비스형 웹 정보 밀도가 높은 화면 구성에 적합 |
|
Hierarchy
| Group | Name | PC Size | Mobile Size | Font weight | Line-height | Usage |
|---|---|---|---|---|---|---|
| Display | d1 | 58px | 36px | 700 | 150% | 화면에서 가장 큰 크기의 텍스트로, 주로 메인배너에 사용합니다. |
| d2 | 46px | 32px | 700, 500 | 150% | ||
| d3 | 26px | 22px | 700 | 150% | ||
| Heading | h1 | 32px | 26px | 700 | 150% | 페이지의 주요 제목에 사용되며, 섹션을 구분하는 데 사용합니다. |
| h2 | 30px | 24px | 700 | 150% | ||
| Title | t1 | 36px | 24px | 700 | 150% | 템플릿·모듈 단위의 제목에 적합합니다. |
| t2 | 30px | 22px | 700 | 150% | ||
| t3 | 22px | 18px | 700 | 150% | ||
| t4 | 20px | 18px | 600 | 150% | ||
| Subtitle | st1 | 18px | 18px | 600 | 150% | 소제목이나 보조 제목으로 사용합니다. |
| st2 | 16px | 16px | 600, 500 | 150% | ||
| Body | b1 | 20px | 18px | 700, 400 | 150% | 일반 본문 텍스트에 사용합니다. |
| b2 | 18px | 16px | 600, 400 | 150% | ||
| b3 | 16px | 16px | 700, 600, 500, 400 | 150% | ||
| b4 | 14px | 14px | 700, 500, 400 | 150% | ||
| Button | btn1 | 26px | 18px | 700, 500 | 150% | 버튼 컴포넌트에 사용합니다. |
| btn2 | 18px | 18px | 700, 500 | 150% | ||
| btn3 | 16px | 16px | 600, 500 | 150% | ||
| btn4 | 14px | 14px | 700, 500 | 150% | ||
| Label | l1 | 16px | 14px | 700, 500, 400 | 150% | 입력,칩 등 컴포넌트 라벨에 사용합니다. |
| l2 | 14px | 14px | 700, 600, 500 | 150% | ||
| l3 | 13px | 13px | 500, 400 | 150% | ||
| l4 | 12px | 12px | 700, 400 | 150% | ||
| Dt | dt1 | 28px | 28px | 600, 400 | 150% | 데이터 수치에 사용합니다. |
| dt2 | 20px | 20px | 400 | 150% | ||
| dt3 | 18px | 18px | 400 | 150% | ||
| dt4 | 16px | 16px | 500, 400 | 150% | ||
| dt5 | 14px | 14px | 500, 400 | 150% | ||
| dt6 | 12px | 12px | 400 | 150% | ||
| Pop | pop1 | 46px | 26px | 700, 600, 400 | 150% |
| Group | Name | Sample |
|---|---|---|
| Display | d1 |
700
버블콘 |
| d2 |
700
버블콘 500
버블콘 |
|
| d3 |
700
버블콘 |
|
| Heading | h1 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
| h2 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| Title | t1 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
| t2 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| t3 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| t4 |
600
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| Subtitle | st1 |
600
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
| st2 |
600
교육을 연결하는 에듀테크 플랫폼, 버블콘 500
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| Body | b1 |
700
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 400
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. |
| b2 |
600
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 400
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. |
|
| b3 |
700
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 600
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 500
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 400
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. |
|
| b4 |
700
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 500
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 400
버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. 버블콘은 새로운 학습 패러다임 변화에 맞춘 IT기술과 글로벌 표준을 통한 학습 서비스를 제시하고 실현해 가고 있습니다. |
|
| Button | btn1 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 500
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
| btn2 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 500
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| btn3 |
600
교육을 연결하는 에듀테크 플랫폼, 버블콘 500
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| btn4 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 500
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| Label | l1 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 500
교육을 연결하는 에듀테크 플랫폼, 버블콘 400
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
| l2 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 600
교육을 연결하는 에듀테크 플랫폼, 버블콘 500
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| l3 |
500
교육을 연결하는 에듀테크 플랫폼, 버블콘 400
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| l4 |
700
교육을 연결하는 에듀테크 플랫폼, 버블콘 400
교육을 연결하는 에듀테크 플랫폼, 버블콘 |
|
| Dt | dt1 |
600
2,465 400
2,465 |
| dt2 |
400
2,465 |
|
| dt3 |
400
2,465 |
|
| dt4 |
500
2,465 400
2,465 |
|
| dt5 |
500
2,465 400
2,465 |
|
| dt6 |
400
2,465 |
|
| Pop | pop1 |
700
600
400
|