Skip to content

Latest commit

 

History

History
353 lines (214 loc) · 9.8 KB

README.md

File metadata and controls

353 lines (214 loc) · 9.8 KB
Raw

한국어 | English | 日本語

Pretendard

Thumbnail

Pretendard is a Neo-grotesque typeface suitable for cross-platform applications and multilingual typography. Pretendard is designed based on Inter, Source Han Sans, and M PLUS 1p. It provides enhanced text legibility without requiring further adjustments of scaling, letter-spacing, optical adjustments.

Pretendard is available in 9 weights, and also supports variable fonts.

Background and story

You can read a detailed story about Pretendard’s background, features, and OpenType features here(Korean).

Download

Download latest version

Family

To use Pretendard suitable for a specific environment, check below:

  • Pretendard JP: Suitable for the Japanese environment and can be used for Korean Han environments with OpenType features.
  • Pretendard Std: Suitable for Latin/Greek/Cyrillic-only environments.
  • Pretendard GOV(Korean): Suitable for the public service environment in Republic of Korea.

Webfonts

You can use Pretendard via CDN, and in addition to the jsDelivr recommended by default, you can choose alternative CDNs you want, cdnjs or UNPKG by checking the toggle.

Use the code below to use Pretendard as a web font with entire features. Provided font-family name is Pretendard.

HTML

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
cdnjs and UNPKG
cdnjs
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css" />
UNPKG
<link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/[email protected]/dist/web/static/pretendard.css" />

CSS

@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css");
cdnjs and UNPKG
cdnjs
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css");
UNPKG
@import url("https://unpkg.com/[email protected]/dist/web/static/pretendard.css");

Dynamic subset

Use the code below to use Pretendard faster by loads the font-slices required from the page. Provided font-family name is Pretendard.

HTML

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css" />
cdnjs and UNPKG
cdnjs
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-dynamic-subset.min.css" />
UNPKG
<link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/[email protected]/dist/web/static/pretendard-dynamic-subset.css" />

CSS

@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css");
cdnjs and UNPKG
cdnjs
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-dynamic-subset.min.css");
UNPKG
@import url("https://unpkg.com/[email protected]/dist/web/static/pretendard-dynamic-subset.css");

Variable dynamic subset

You can use Pretendard dynamic subset much faster and smaller file size with a variable weight axis. Use the code below to use Pretendard with the variable dynamic subset. Provided font-family name is "Pretendard Variable".

HTML

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
cdnjs, UNPKG
cdnjs
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css" />
UNPKG
<link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css" />

CSS

@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
cdnjs, UNPKG
cdnjs
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css");
UNPKG
@import url("https://unpkg.com/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css");

Variable

Use the code below to use Pretendard with a variable weight axis. Provided font-family name is "Pretendard Variable".

HTML

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
cdnjs and UNPKG
cdnjs
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css" />
UNPKG
<link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/[email protected]/dist/web/variable/pretendardvariable.css" />

CSS

@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css");
cdnjs and UNPKG
cdnjs
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css");
UNPKG
@import url("https://unpkg.com/[email protected]/dist/web/variable/pretendardvariable.css");

font-family

If you want to fit the system-font as much as possible, the following font-family are recommended:

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;

If you want to provide the same environment anywhere, the following font-family are recommended:

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;

Package

Pretendard is available in the following package managers.

npm i pretendard
yarn add pretendard

System font

Pretendard can be installed on the machine and used as a system font.

brew tap homebrew/cask-fonts
brew install font-pretendard
# configuration.nix
{
  fonts.fonts = with pkgs; [
    pretendard
  ];
}
yay -S otf-pretendard
yay -S ttf-pretendard

Credit

Base

Inter: Rasmus Andersson

Hangul glyphs

Source Han Sans: Adobe, Google, Sandoll Communications; Jang Soo-young and Kang Joo-yeon

Kana glyphs

M PLUS 1p: UNDERFOREST DESIGN; Coji Morishita

Combine and redesign

Kil Hyung-jin

License

Pretendard is distributed under the SIL Open Fonts License, which is allowed any commercial uses, modifications, and redistribution.

Contributors

Thank you so much for your contribution to Pretendard.

@hiddenest: Worked serving webfonts, creating CDN assets purge automation, Providing webfonts subset and dynamic subset, and automating variable dynamic subset.

@leejh10003: Worked making an example using Pretendard.

@black7375: Worked automating all Webfont builds, automating release file creation, automating publish on npmjs and Yarn, improving versioning from CDN URLs, setting monorepo, and improving build performance, and documenting Pretendard GOV CDN.

@victorrica: Worked publishing npm and Yarn packages.

@kms0219kms: Worked all webfonts CDN multiplexing, improving formatting from documentation, and readme localization.

@Gamsake: Worked improving build automation.

@quiple: Worked improving Japanese Readme translation.

@sudosubin: Added Pretendard to homebrew-cask-fonts and nix.

Issues

If you have a ploblem, please open an issue on Issues.