Neatly Packaged Manuals

    pretendard

    1.2.2 • Public • Published

    Pretendard

    Thumbnail Thumbnail

    Pretendard는 마땅한 system-ui 글꼴이 없는 환경에서 발생하는 불편함을 해결합니다.

    Pretendard는 9가지 굵기로 제공되며, 가변 글꼴 또한 지원합니다.

    배경 및 이야기

    Pretendard는 크로스 플랫폼으로 제품을 서비스하고자 할 때, 또는 다국어 타이포그래피 환경이 어색하거나, 한글에서 자간 문제 등으로 생기는 작업 환경에서의 추가적인 작업 소요를 줄이고자 시작된 글꼴 프로젝트입니다. 가능한 눈에 익숙한 모습으로 가져가기 위해 Inter본고딕을 바탕으로 Apple의 타이포그래피 환경과 맞췄습니다.

    Pretendard의 배경과 특징, OpenType 기능 등을 설명하는 자세한 이야기는 이곳에서 확인하실 수 있습니다.

    다운로드

    최신 버전 다운로드

    웹폰트

    CDN을 이용해 Pretendard를 사용할 수 있으며, 토글을 확인해 기본적으로 추천하는 jsDelivr 외에도 cdnjs와 UNPKG 중에 원하는 CDN을 사용하실 수 있습니다.

    모든 OpenType 기능을 포함한 Pretendard를 웹폰트로 사용하려면 아래 코드를 사용하세요. 사용하는 font-family 이름은 Pretendard 입니다.

    CSS

    @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
    cdnjs 및 UNPKG
    cdnjs
    @import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.2.1/static/pretendard.css');
    UNPKG
    @import url('https://unpkg.com/pretendard@1.2.1/dist/web/static/pretendard.css');

    HTML

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
    cdnjs 및 UNPKG
    cdnjs
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.2.1/static/pretendard.css" />
    UNPKG
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/pretendard@1.2.1/dist/web/static/pretendard.css" />

    다이나믹 서브셋

    Pretendard에서는 웹폰트 용량 문제를 해결하기 위한 방법으로 Google Fonts에서 제공하는 Noto Sans KR와 동일한 방식으로 동적 서브셋을 제공합니다. 페이지에 포함된 글자만 선택적으로 다운로드해 보다 빠르게 Pretendard를 표시하려면 아래 코드를 사용하세요. 사용하는 font-family 이름은 Pretendard 입니다.

    CSS

    @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
    cdnjs 및 UNPKG
    cdnjs
    @import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.2.1/static/pretendard-dynamic-subset.css');
    UNPKG
    @import url('https://unpkg.com/pretendard@1.2.1/dist/web/static/pretendard-dynamic-subset.css');

    HTML

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css" />
    cdnjs 및 UNPKG
    cdnjs
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.2.1/static/pretendard-dynamic-subset.css" />
    UNPKG
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/pretendard@1.2.1/dist/web/static/pretendard-dynamic-subset.css" />

    가변 글꼴

    가변 weight 속성을 사용하려면 아래 코드를 사용하세요. 사용하는 font-family 이름은 'Pretendard Variable' 입니다.

    CSS

    @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
    cdnjs 및 UNPKG
    cdnjs
    @import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.2.1/variable/pretendardvariable.css');
    UNPKG
    @import url('https://unpkg.com/pretendard@1.2.1/dist/web/variable/pretendardvariable.css');

    HTML

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css" />
    cdnjs 및 UNPKG
    cdnjs
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.2.1/variable/pretendardvariable.css" />
    UNPKG
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/pretendard@1.2.1/dist/web/variable/pretendardvariable.css" />

    font-family

    시스템에 가능한 맞추고자 한다면 아래와 같은 font-family 구성을 추천합니다.

    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', Pretendard, Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic', sans-serif;

    어디서든 동일한 환경을 가지고자 한다면 아래와 같은 font-family 구성을 추천합니다.

    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

    패키지

    Pretendard는 아래와 같은 패키지 매니저에서 사용할 수 있습니다.

    npm i pretendard
    yarn add pretendard

    라이선스

    Pretendard는 SIL 오픈 폰트 라이선스로 배포됩니다. 글꼴 단독 판매를 제외한 모든 상업적 행위 및 수정, 재배포가 가능합니다.

    기여자

    Pretendard에 기여해주셔서 진심으로 감사드립니다.

    @hiddenest: 웹폰트 서빙 및 CDN 업데이트 자동화, 서브셋 작업, 그리고 다이나믹 서브셋을 제작해주셨습니다.

    @leejh10003: Pretendard를 사용하는 예시를 제작해주셨습니다.

    @black7375: 서브셋 및 동적 서브셋 빌드 자동화, 릴리즈 파일 생성 자동화를 제작해주셨습니다.

    @victorrica: npm 및 Yarn 패키지 배포를 작업해주셨습니다.

    @kms0219kms: 웹폰트 CDN 배포 다중화를 작업해주셨습니다.

    Pretendard를 사용하는 곳

    PocketLesson Careerly Careerly POINTING flex flex Festa Festa 썬데이나마스떼 PROJECT LION PROJECT LION Sandoll Cloud 캐치패션 캐치패션 PUBLY PUBLY 세탁특공대 세탁특공대 kakaobank kakaobank moye moye kakaostyle kakaostyle solved.ac solved.ac rallit rallit Adobe Fonts Adobe Fonts

    의견 나누기

    새로운 개선 의견은 언제나 환영입니다. 해결이 필요한 경우 Issues에서 이슈를 등록해주세요.

    Keywords

    none

    Install

    npm i pretendard

    DownloadsWeekly Downloads

    2,074

    Version

    1.2.2

    License

    OFL-1.1

    Unpacked Size

    190 MB

    Total Files

    1892

    Last publish

    Collaborators

    • orioncactus
    • phoary