MinSans vs Pretendard | 한글 가변 폰트(Variable) 비교 & 실제 사이트 적용

 

안녕하세요 찐망고입니다.

이번에도 새로운 폰트를 사용한 웹사이트를 발견했어요.

바로 인크루트웍스 웹사이트인데요.

AI로 검증하는 채용솔루션, 인크루트웍스

 

보자마자 프리텐다드 폰트가 생각났어요,

실제로 비교해 보니 조금 차이가 나지만요

Pretendard variable폰트 적용

MinSans폰트 적용

 

어때요 구별이 되나요? ㅎㅎ

영상으로 보여드릴게요

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

민산스폰트는 좀 더 부드럽고 둥근 느낌이고

프리텐다드는 좀 더 각지고 정돈된 스타일이다.

민산스폰트가 글자 폭이 상대적으로 넓고

프리텐다드폰트가 살짝 좁음

 

민산스는 노토산스폰트를 기본으로 커스텀한 폰트인데

실제로 보면 프리텐다드와 더 비슷해 보인다.

웹사이트보다는 감성적인 UI디자인이나 앱디자인에서 사용하지 않을까 싶다.

 

 

민산스 폰트 설치 다운로드링크

Min Sans — 민산스 | Notion

 

민산스와 프리텐다드 모두 Variable을 지원한다. 

가변폰트 형식으로 제공되어 폰트의 굵기를 자유롭게 조절할 수 있다.

가변폰트는 CSS에서 굵기(weight)를 세밀하게 조절할 수 있는데

MinSans Variable은 100~900까지 지원하고

Pretendard Variable은 45~920까지 지원한다

 

https://cdn.jsdelivr.net/gh/poposnail61/min-sans@main/web/css/minsansvf-dynamic-subset.css

관련 CSS파일을 확인해 보면

src: url('../fonts/variable/dynamic-subset/MinSansVF_14.woff2') format('woff2-variations');

 

이렇게 woff2 파일들이 보인다

브라우저에 각 woff2 파일들을 주소창에 쳐주면 각각 다운로드할 수 있음 

https://cdn.jsdelivr.net/gh/poposnail61/min-sans@main/web/fonts/variable/dynamic-subset/MinSansVF_14.woff2

 

 

아래 이미지는 해당 사이트를 캡처한 이미지인데

폰트의 둥근 느낌과 버튼, 제목, 인터페이스 요소에서 프리텐다드와 조금은 다른 분위기를 연출하는 것 같다.