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
를 지정해주는 것이다.