효성

1536px 원본 한 벌을 뷰포트 폭에 통째로 비례시키고, 13px부터 80px까지 자간을 −2% 하나로 잠근다.

효성은 자사 서체 Brand New Hyosung으로 국문 대형 제목을 직접 그리는 흔치 않은 코퍼레이트 사이트입니다. 서브페이지 제목이 56px 국문 볼드로 서고 그 아래 39px 국문 리드 문장이 이어지는 2단 구성이 열 페이지에 그대로 반복됩니다. 가장 배울 만한 점은 조판 규칙의 단순함으로, 13px 캡션부터 75px 디스플레이까지 자간이 전부 −2% 한 값이고 레이아웃 전체가 1536px 원본을 뷰포트 폭에 비례시킨 값이라 화면 크기가 달라져도 비율이 흐트러지지 않습니다. 국문 제목이 큰 기업 소개·연혁·지속가능경영 페이지를 설계할 때 참고하기 좋되, 홈 폴드의 가장 큰 글자 75px은 영문이므로 국문 히어로 사례로 인용하면 안 됩니다.

https://www.hyosung.com/kr/index

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Brand New Hyosung · 300 / 500 / 700display·국문 대형 제목·카드 제목 (국영문 겸용)

Pretendard · 400 / 600 / 700body·ui·link, 한글 79.1%

Apple SD Gothic Neo · 400 / 600 / 700뉴스룸 본문 폴백

Pretendard GOV · 400선언만 있고 렌더 0

Helvetica · 400라틴 폴백

Type Scalepx은 1440 실측, count는 raw 1920 스타일 집계다

display75px · 500 · 1.2

Handgloves 123

page-title56.25px · 700 · 1.2

Handgloves 123

section-title43.13px · 300 · 1.2

Handgloves 123

lead39.38px · 700 · 1.5

Handgloves 123

h230px · 700 · 1.19

Handgloves 123

h326.25px · 600 · 1.21

다람쥐 헌 쳇바퀴

body-lg22.5px · 600 · 1.21

다람쥐 헌 쳇바퀴

link18.75px · 600 · 1.2

다람쥐 헌 쳇바퀴

ui15px · 600 · 1.19

다람쥐 헌 쳇바퀴

body13.13px · 400 · 1.21

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard 23,335글리프(79.1%) · Pretendard SemiBold 3,214(10.9%) · Apple SD Gothic Neo 2,252(7.6%, 뉴스룸 폴백) · Brand New Hyosung Bold 625 + Light 69 + Medium 14(합 708, 2.4%)
hangulWeights	400 Pretendard 20,886 / Apple SD Gothic Neo 2,196 · 600 Pretendard SemiBold 3,024 · 700 Pretendard 2,449 / Brand New Hyosung Bold 623 · 500 Brand New Hyosung Medium 14 · 300 Brand New Hyosung Light 69
body	13.13px/400 lh1.21 ls −0.2625px(−2.0%) Pretendard (1440 · raw 17.5px ×6)
sub	22.5px/600 lh1.21 ls −0.45px(−2.0%) Pretendard — 히어로 부제·리드 부연 (1440 · raw 30px ×5)
label	15px/600 lh1.19 ls −0.3px Pretendard — nav·버튼·푸터 (1440 · raw 20px ×25, UI 최다 단)
mixing	층으로 나눈다. 국문 대형(56.25·39.38·30px)은 자사 서체 Brand New Hyosung, 국문 본문·UI는 Pretendard다. 한 줄 안에서 국영문이 섞이면 Brand New Hyosung 단일이 둘 다 그린다 — '산업의 변화를 주도하는 효성인의 핵심 가치 체계 Hyosung Way로' 39.38px/700이 그 예다. 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
hangulHeadings	있다. 국문 최대는 서브페이지 h1 56.25px/700 Brand New Hyosung Bold(lh1.20 ls −1.125px, 1440 · raw 1920에서 75px/700 ×5) — '그룹소개'·'브랜드 스토리'·'연혁'·'주요 소식'·'문의하기'. 그 아래 국문 리드가 39.38px/700 lh1.50 ×3, 카드 제목이 30px/700 ×6이다. 홈 폴드의 최대 글자 75px/500 'Core Tech'는 영문이므로 국문 히어로가 아니다 — 홈 국문 최대는 30px/700 '섬유 · 무역'이다
verdict	국문 대형 제목 레퍼런스로 유효 — 자사 서체가 56px 국문 h1과 39px 국문 리드 문장을 직접 그리고, 자간을 −2%로 통일한 사례로 인용할 수 있다. 단 '국문 히어로 사이트'는 아니다. 홈 폴드는 영문 75px이 이끌고 국문은 서브페이지 타이틀·리드 층에서만 커진다
rendered	Pretendard ×23335 · Pretendard SemiBold ×3214 · Apple SD Gothic Neo ×2252 · Brand New Hyosung Bold ×625 · Brand New Hyosung Light ×69 · Brand New Hyosung Medium ×14

