어떻게 읽어야 하나
- Chrome 화면의 타이포그래피 분위기를 빠르게 훑어볼 수 있습니다.
- 관찰된 폰트 이름을 기준으로 비슷한 제품 UI의 헤드라인과 본문 조합을 비교할 수 있습니다.
- 폰트 조합 탭에서 같은 계열의 대체 조합을 이어서 확인할 수 있습니다.
Chrome는 어떤 폰트를 쓸까?
Chrome 웹사이트에서 관찰한 font-family 값을 기준으로 정리했습니다.
관찰된 폰트
Google Sans
Google Sans Display
Google Sans Text
Product Sans
arial
Helvetica
Roboto
Google Sans Arabic
Google Sans Japanese
Google Sans Korean
Google Sans Simplified Chinese
Google Sans Traditional Chinese
Noto Sans JP
Noto Sans KR
Noto Sans SC
Noto Sans TC
Noto Naskh Arabic
Chrome에서는 Google Sans, Google Sans Display, Google Sans Text, Product Sans, arial, Helvetica, Roboto, Google Sans Arabic, Google Sans Japanese, Google Sans Korean, Google Sans Simplified Chinese, Google Sans Traditional Chinese, Noto Sans JP, Noto Sans KR, Noto Sans SC, Noto Sans TC, Noto Naskh Arabic 계열이 공개 CSS에서 관찰됐습니다. 실제 사용자에게 보이는 폰트는 OS, 브라우저, 지역, A/B 테스트, fallback stack에 따라 달라질 수 있습니다.
관찰 근거
- 관찰 페이지: https://www.google.com/chrome/
- CSS: https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.css
- CSS: https://fonts.googleapis.com/css2?family=Product+Sans&family=Google+Sans+Display:ital@0;1&family=Google+Sans_old:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Google+Sans+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&display=swap
- CSS: https://www.google.com/chrome/static/css/fallback.min.css
- CSS: https://www.google.com/chrome/static/css/pages/home/main.min.css