어떻게 읽어야 하나
- Square 화면의 타이포그래피 분위기를 빠르게 훑어볼 수 있습니다.
- 관찰된 폰트 이름을 기준으로 비슷한 제품 UI의 헤드라인과 본문 조합을 비교할 수 있습니다.
- 폰트 조합 탭에서 같은 계열의 대체 조합을 이어서 확인할 수 있습니다.
Square는 어떤 폰트를 쓸까?
Square 웹사이트에서 관찰한 font-family 값을 기준으로 정리했습니다.
관찰된 폰트
Square Sans Text
Square Sans Text VF
Square Sans Mono
Square Sans Mono VF
Square Sans Display
Square Sans Display VF
Cash Sans Mono
Cash Sans
Exact Block
Noto Sans JP
Arial
Helvetica
ＭＳ Ｐゴシック
ヒラギノ角ゴ Pro W3
メイリオ
Hiragino Kaku Gothic Pro
meiryo
Square Sans Display VF, Square Sans Display, Helvetica, Arial, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, sans-serif
Menlo
Monaco
Square에서는 Square Sans Text, Square Sans Text VF, Square Sans Mono, Square Sans Mono VF, Square Sans Display, Square Sans Display VF, Cash Sans Mono, Cash Sans, Exact Block, Noto Sans JP, Arial, Helvetica, ＭＳ Ｐゴシック, ヒラギノ角ゴ Pro W3, メイリオ, Hiragino Kaku Gothic Pro, meiryo, Square Sans Display VF, Square Sans Display, Helvetica, Arial, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, sans-serif, Menlo, Monaco 계열이 공개 CSS에서 관찰됐습니다. 실제 사용자에게 보이는 폰트는 OS, 브라우저, 지역, A/B 테스트, fallback stack에 따라 달라질 수 있습니다.
관찰 근거
- 관찰 페이지: https://squareup.com/
- CSS: https://pw-renderer-production-c.squarecdn.com/cebbab4538f1eff4440084d7894df02c39e0fb6d/_svelte/_app/immutable/assets/CaretPartial.DpVO1Ukr.css
- CSS: https://pw-renderer-production-c.squarecdn.com/cebbab4538f1eff4440084d7894df02c39e0fb6d/_svelte/_app/immutable/assets/ValidationMessage.rsdGq3w0.css
- CSS: https://pw-renderer-production-c.squarecdn.com/cebbab4538f1eff4440084d7894df02c39e0fb6d/_svelte/_app/immutable/assets/PublicWebNav.CnBQSTwp.css
- CSS: https://pw-renderer-production-c.squarecdn.com/cebbab4538f1eff4440084d7894df02c39e0fb6d/_svelte/_app/immutable/assets/CheckboxesField.B83IASjZ.css
- CSS: https://pw-renderer-production-c.squarecdn.com/cebbab4538f1eff4440084d7894df02c39e0fb6d/_svelte/_app/immutable/assets/SelectField.D9iEBpR_.css
- CSS: https://pw-renderer-production-c.squarecdn.com/cebbab4538f1eff4440084d7894df02c39e0fb6d/_svelte/_app/immutable/assets/MultiSelectField.Dphu5UyB.css