HD현대
자사 서체가 국문 히어로 한 줄을 맡고, 흰 지면이 딥 페트롤로 넘어가면서 그 한 줄이 54px에서 33px로 잠긴다.
HD현대 사이트는 흰 지면에서 시작해 홈 5,556px 지점부터 #031820 딥 페트롤 지면으로 넘어가는 2단 구성입니다. 국문 최대 제목은 홈 히어로 53.9px이고, 이 한 줄만 자사 서체 HDfont(HDHyundaiOTF-Bold.woff)가 그리며 나머지 제목·본문·UI는 전부 Pretendard 4단이 맡습니다. 자간을 좁히지 않는 것이 특징이라 국문 대형 조판에서 −2~−5%를 쓰는 다른 코퍼레이트 사이트와 비교 대상으로 쓰기 좋고, 히어로 제목이 스크롤에 잠겨 53.9px에서 32.9px로 줄어드는 전환이 실측으로 남아 있습니다. 계열사가 많은 대기업 코퍼레이트 사이트의 GNB·푸터·투자정보 골격을 참고할 때 유효합니다.
https://www.hd.com/kr/mainColor Palette
Primary
Label
Line
Background
Static
Accent
Typography
HDfont-Bold (HDHyundaiOTF-Bold.woff) · 400display (국문 히어로 전용)
Pretendard · 400heading·body·ui, 한글 98.2%
Inter ExtraBold (inter-EB) · 400display (영문 배경 워드)
Inter Tight · 400영문 사이트(/en/) 전용
Type Scalepx은 layout
display-latin149.8px · 400 · 1
Handgloves 123
hero53.9px · 400 · 1.3
Handgloves 123
page-title47.9px · 400 · 1.3
다람쥐 헌 쳇바퀴
h241.9px · 400 · 1.3
Handgloves 123
section-title33px · 400 · 1.4
다람쥐 헌 쳇바퀴
sub-title27px · 400 · 1.4
다람쥐 헌 쳇바퀴
lead21px · 400 · 1.5
다람쥐 헌 쳇바퀴
nav15px · 400 · 1.1
다람쥐 헌 쳇바퀴
body13.5px · 400 · 1.6
다람쥐 헌 쳇바퀴
link-sm12px · 400 · 1.6
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 13,662글리프(94.8%) · Pretendard ExtraBold 492(3.4%) · HDfont-Bold 258(1.8%, CDP는 'OTS derived font'로 보고) |
| hangulWeights | CSS font-weight는 전 구간 400 단일. 굵기는 패밀리 이름이 나른다 — 본문 Pretendard-Regular, 링크·카드 제목 Pretendard-Bold, 페이지 타이틀·섹션 제목 Pretendard-ExtraBold, 히어로 HDfont-Bold |
| body | 13.5px lh1.60 자간 0 Pretendard Regular (1440) / 18.0px (1920). layout.json bodyPx는 12~15px |
| sub | 정책 페이지 리드문 18.0px Pretendard ExtraBold lh1.50 (1440), 카드 그룹 라벨 21.0px Pretendard Bold lh1.50 |
| label | GNB 15.0px Pretendard Bold lh1.10 자간 0 · 목록 링크 12.0px Pretendard Bold lh1.60 자간 −0.319488px(−2.0%) · 해시태그 칩 9.0px |
| mixing | 국문 지면에 라틴 전용 서체를 따로 두지 않는다 — 국문 8페이지의 라틴 5,258글리프를 Pretendard가 그대로 그리고, 예외는 149.8px 배경 워드의 Inter ExtraBold 78글리프뿐이다. Inter Tight 12,941글리프는 전부 영문 사이트 en-main에서 나온 값이라 국문 조판 근거가 아니다. HDfont 문장 안의 공백만 Apple SD Gothic Neo(36글리프)로 떨어진다 |
| hangulHeadings | 있다. 홈 히어로 h2 53.9px/HDfont-Bold/lh1.30/자간 0(1920 71.9px)이 국문 최대이고, 사업 소개 슬라이드 41.9px HDfont-Bold, 서브 페이지 타이틀 47.9px Pretendard-ExtraBold, 홈 섹션 제목 33.0px Pretendard-ExtraBold가 이어진다. 지면 최대 글자 149.8px은 영문(Inter ExtraBold)이라 국문 근거가 아니다 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 유효하다. 특히 53.9px~33.0px 전 구간 자간 0이라 −2~−5%를 쓰는 다른 코퍼레이트 사이트의 반례로 인용할 수 있다. 다만 국문 대형이 자사 서체 HDfont로 그려지는 곳은 히어로·슬라이드·ESG 항목 258글리프뿐이고 나머지는 Pretendard ExtraBold다 |
| rendered | Pretendard ×13662 · Pretendard ExtraBold ×492 · OTS derived font ×258 |
영문 · Latin영문 전용
| latinFont | Inter Tight 13,185글리프(66.5%) · Pretendard 5,890글리프(29.7%) · OTS derived font 545글리프(2.7%) · Inter 78글리프(0.4%) |
| latinWeights | 실측 페이스 ExtraBold · SemiBold · Medium |
| share | 라틴 19,827글리프 / 한글 14,412글리프 — 지면의 57.9%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다 |
| mixing | 국영문 혼용 노드 376개(전체 1,119개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Inter Tight 영문 전용(66.5%) |
| verdict | 영문 전용 서체가 있다 — Inter Tight 라틴 66.5% / 한글 0.0%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · OTS derived font |
| rendered | Inter Tight ×12941 · Pretendard ×5627 · OTS derived font ×545 · Pretendard ExtraBold ×182 · Inter Tight SemiBold ×166 · Pretendard Medium ×81 · Inter Tight ExtraBold ×78 · Inter ExtraBold ×78 · Times New Roman ×53 · Apple Color Emoji ×39 · Apple SD Gothic Neo ×37 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 커스텀 | |
| Max width | 1052px | |
| Section gap | 홈 섹션 padding은 0이 기본이고, 인재채용 CTA 섹션만 padTop 300 / padBottom 225, 투자정보·이미지 라이브러리가 padTop 150(1440). 미디어허브 상단 띠는 상하 45 | |
| Header | 75px fixed | |
| Grid Cards | 소셜·뉴스 4열 298×267 gap 12 · 이미지 라이브러리 4열 253×253 · 미디어허브 상단 7열 294×490 gap 20 · 지속가능성 3개 689×300 (전부 1440) | |
| Card Padding | 정책 페이지 리스트 행 874×19 (23행·9행) | |
| Button Padding | 아웃라인 알약 19.968 62.899 19.968 29.952 · SNS/감사보고서 18.970 26.957 · 해시태그 칩 4.992 14.976 · select 0 39.936 0 13.9776 (전부 1920) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 1.9968px | 10회 · SNS·감사보고서 버튼 |
| standard | 3.9936px | 553회 · 표준 라운드 — 카드·솔리드 버튼·링크 블록(a/div) |
| form | 4px | 24회 · select·input — rem이 아니라 고정 4px |
| medium | 9.984px | 9회 · 그룹 박스 |
| card | 11.9808px | 113회 · 카드·리스트 아이템(div/li) |
| chip | 19.968px | 69회 · 해시태그 칩·태그 링크 |
| large | 23.9616px | 40회 · 큰 카드(div/a) |
| xl | 27.9552px | 3회 · '더보기' 버튼 |
| image | 39.936px | 12회 · 이미지 블록 |
| circle | 50% | 19회 · 아이콘 버튼 |
| pill | 80px / 99.84px / 997.402px | 22회 · 아웃라인 알약 CTA '자세히 보기'(99.84) · 페이지네이션 '0 / 0'(80) |
Guidelines
Do
- 국문 대형 제목의 자간을 0으로 둔다 — 53.9px 히어로부터 33.0px 섹션 제목까지 전부 letter-spacing normal이고, 자간을 붙인 단은 16px 링크(−2.0%)와 14px 텍스트(−2.0%) 둘뿐이다
- 자사 서체는 최상단 한 줄에만 쓴다 — HDfont는 한글 258글리프(1.8%)로 히어로 53.9px·슬라이드 41.9px·ESG 27.0px에만 나오고 나머지 14,154글리프는 Pretendard가 받는다
- 지면 전환으로 장을 나눈다 — 홈은 흰 지면 5,556px(히어로·사업 소개) 뒤 딥 페트롤 #031820 9,537px(일하는 방식·지속가능성·미디어·투자정보)로 넘어가고, 서브 8곳은 흰 지면 단일이다
- 면은 그림자가 아니라 1px 선으로 나눈다 — 외부 그림자 6회(rgba(0,0,0,.08) 0 1px 4px ×4 · 0 2px 2px ×2)에 그라디언트 0개, 보더는 1px solid #E4E4E4가 155회로 최다
- 라운드는 3.9936px을 표준으로 두고(553회) 카드 11.9808px(113회) · 칩 19.968px(69회) · 알약 99.84px(18회)만 예외로 올린다
- 콘텐츠 폭을 두 가지로만 운영한다 — 홈 1,052px, 서브 페이지 8곳 전부 872px(개인정보처리방침에서 후보 872가 93회로 압도적)
- 채도색은 면으로만 쓴다 — #002554는 SNS 버튼 배경 20회, 계열사 그린·블루는 배너 지면, #00E600은 링크 호버에만 나오고 기본 텍스트 색으로는 쓰지 않는다
Don't
- 다크 지면 위에 #000000 텍스트를 얹지 않는다 — #000 on #031820이 1.16:1로 89쌍, #000 on #002554가 1.39:1로 19쌍 잡혀 있다 (사이트 wcag 21쌍 중 AA 미달 4종)
- #007AFF를 브랜드 색으로 재현하지 않는다 — swiper-button-prev/next 4회로 Swiper 기본 스타일 잔재이고 #f1f8f4 위 3.72:1로 AA 미달이다
- 가장 큰 글자를 국문으로 두지 않는다는 뜻이 아니라, 이 사이트의 149.8px은 국문이 아니다 — 영문 롤링 워드(Inter ExtraBold)이고 국문 최대는 53.9px이다. 149.8px을 국문 히어로 근거로 인용하지 말 것
- font-weight로 굵기를 조절하지 않는다 — 31개 스타일 전부 400이고 굵기는 패밀리 이름(Pretendard-Regular/Medium/Bold/ExtraBold · HDfont-Bold)이 나른다. weight 700을 쓰면 폴백 합성 볼드가 나온다
- HDfont로 긴 국문 본문을 조판하지 않는다 — 공백 글리프가 없어 어절 사이가 Apple SD Gothic Neo(OS)로 떨어지고('IR 센터' = OTS derived font×4 + Apple SD Gothic Neo×1), 로드되는 웨이트가 Bold 한 단뿐이다
- 커스텀 이징을 기대하지 않는다 — CSS 이징은 ease 479회 단일이고 duration은 0.7s×330 · 0.3s×54 · 0.2s×45 · 0.6s×40 · 0.8s×10이다
- en-main(영문 사이트)의 Inter Tight를 국문 지면의 라틴 서체로 인용하지 않는다 — 라틴 12,941글리프가 전부 /en/ 한 페이지에서 나오고 국문 8페이지에는 0글리프다
