Apple Newsroom 서체 따라하기
이하 모든 내용은 2020년 기준으로 작성되었다. 2022년 기준, 그냥 Pretendard를 사용하면 된다. 가장 애플을 잘 모방한 서체이다.
아주 오랜 기간 나에게 딱 맞는 폰트 CSS를 찾아왔다. 이 글에서는 드디어 찾은 나만의 폰트 CSS에 대해서 다뤄볼 것이다.
한줄정리
font-family: /* 본문용 서체 */ '-apple-system', 'BlinkMacSystemFont', 'Apple SD Gothic Neo', 'Inter', 'Spoqa Han Sans',
'Segoe UI', Sans-Serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-family: /* 코드용 서체 */ 'SF Mono', 'Consolas', 'Menlo', monospace;
Import 잊지 마세요!
San Francisco를 사용하고 싶었다
나는 San Francisco를 가장 좋아한다. 최근 Apple 제품의 기본 서체로 사용되고 있고 Apple Newsroom에서도 사용하는 그 폰트이다. 나는 Apple Newsroom의 디자인을 정말 좋아하기 때문에 최대한 그 느낌을 살리고 싶었다. 하지만 San Francisco 폰트의 사용 약관에는 약간의 문제가 있었으니...
Except as otherwise expressly permitted [...] you may not make the Apple Font available over a network where it could be run or used by multiple computers at the same time. (명시적으로 허용되지 않은 이상, Apple의 폰트를 네트워크 상에서 제공하여 여러 컴퓨터에서 동시에 사용할 수 없습니다.)
일반 사용자는 San Francisco를 웹 폰트로 사용할 수 없다는 의미이다 (Apple Newsroom은 SF Pro 웹 폰트를 사용하고 있다.) 그럼 대안을 찾아보자.
1. Apple 제품에서는 내장된 SF 폰트를 불러오자
기업들은 종종 제품 폰트로 시스템 기본 폰트를 사용하려 한다. 그럴 때마다 흔하게 사용되는 방식이다. 대표적으로 GitHub이 이와 같은 방식을 사용한다.
- -apple-system, /* Safari에서 SF 한글/영문 폰트. Firefox에서 SF 영문 폰트 */
- BlinkMacSystemFont, /* Chrome 계열에서 SF 한글/영문 폰트 */
- Apple SD Gothic Neo, /* Firefox에서 SF 한글(산돌 고딕 네오) 폰트*/
Apple은 한글 폰트로 산돌고딕 네오를 사용한다. Safari와 Chrome은 -apple-system
만 있어도 산돌고딕 네오를 불러오는 반면 Firefox 계열은 그러지 못한다. 때문에 Firefox에서 알맞은 한글 서체를 사용하도록 Apple SD Gothic Neo
를 지정해주는 것이다.
2. 그 외에는 SF 폰트와 닮은 폰트를 사용하자
영문: Inter
- Inter /* 비 Apple 제품에서 영문 폰트 */
Rasmus Andersson이라는 분께서 제작하신 Inter Font가 SF Pro와 가장 닮았다는 생각이 들었다. SF 폰트와는 다르게 웹폰트로 자유롭게 사용할 수 있으며 rsms.me와 Google Font에서 모두 제공된다. Mozilla, Figma, GitHub, 프로그래머스 등이 Inter Font를 사용한다.
@import url('https://rsms.me/inter/inter.css');
한글: Spoqa Han Sans (스포카 한 산스)
- Spoqa Han Sans /* 비 Apple 제품에서 한글 폰트 */
스포카 한 산스 서체가 산돌고딕 네오와 가장 닮았다는 생각이 들었다. 그도 그럴 것이 스포카 한 산스의 기반이 되는 Noto Sans, 즉 본고딕이 산돌에서 디자인한 서체이기 때문이다. 스포카 한 산스는 본고딕에서 몇 가지 디자인을 수정한 서체이다. 토스, 텀블벅, 망고플레이트, 렌딧, 카모아 등에서 스포카 한 산스를 활용한다.
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);