어떻게 읽어야 하나
- NBA 화면의 타이포그래피 분위기를 빠르게 훑어볼 수 있습니다.
- 관찰된 폰트 이름을 기준으로 비슷한 제품 UI의 헤드라인과 본문 조합을 비교할 수 있습니다.
- 폰트 조합 탭에서 같은 계열의 대체 조합을 이어서 확인할 수 있습니다.
NBA는 어떤 폰트를 쓸까?
NBA 웹사이트에서 관찰한 font-family 값을 기준으로 정리했습니다.
관찰된 폰트
Roboto
Roboto Condensed
Roboto Slab
Action NBA Cond Web
Knockout
Knockout Wide
WNBA Black
WNBA Bold
WNBA Regular
WNBA Extended Black
WNBA Extended Bold
WNBA Extended Regular
WNBA Condensed Black
WNBA Condensed Bold
WNBA Condensed Regular
WNBA Italic
WNBA Black Italic
WNBA Bold Italic
WNBA Varsity
swiper-icons
NBA에서는 Roboto, Roboto Condensed, Roboto Slab, Action NBA Cond Web, Knockout, Knockout Wide, WNBA Black, WNBA Bold, WNBA Regular, WNBA Extended Black, WNBA Extended Bold, WNBA Extended Regular, WNBA Condensed Black, WNBA Condensed Bold, WNBA Condensed Regular, WNBA Italic, WNBA Black Italic, WNBA Bold Italic, WNBA Varsity, swiper-icons 계열이 공개 CSS에서 관찰됐습니다. 실제 사용자에게 보이는 폰트는 OS, 브라우저, 지역, A/B 테스트, fallback stack에 따라 달라질 수 있습니다.
관찰 근거
- 관찰 페이지: https://www.nba.com/
- CSS: https://www.nba.com/_next/static/css/a47657da9d73ab50.css
- CSS: https://www.nba.com/_next/static/css/f6c744bf1071a8b3.css
- CSS: https://www.nba.com/_next/static/css/fcfc70980d413a19.css
- CSS: https://www.nba.com/_next/static/css/560196e3a7d5b7de.css
- CSS: https://www.nba.com/_next/static/css/46a9f6a8f49dfe20.css
- CSS: https://www.nba.com/_next/static/css/64ca15cc14a78b03.css