타이포그래피
크기·행간·자간이 함께 정해진 글자 역할. 화면의 값은 빌드할 때 제품 코드에서 바로 읽었어요.
글꼴#
Pretendard Variable 하나만 써요. 굵기는 400·500·600·700·800 다섯 단계예요.
가Aa1
400
가Aa1
500
가Aa1
600
가Aa1
700
가Aa1
800
글자 역할#
역할 하나가 크기·행간·자간을 함께 정해요. 폰에서는 읽기 좋게 한두 단계 커져요(창 폭을 줄여 보세요).
히어로 · PC clamp(32px,4.5vw,46px) · 폰 clamp(32px,4.5vw,46px)
랜딩·인사이트 히어로 제목(h1/h2)
실거래로 읽는 우리 동네 아파트
연출 XL · PC clamp(54px,9vw,104px) · 폰 clamp(54px,9vw,104px)
랜딩 초대형 카운터 - 앱 화면 금지
1,090만
연출 L · PC clamp(44px,6vw,66px) · 폰 clamp(44px,6vw,66px)
랜딩 큰 통계 - 앱 화면 금지
1,090만
연출 · PC clamp(36px,4vw,44px) · 폰 clamp(36px,4vw,44px)
랜딩 통계 숫자 - 앱 화면 금지
1,090만
값 2XL · PC 40px · 폰 34px
랜딩 통계(PC가 더 큼)
45,000
값 XL · PC 30px · 폰 32px
단지·지수 상세 대표가
15억 7,000만
디스플레이 · PC 30px · 폰 28px
큰 숫자(단지·지수 상세 히어로 값)
15억 7,000만
타이틀 L · PC 22px · 폰 20px
페이지·섹션 큰 제목
실거래로 읽는 우리 동네 아파트
값 L · PC 18px · 폰 19px
강조 수치(tnum)
+12.7%
헤드라인 · PC 17px · 폰 18px
카드·섹션 제목
실거래로 읽는 우리 동네 아파트
타이틀 · PC 15px · 폰 17px
소제목·위젯 제목
실거래로 읽는 우리 동네 아파트
본문 L · PC 15px · 폰 17px
설명 문단(편안)
실거래로 읽는 우리 동네 아파트
값 · PC 15px · 폰 16px
표·카드 수치(tnum)
1,184세대
본문 · PC 14px · 폰 16px
기본 문단
실거래로 읽는 우리 동네 아파트
값 S · PC 13px · 폰 14.5px
보조 수치·표 셀(tnum)
38건
라벨 · PC 13px · 폰 14.5px
버튼·칩·탭·항목 이름
실거래로 읽는 우리 동네 아파트
캡션 · PC 12.5px · 폰 14px
보조 설명·메타
실거래로 읽는 우리 동네 아파트
라벨 S · PC 12px · 폰 13.5px
좁은 자리 조작 하한
실거래로 읽는 우리 동네 아파트
아이브로 · PC 12px · 폰 13px
섹션 위 작은 머리말
실거래로 읽는 우리 동네 아파트
마이크로 · PC 11px · 폰 12.5px
배지·태그·각주 하한
실거래로 읽는 우리 동네 아파트
플랫폼별 값#
같은 역할 이름을 플랫폼마다 다른 크기로 그려요. 폰은 767px 이하, 차량은 Pleos 글자 단계에 맞췄어요.
| 역할 | 모바일 | PC | Pleos개발 중 |
|---|---|---|---|
| t-display | 28px | 30px | 48dp |
| t-title-lg | 20px | 22px | 40dp |
| t-headline | 18px | 17px | 32dp |
| t-title | 17px | 15px | 30dp |
| t-body-lg | 17px | 15px | 30dp |
| t-body | 16px | 14px | 28dp |
| t-val-xl | 32px | 30px | 56dp |
| t-val-lg | 19px | 18px | 36dp |
| t-val | 16px | 15px | 30dp |
| t-val-sm | 14.5px | 13px | 28dp |
| t-label | 14.5px | 13px | 26dp |
| t-cap | 14px | 12.5px | 24dp |
| t-label-sm | 13.5px | 12px | 24dp |
| t-micro | 12.5px | 11px | 24dp |
Pleos 값은 차량 앱 공개 저장소(reevl-for-pleos)의 테마 코드에서 옮겼어요. 차량 앱은 개발 중이에요.
강조 - 숫자 · 링크#
본문은 굵게와 형광펜을 쓰지 않아요. 숫자만 굵게(600, 고정폭)로 쓰고, 링크는 회색 밑줄이에요.
전국 45,833개 단지를 매일 갱신해요.
자세한 값은 색 문서에 있어요.
- 글자색은 제목 ink · 본문 sub · 메타 dim 세 단계이고, 한 문장은 한 색이에요.
- 숫자(op-num)만 같은 색에서 굵기 600 · 고정폭으로 올려요.
- 링크(op-link)는 둘레 글자색에 회색 밑줄이고, 한 구획에 하나까지예요.
- 브랜드 색은 버튼 · CTA · 지금 위치 표시에만 써요.