SM엔터테인먼트

네이비·핑크·회색 색면을 세로로 쌓고, 각 면에 80~100px 얇은 대문자 한 줄씩만 올린다.

SM엔터테인먼트 홈은 색면 세 장을 세로로 쌓은 구조입니다. 네이비 840px 위에 100px 영문 두 줄, 핑크 551px 위에 80px NEWS, 회색 489px 위에 80px IR SUMMARY로 끝나고 전체가 2,356px밖에 되지 않습니다. 눈여겨볼 점은 웨이트인데, 80~100px 큰 글자를 전부 Regular(400)로 놓아서 크기는 크되 굵지 않은 인상을 만듭니다. 국문도 마찬가지로 80px Regular 페이지 제목이 실재하니, 대형 국문 제목을 700~800으로 굵게 쓰는 관행을 벗어난 사례가 필요할 때 인용할 만합니다. 브랜드 서체 SMTOWN이 영문만 그리고 한글은 Pretendard가 받는 이원 구조도 함께 참고하세요.

https://www.smentertainment.com

Color Palette

Primary

Accent

Fill

Label

Background

Static

Typography

SMTOWN(OTF) · 400 / 500 / 700display·heading — 라틴 전용 브랜드 서체
Pretendard · 400 / 500한글 100% · 본문·UI
Hiragino Kaku Gothic ProN · 400일본어 폴백(OS 시스템 폰트)
PingFang SC · 400중국어 폴백(OS 시스템 폰트)
Type Scalepx는 layout
display100px · 400 · 1
Handgloves 123
page-title80px · 400 · 1.2
다람쥐 헌 쳇바퀴
h2-lead50px · 500 · 1.2
다람쥐 헌 쳇바퀴
h236px · 500 · 1.2
다람쥐 헌 쳇바퀴
h330px · 500 · 1.2
다람쥐 헌 쳇바퀴
h420px · 500 · 1.43
다람쥐 헌 쳇바퀴
body15px · 400 · 1.43
다람쥐 헌 쳇바퀴
body-sm13.5px · 400 · 1.43
다람쥐 헌 쳇바퀴
nav12.75px · 500 · 1.43
다람쥐 헌 쳇바퀴
caption12px · 400 · 1.43
Handgloves 123

국문 · Korean

hangulFontPretendard — self-hosted pretendard-regular/semibold/bold woff2·woff. 한글 10,420글리프 100%(Regular 8,530=81.9% · SemiBold 1,890=18.1%). **선언 1순위는 SMTOWN 하나뿐인데 그 서체에 한글이 없어 전부 Pretendard로 떨어진다 — 선언과 렌더가 불일치한다**
hangulWeights400 Regular 7,882 · 500 SemiBold 1,890 · 700 선언 648글리프도 Regular 페이스로 보고됐다(bold woff2는 얹혀 있으나 이 10페이지에서 잡히지 않았다 — 합성 볼드 여부 미확인)
body15px w400 lh1.43 자간 0(9회). 보조 본문 13.5px w400 lh1.43(12회)
sub20px w500 lh1.43 — 카드·목록 제목(국문 11건)
label12.75px w500 lh1.43 — GNB 국문 라벨('비즈니스 문의'·'경영실적'·'주가정보')
mixing이원 구조다. 대분류 내비·페이지 제목은 영문(SMTOWN), 실무 문서·기사·정책은 국문(Pretendard)이다. 한 줄 안 혼용도 있는데(예: 'SM Entertainment는 아시아를 넘어 글로벌 No.1을' 36/500, 'IR 일정' 12.75/500) 이때 라틴은 SMTOWN, 한글은 Pretendard로 한 줄이 두 서체가 된다
hangulHeadings있음 — 서브 페이지 h1 80px/400 국문 2건('영상정보처리기기 운영ㆍ관리 방침' y120·h156, '비윤리행위 신고' y120·h140, 둘 다 패딩 30/30). 그 아래로 50px/500(뉴스룸 톱 기사) · 40.5px/500(기사 상세) · 36px/500(리드) 국문 제목이 이어진다. 홈 최대 100px/400은 영문('THE CULTURE THE FUTURE')이라 국문 실측 상한은 80px/400이다
verdict국문 대형 조판 레퍼런스로 유효하되 웨이트가 특이해서 값을 그대로 쓸 수 있다 — 80px 국문 제목을 Regular 400으로 놓는다. 라이브러리의 다른 대형 국문 히어로가 700~800인 것(카카오 90/700 · 카카오뱅크 90/800)과 정반대이고, 카카오페이 63/500보다도 한 단 얇다. 참고할 규칙: ① 크기는 100 → 80 → 50 → 36으로 크게 벌리고 굵기는 400~500에서 멈춘다 ② 자간은 전 단 0 ③ 대형 국문 제목의 행간은 1.20(80px), 100px 영문만 1.00. 주의: 한글이 브랜드 서체가 아니라 Pretendard로 떨어지는 구조이므로 '80/400'이라는 값은 SM의 국문 조판 의도라기보다 Pretendard Regular의 인상이다
renderedPretendard ×8530 · Pretendard SemiBold ×1890
영문 · Latin영문 전용
latinFontSMTOWN(OTF) 7,352글리프(91.6%) · Pretendard 596글리프(7.4%) · Hiragino Kaku Gothic ProN 30글리프(0.4%) · Apple SD Gothic Neo 28글리프(0.3%)
latinWeights실측 페이스 Medium · Bold · SemiBold
share라틴 8,030글리프 / 한글 10,420글리프 — 지면의 43.5%가 라틴이다 (1440 CDP 실측)
scale타입 스케일에서 SMTOWN(OTF)를 쓰는 단: display 100px/400 · page-title 80px/400 · h3 30px/500 · h4 20px/500 · nav 12.75px/500 · caption 12px/400
mixing국영문 혼용 노드 179개(전체 876개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNoteSMTOWN(OTF) 영문 전용(91.6% · 선언됨 · 최상단 디스플레이 독점)
verdict영문 전용 서체가 있다 — SMTOWN(OTF) 라틴 91.6% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 100px)
sharedWithKorean국문과 같은 서체: Pretendard
renderedSMTOWN(OTF) ×4099 · SMTOWN(OTF) Medium ×3030 · Pretendard ×569 · SMTOWN(OTF) Bold ×223 · Hiragino Kaku Gothic ProN ×30 · Apple SD Gothic Neo ×28 · Pretendard SemiBold ×27 · PingFang SC ×20 · Lucida Grande ×4

Spacing & Shape

Spacing

PurposeValuePreview
Densityspacious
Base unit6px
Max width1320px
Section gap홈 밴드는 간격 0으로 맞붙는다(840 → 551 → 489). 서브 페이지 제목 밴드는 패딩 30/30, 본문 리드는 60/60. 뉴스룸 카드 행 간격 60
Header120px fixed
Card Padding홈 뉴스 카드 600×347, 3열 gap 0 · 뉴스룸 목록 카드 500px 행, 하단 여백 60 · 계열사 연락 카드 179~203px 행 9개 · 법령 표 292×58(3열)·219×58(4열)·175×58(5열), gap 0
Button Padding미확인 — raw components.buttons 0개(홈 전용 스냅숏이라 버튼이 안 잡혔다)

Border Radius

RoleValuePreview
small8px 1회 · 컨테이너 1건
standard20px 13회 · 링크·버튼 — 사이트의 유일한 반복 라운드

Guidelines

Do

Don't

Pages

More like this