フォントの組み合わせ提案

Font Pairing

システムフォントスタックから見出し用と本文用の組み合わせを提案し、韓国語か英語のサンプルで見比べてからCSSを渡します。和文の見本はありません。

見出し用と本文用の組み合わせを10通り選び、それぞれになぜ成り立つのかを添えて、その場で描きます。自分の文章を入れて見比べられます。何も取りに行きません。プレビューにはすでに端末に入っている書体を使い、組み合わせが求める書体が入っていないときは、代替で近似していると明記します。違うものを見て判断させないためです。

🔒 ブラウザの中だけで動きますfonttypographypairing

プレビューの言語

ハングルに対応する組み合わせだけ

組み合わせ 10件

プレビュー

읽기 쉬운 화면은 글꼴 두 개면 충분합니다

제목은 시선을 붙잡고 본문은 시선을 흘려보냅니다. 두 글꼴이 같은 x-높이를 가지면 같은 줄에 섞여도 크기가 튀지 않고, 획의 대비가 다르면 위계가 저절로 생깁니다. 웹폰트를 하나 줄일 때마다 첫 화면이 빨라진다는 것도 잊지 마세요.

見出しの文本文の文

この組み合わせの書体がこの端末に入っていないことがあり、その場合は同じ系統のシステム書体で代わりに表示しています。本物とは見え方が変わります。

なぜ合うのか

サンセリフの見出しにセリフの本文という並べ方の中で、いちばん韓国的なものです。Pretendard の広い字幅と低い線の対比は見出しの大きさでも崩れず、Noto Serif の柔らかい線は長い本文で目が疲れにくくなります。x ハイトが近いので、同じ行に混ぜても大きさが跳ねません。

見出し: Pretendard Boldgithub.com/orioncactus/pretendard (OFL)
本文: Noto Serif KRfonts.google.com/noto (OFL)

CSS

h1, h2, h3 {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body {
  font-family: "Noto Serif KR", "Nanum Myeongjo", "Apple Myungjo", "Batang", serif;
  line-height: 1.8;
}

外部の書体は読み込みません。一覧の書体がこの端末に入っていればそれを使い、入っていなければ同じ系統のシステム書体で代わりに表示して、そのことを画面に書きます。実際に使うには、組み合わせの下にある入手先から書体を手に入れて @font-face で読み込みます。容量が気になるならフォントのサブセット化で小さくできます。文字サイズの体系はタイプスケール生成で作れます。

使い方

先にプレビューの言語を決めます
欧文で成り立つ組み合わせが、ハングルでは崩れることがあります。2つの文字体系はプロポーションもベースラインの習慣も共有していないからです。プロダクトが韓国語なら韓国語で見てください。ハングル対応のみの絞り込みを使うと、両方の書体が実際にハングルを収録している組み合わせだけが残ります。
自分の見出しと本文を入れます
用意された例文はわざと当たり障りのないものです。実際の見出しはたいていもっと短く、入っている文字も違い、そのどちらも組み合わせの読み味を変えます。
絵だけでなく理由も読みます
組み合わせごとに、何がそれをまとめているのかを書いてあります。骨格を共有したうえでウェイトで差を付けているのか、分類をあえてぶつけているのか。自分で組み合わせを考えるときに持ち越せるのはその部分です。
CSSを取ってから、書体を入手します
CSSはファミリー名、見出しのウェイト、字送り、本文の行の高さを渡します。書体そのものは各組み合わせの下に書いてある配布元から入手し、`@font-face`は自分で用意する必要があります。