한화

국문 대형 제목을 굵기 300 한 겹으로만 세우고, 커질수록 자간을 −1%에서 −4%까지 단계로 좁힌다.

한화그룹 사이트는 국문 대형 제목을 아주 얇게 세우는 곳입니다. 홈 히어로가 화면을 꽉 채우는 영상 위에 54px 굵기 300 국문 한 줄을 얹고, 사이트가 사실상 굵기 300 하나로만 굴러갑니다(한글 3,765글리프 중 85%가 300). 글자가 커질수록 자간을 −1%에서 −4%까지 단계적으로 좁히는 규칙이 뚜렷해, 얇은 국문 대형 조판이 필요할 때 자간·행간을 그대로 옮겨볼 만합니다. 다만 확보한 페이지가 사실상 홈과 문의 페이지 둘뿐이라 사이트 전체 규칙으로 일반화하기는 어렵습니다.

https://www.hanwha.co.kr

Color Palette

Label

Line

Background

Accent

Typography

Hanwha (OTS derived font) · 300 / 400 / 500display·heading·body·ui — 한글 100%

canada-type-gibson · 300라틴 소수 (선언만 되고 거의 안 쓰인다)

Helvetica · 400라틴 폴백

Type Scalesize는 1440 기준이고 괄호 안이 raw 1920 실측이다

display54px · 300 · 1.35

Handgloves 123

h148px · 300 · 1.35

Handgloves 123

h239px · 300 · 1.4

Handgloves 123

statement30px · 300 · 1.45

Handgloves 123

h324px · 300 · 1.4

Handgloves 123

body-lg18px · 300 · 1

Handgloves 123

nav16px · 300 · 1

Handgloves 123

body15px · 300 · 1

Handgloves 123

label13px · 300 · 1

Handgloves 123

caption10px · 300 · 1

Handgloves 123

국문 · Korean

hangulFont	한화 자체 웹폰트 — CDP 익명 보고 'OTS derived font' 3,765글리프(100.0%). 선언은 ChnDefault → Hanwha → HanwhaGothic → canada-type-gibson 순이고 self-host 파일은 Hanwha_L_OTFA · Hanwha_R_OTFA · HanwhaGothicLOTFA · HanwhaGothicROTFA의 woff/woff2 8종. OS 폰트가 아니라 웹폰트이므로 Mac/Windows에서 같게 보인다
hangulWeights	300 3,214글리프(85.4%) · 500 527(14.0%) · 400 24(0.6%). 300 단일 체계에 가깝다
body	18px w300 lh1.0(1920 24px) · 카드 본문 15px w300(1920 20px). 행간이 1.0으로 잡히는 것은 본문 블록이 한 줄 단위 요소로 쪼개져 있어서로 보인다(미확인) — 여러 줄이 흐르는 단은 22px w300 lh1.5 · 22px w500 lh1.6 두 건뿐이다
sub	섹션 오프닝 문장 30px w300 lh1.45 자간 −2%(1920 40px/−0.8px). 2행 고정, 글자 단위 span 21·22개
label	nav 16px w300 · 2차 nav 13px w300 · 푸터 10px w300(10px w500 자간 −0.2px 변형 3건). 이 세 단은 1440·1920에서 크기가 같다
mixing	국영문이 한 서체로 통일된다 — 같은 익명 웹폰트가 한글 3,765글리프와 라틴 963글리프를 함께 그린다. 브랜드 라틴용으로 canada-type-gibson을 선언해 두었지만 실제 렌더는 9글리프뿐이라 국영문 이원화라 부를 수 없다
hangulHeadings	있다. 홈 히어로 54px w300(1920 72px) 국문 한 줄이 최상단이고, 섹션 오프닝 30px w300 국문 2행이 12회, 서브 페이지 타이틀 56px w300이 뒤따른다. 영문 대형 제목은 관측되지 않았다 — 대형 조판을 국문이 전담한다
verdict	얇은 국문 대형 조판 레퍼런스로 유효하다. 54px weight 300은 라이브러리에서 이터널저니(60px weight 100) 다음으로 얇은 국문 디스플레이이고, 자간을 크기 비율(−4%/−3%/−2%/−1%/0)로 계단화한 규칙까지 함께 가져올 수 있다. 다만 확보한 3페이지 중 2개가 동일한 홈이라 실질 표본은 홈 1 + 서브 1이다 — 목록·상세·채용 같은 다른 템플릿의 국문 조판은 판정하지 못했다
rendered	OTS derived font ×3765

