Pretendard 웹폰트 적용하기

Pretendard 특징

모양

위에서 서술했듯 Inter에 조금 남아 있는 휴머니스트적인 인상을 네오 그로테스크에 가깝게 다듬었다. 이외로 @나 원 기호—₩ 등을 일상적으로 쓰이는 모습으로 맞추고, San Francisco와 비교했을 때 조금 좁게 보였던 숫자도 폭을 기존보다 넓혀 더욱 자연스럽도록 했다.

 

글자 높이

Inter는 글자 크기가 11px일 때 가장 또렷하게 보일 수 있게 11px 그리드에서 구조가 잡혀 있는데, apple-system을 바탕으로 구성한 레이아웃이 Pretendard를 쓰는 환경에서도 동일하게 작동할 수 있게 글자 높이를 San Francisco와 맞췄다.

 

자간

San Francisco Text와 같은 자간 구조를 가진 Inter는 12px 읽기 환경에 맞춰져 있는데, 12px가 아닌 상황에서 최적의 읽기 환경을 제공하기에는 글자 크기가 변화할 때마다 각기 다른 letter-spacing을 적용하기 힘든 점을 고려해 Helvetica Neue와 본문 크기일 때의 San Francisco에 맞춰 공간을 다듬었다.

 

(* https://cactus.tistory.com/306 중 발췌)

 

 

기존에 웹폰트를 사용하는 경우 "나눔"이나 "노토" 폰트를 사용하는 경우가 대부분이라

구글폰트에서 연결해 사용하고 있었는데,

이번에 프리텐다드 폰트 사용해봤는데, 너무너무 이쁨! ㅎㅎㅎ

 

1. 폰트 import

<!--
* font name: "Pretendard" 
* description: 모든 기능 
-->
<!-- html에서 작성하는 경우 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />
<!-- css에서 작성하는 경우 -->
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");



<!--
* font name: "Pretendard" 
* description: 다이나밋 서브셋. (페이지에 포함된 글자만 선택적 다운해서 보다 빠르게 사용)
-->
<!-- html에서 작성하는 경우 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css" />
<!-- css에서 작성하는 경우 -->
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");


<!--
* font name: "Pretendard Variable" 
* description: 가변 다이나밋 서브셋. 용량 더욱 적음
-->
<!-- html에서 작성하는 경우 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css" />
<!-- css에서 작성하는 경우 -->
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");


<!-- 
* font name: "Pretendard Variable" 
* description: 가변 글꼴. 가변 weight 속성 사용 시
-->
<!-- html에서 작성하는 경우 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css" />
<!-- css에서 작성하는 경우 -->
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");

깃헙에 들어가보면 여러가지 환경에 대한 고려를 잘 해 놓았음~  ; )

웹폰트로 쓰는 경우라 속도를 우선해서 "pretendard variable"을 사용.

 

 

2. css내 font 정의

/* 시스템폰트 우선하는 경우 */
font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

/* Pretendard 우선하는 경우 */
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

프리텐다드 폰트 적용은 위와 같이 환경에 맞게 하면 끝!

 

 

 

Pretendard Weight 예시

Pretendard 폰트 굵기는 100부터 900까지 지원함.

 

Pretendard에서는 본고딕 소스로부터 Black 마스터를 만들어낸 뒤

이를 9개 글자가족으로 분화해 본고딕에는 없던 SemiBold와 ExtraBold 굵기를 지원한다고 함.

 

 

 

 

 

Pretendard를 사용하는 곳

여러 회사에서 이미 사용 중임.

무료 폰트임에도 깔끌하게 만들어놓아서 

내노라하는 회사에서 이미 많이 사용중.

더 자세한 내용을 알아보려면, 아래 공식 깃헙과 블로그로 고고~~

 

 

 

Pretendard github

https://github.com/orioncactus/pretendard

GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ

깃헙에서 최신 폰트를 받을 수 있는데,

깃이 익숙하지 않은 사용자들은 아래 블로그에서 조금 더 편하게 폰트를 받을 수 있음.

 

 

 

 

Pretendard 소개페이지 (*폰트 zip다운로드)

https://cactus.tistory.com/306

Pretendard

여기 블로그에서 편하게 폰트셋을 zip파일로 다운 받을 수 있음.