Font Pairing
Suggests heading and body font pairs from system font stacks, previewed with your own Korean and English text, and hands you the CSS.
Ten curated heading-and-body pairings, each with the reason it works, drawn live so you can put your own words in them. Nothing is fetched: the preview uses fonts already on the machine, and when a pairing calls for one that is not installed the page says it is being approximated by a fallback rather than letting you judge the wrong thing.
10 pairings
Preview
읽기 쉬운 화면은 글꼴 두 개면 충분합니다
제목은 시선을 붙잡고 본문은 시선을 흘려보냅니다. 두 글꼴이 같은 x-높이를 가지면 같은 줄에 섞여도 크기가 튀지 않고, 획의 대비가 다르면 위계가 저절로 생깁니다. 웹폰트를 하나 줄일 때마다 첫 화면이 빨라진다는 것도 잊지 마세요.
One of these fonts may not be installed here, so a system face from the same category stands in for it. The real thing will look different.
Why it works
The most Korean of the sans-heading-over-serif-body arrangements. Pretendard’s wide letterforms and low stroke contrast hold up at heading size, and Noto Serif’s softer strokes tire the eye less over a long body. Their x-heights are close, so mixing them in one line does not produce a size jump.
- Heading
- Pretendard Boldgithub.com/orioncactus/pretendard (OFL)
- Body
- Noto Serif KRfonts.google.com/noto (OFL)
CSS
@font-face. If the size worries you, the subsetter will cut it down. For the size system, the type scale builds one.How to use it
Set the preview language first
A pairing that works in Latin can fall apart in Hangul, because the two scripts do not share proportions or a baseline habit. If the product is Korean, look at it in Korean. The Korean-only filter narrows the list to the pairings where both faces actually cover Hangul.
Put your own heading and body in
The sample sentences are generic on purpose. Your real heading is usually shorter and has different letters in it, and both change how a pairing reads.
Read the rationale, not just the picture
Each pairing says what makes it hold together — a shared skeleton with a contrast in weight, or a deliberate clash of categories. That is the part that transfers to a pairing you invent yourself.
Take the CSS, then go and get the fonts
The CSS gives the families, the heading weight, the tracking and the body line height. The fonts themselves come from the source named under each pairing, and they need an `@font-face` of your own.
Common questions
Why does the preview say it is approximate?
Because that pairing names a font your machine does not have, and no webfont is being downloaded — the page falls back to a system face in the same category. The proportions are roughly right and the personality is not. Install the font, or judge from the specimen on the foundry’s own page before committing.
Why not just load the webfonts?
Loading them would mean a request to a font CDN for every visitor of this page, which is a tracking surface added to a page that has none, for a preview. The trade is deliberate: fewer accurate previews, no third party in the request.
Is a "correct" pairing a thing?
No. These are ten that hold together for stated reasons, which is different from ten that are right for your product. The most common actual answer is one family at two weights — that is not a failure of nerve, it is what most interfaces need.
A Korean font makes the page much heavier. What do I do?
Subset it. A full Hangul font carries 11,172 syllables and is usually several megabytes; cutting it to the KS X 1001 set of 2,350 covers well over 99% of everyday Korean text and removes most of the weight. The subsetter on this site does that in the browser.
Feed it from
Type Scale Generator
Builds a modular type and spacing scale from a base size and ratio, exported as CSS or tokens.
Font Inspector
Opens a font file to show its glyph coverage by block, Korean syllable count, weight, variable axes, embedding permission and licence name records.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Next
These accept what this tool produces, so the result can go straight in.
Font Inspector
Opens a font file to show its glyph coverage by block, Korean syllable count, weight, variable axes, embedding permission and licence name records.
Font Subsetter
Cuts a TrueType font down to the glyphs your text actually uses and can wrap the result as WOFF — the difference between a 4 MB and a 90 KB Korean webfont.
Type Scale Generator
Builds a modular type and spacing scale from a base size and ratio, exported as CSS or tokens.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Aspect Ratio Calculator
Works out the missing dimension for a target ratio and lists the standard sizes it matches.
Background Remover
Keys out a flat or single-colour background in OKLab and returns a transparent PNG, with a brush for fixing the edges.