영문 · Latin국문과 동일

latinFont	OTS derived font 963글리프(94.8%) · Helvetica 36글리프(3.5%) · Gibson 9글리프(0.9%) · Apple SD Gothic Neo 8글리프(0.8%)
latinWeights	실측 페이스 Book
share	라틴 1,016글리프 / 한글 3,765글리프 — 지면의 21.3%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 OTS derived font를 쓰는 단: display 54px/300 · h1 48px/300 · h2 39px/300 · statement 30px/300 · h3 24px/300 · body-lg 18px/300 · nav 16px/300 · body 15px/300 · label 13px/300 · caption 10px/300
mixing	국영문 혼용 노드 143개(전체 578개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 21.3%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 94.8%를 그리는 이름 미보고 서체(OTS derived font)가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: OTS derived font
rendered	OTS derived font ×963 · Helvetica ×36 · Gibson Book ×9 · Apple SD Gothic Neo ×8

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	10px
Max width	1320px
Section gap	홈: hero 900 → 스크롤 스테이지 450×3 → (미분류 구간 4,770px) → 사업분야 밴드 384 → 타일 900 → 뉴스룸 703 → 지속가능경영 952(pad-top 280) → 스테이지 900×2 → 하단 배너 274(pad 60/60). 문의 페이지: 타이틀 710 → 안내 193 → 본인확인 744
Header	88px fixed
Card Padding	지속가능경영 섹션 padding-top 280 · 하단 배너 padding 60/60 — 홈에서 관측된 유이한 큰 패딩
Grid Business Areas	사업분야 알약 칩 9개 118×35, 2열, gap-x 7, radius 1000px
Grid Newsroom	카테고리 칩 5개 123×24, 3열, gap-x 5, radius 100px, 1px #DEDEDE 인셋 링

Border Radius

Role	Value	Preview
small	6px	3회 · 목록(ul) 모서리
card	8px	24회 · 이미지·리스트 아이템 — 이 사이트에서 유일한 '사각 카드' 라운드
—	12px	3회 · 관측만
—	16px	2회 · 관측만
—	25.2px	1회 · 관측만
—	81.6px	6회 · 관측만 — 알약 근사로 추정(미확인)
pill-sm	100px	52회 · 뉴스룸 카테고리 칩(123×24)
circle	100%	60회 · 아이콘 버튼·TOP 버튼
pill	1000px	180회 · 헤더 Hanwha Hub 버튼·사업분야 칩(118×35) — 최다 라운드

Guidelines

국문 대형 제목은 weight 300으로 세운다 — 31개 스타일 중 27개, 한글 글리프의 85.4%(3,214/3,765)가 300이다
자간을 크기의 함수로 준다: −4%(72·60px) · −3%(64·52px) · −2%(40·28·26px) · −1%(22px) · 0(20px 이하)
대형 단은 뷰포트에 비례시키고 16px 이하 UI 단은 고정한다 — 72↔54 · 40↔30 · 28↔21 · 20↔15는 0.75배, 16·13·10px은 두 뷰포트 동일
깊이는 1px 인셋 링으로만 만든다 — 흰 지면 rgb(222,222,222)(60회), 어두운 지면 rgba(255,255,255,.3)(52회)
버튼·칩은 알약으로 통일한다(1000px 180회 · 100px 52회 · 100% 60회 = 292회 대 8px 24회)
히어로는 풀블리드 영상 1440×900 + 좌하단 국문 한 줄로 열고 CTA를 두지 않는다(홈 히어로 ctaCount 0)
전환은 0.35s ease를 기본으로 쓴다(0.35s 441회 · ease 634회)