영문 · Latin국문과 동일

latinFont	Pretendard 23,584글리프(94.6%) · Brand New Hyosung 881글리프(3.5%) · Helvetica 443글리프(1.8%) · Apple SD Gothic Neo 27글리프(0.1%)
latinWeights	실측 페이스 SemiBold · Bold · Light · Medium
share	라틴 24,939글리프 / 한글 29,509글리프 — 지면의 45.8%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: h3 26.25px/600 · body-lg 22.5px/600 · link 18.75px/600 · ui 15px/600 · body 13.13px/400
mixing	국영문 혼용 노드 757개(전체 2,483개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 45.8%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 94.6%를 그리는 Pretendard가 한글도 90.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard · Brand New Hyosung · Apple SD Gothic Neo
rendered	Pretendard ×20969 · Pretendard SemiBold ×2615 · Brand New Hyosung Bold ×792 · Helvetica ×443 · Brand New Hyosung Light ×72 · Apple SD Gothic Neo ×27 · Brand New Hyosung Medium ×17 · Arial ×4

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	raw
Max width	1292px
Section gap	섹션 패딩 1440 기준 94/120·94/163·94/234(홈)
Header	84px fixed
Content Widths	1440 기준 홈 1292 · 서브 1072(9페이지 중 7) · 폼·메가메뉴 컬럼 680 · 1092·1308·1296 소수
Grid Home	사업영역 5열 241×371 거터 21 · Milestones 5열 285×368 거터 19 · 뉴스 5행 781×110
Grid Sub	가치체계 4열 336×412 거터 19 · 계열사 4열 191×73 거터 0 · 연혁 시대별 11~17행 527×25(초기 5행은 527×143)
Card Padding	계열사 카드 15px 0 0 · 태그 칩 10px 12.5px · 목록 버튼 17.5px 0 (raw 1920)
Button Padding	Family Sites 10px 20px r1248.75px · 문의 원형 r50%
Note	footer는 layout.json의 footer 탐지기가 null로 보고했지만 10페이지 전부 마지막 섹션이 bg #2E008B · 높이 243px이다(데이터 결함, 섹션으로 잡힘). 그 바로 위 높이 187px #F7F9FD 띠는 다음 페이지 이동 링크다.

Border Radius

Role	Value	Preview
standard	12.5px (1440에서 9.375px · 원본 10px)	15회 · 계열사 카드 등 앵커 블록
circle	50%	29회 · 플로팅 문의 버튼·아이콘 버튼·SVG 도형
pill	1248.75px (원본 999px)	9회 · Family Sites 드롭다운 버튼

Guidelines

자간을 크기별로 조정하지 말고 −0.02em 하나로 잠근다 — 37개 스타일 중 34개가 그렇다
국문 대형은 Brand New Hyosung 700(56.25px lh1.20 / 39.38px lh1.50), 국문 본문·UI는 Pretendard로 층을 나눈다
레이아웃 값을 1536px 원본 정수(80·60·46·42·32·28·24·20·16·14·12px)로 잡고 뷰포트 폭에 비례시킨다
지면은 #FFFFFF 유지, 강조가 필요하면 #F6F6F6·#F7F9FD 띠나 #0E1057 다크 섹션 한 구획으로 끊는다
본문은 #666666(5.74:1), 제목은 #1C1C1C(17.04:1) 두 색으로 끝낸다
카드·표·이미지는 radius 0을 기본으로, 12.5px은 다크 섹션 계열사 카드에만 쓴다
ScrollTrigger는 scrub 1(97개)·0.5(30개) 두 값만 쓰고 pin은 쓰지 않는다(실측 0개)