Schriftpaarung
Font Pairing
Schlägt Paare aus Überschrift- und Fließtextschrift aus System-Font-Stacks vor, mit Vorschau in Ihrem eigenen Text – koreanisch wie lateinisch –, und liefert das CSS.
Zehn kuratierte Paarungen aus Überschrift und Fließtext, jede mit dem Grund, warum sie funktioniert, live gezeichnet, damit Sie Ihre eigenen Worte hineinsetzen können. Nichts wird abgerufen: Die Vorschau verwendet Schriften, die schon auf dem Rechner sind, und wenn eine Paarung eine verlangt, die nicht installiert ist, sagt die Seite, dass sie durch einen Fallback angenähert wird, statt Sie das Falsche beurteilen zu lassen.
10 Paarungen
Vorschau
읽기 쉬운 화면은 글꼴 두 개면 충분합니다
제목은 시선을 붙잡고 본문은 시선을 흘려보냅니다. 두 글꼴이 같은 x-높이를 가지면 같은 줄에 섞여도 크기가 튀지 않고, 획의 대비가 다르면 위계가 저절로 생깁니다. 웹폰트를 하나 줄일 때마다 첫 화면이 빨라진다는 것도 잊지 마세요.
Eine dieser Schriften ist hier vielleicht nicht installiert, dann springt eine Systemschrift derselben Kategorie ein. Das Original sieht anders aus.
Warum es funktioniert
Die koreanischste der Anordnungen mit Sans-Überschrift über Serifen-Text. Pretendards breite Formen und der geringe Strichkontrast halten in Überschriftgröße stand, und die weicheren Striche der Noto Serif ermüden das Auge über einen langen Text weniger. Ihre x-Höhen liegen dicht beieinander, eine Mischung in einer Zeile erzeugt also keinen Größensprung.
- Überschrift
- Pretendard Boldgithub.com/orioncactus/pretendard (OFL)
- Fließtext
- Noto Serif KRfonts.google.com/noto (OFL)
CSS
@font-face. Wenn Sie die Dateigröße stört, der Schrift-Subsetter schneidet sie zurecht. Und für das Größensystem baut die Typografie-Skala eines.So funktioniert es
Setzen Sie zuerst die Vorschausprache
Eine Paarung, die in lateinischer Schrift funktioniert, kann in Hangul auseinanderfallen, weil die beiden Schriftsysteme weder Proportionen noch eine Grundliniengewohnheit teilen. Ist das Produkt koreanisch, sehen Sie es sich auf Koreanisch an. Der Nur-Koreanisch-Filter engt die Liste auf die Paarungen ein, bei denen beide Schriften Hangul tatsächlich abdecken.
Setzen Sie Ihre eigene Überschrift und Ihren eigenen Fließtext ein
Die Beispielsätze sind absichtlich allgemein. Ihre echte Überschrift ist gewöhnlich kürzer und hat andere Buchstaben, und beides ändert, wie sich eine Paarung liest.
Lesen Sie die Begründung, nicht nur das Bild
Jede Paarung sagt, was sie zusammenhält – ein gemeinsames Skelett mit einem Kontrast im Gewicht, oder ein absichtlicher Zusammenstoß von Kategorien. Das ist der Teil, der sich auf eine Paarung überträgt, die Sie selbst erfinden.
Nehmen Sie das CSS, dann holen Sie die Schriften
Das CSS gibt die Familien, das Überschriftengewicht, die Laufweite und die Zeilenhöhe des Fließtexts. Die Schriften selbst kommen von der Quelle, die unter jeder Paarung genannt ist, und sie brauchen ein eigenes `@font-face`.
Häufige Fragen
Warum sagt die Vorschau, sie sei angenähert?
Weil diese Paarung eine Schrift nennt, die Ihr Rechner nicht hat, und kein Webfont heruntergeladen wird – die Seite fällt auf eine Systemschrift derselben Kategorie zurück. Die Proportionen stimmen ungefähr, und der Charakter stimmt nicht. Installieren Sie die Schrift, oder urteilen Sie nach dem Schriftmuster auf der Seite des Schriftenherstellers selbst, bevor Sie sich festlegen.
Warum nicht einfach die Webfonts laden?
Sie zu laden hieße eine Anfrage an ein Schriften-CDN für jeden Besucher dieser Seite, und das ist eine Tracking-Fläche, die einer Seite hinzugefügt würde, die keine hat, für eine Vorschau. Der Tausch ist bewusst: weniger genaue Vorschauen, kein Dritter in der Anfrage.
Gibt es eine „richtige“ Paarung?
Nein. Das sind zehn, die aus genannten Gründen zusammenhalten, und das ist etwas anderes als zehn, die für Ihr Produkt richtig sind. Die häufigste tatsächliche Antwort ist eine Familie in zwei Gewichten – das ist kein Mangel an Mut, es ist, was die meisten Oberflächen brauchen.
Eine koreanische Schrift macht die Seite viel schwerer. Was tue ich?
Subsetten Sie sie. Eine vollständige Hangul-Schrift trägt 11.172 Silben und ist gewöhnlich mehrere Megabyte groß; sie auf die KS-X-1001-Menge von 2.350 zuzuschneiden deckt weit über 99 % des alltäglichen koreanischen Textes ab und entfernt den größten Teil des Gewichts. Der Subsetter auf dieser Website macht das im Browser.
Eingabe aus
Typografie-Skala
Type Scale Generator
Baut aus Basisgröße und Verhältnis eine modulare Schrift- und Abstandsskala, exportiert als CSS oder Tokens.
Schrift-Inspektor
Font Inspector
Öffnet eine Schriftdatei und zeigt Glyphenabdeckung je Block, Anzahl koreanischer Silben, Strichstärke, variable Achsen, Einbettungsrechte und Lizenz-Namenseinträge.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Schrift-Inspektor
Font Inspector
Öffnet eine Schriftdatei und zeigt Glyphenabdeckung je Block, Anzahl koreanischer Silben, Strichstärke, variable Achsen, Einbettungsrechte und Lizenz-Namenseinträge.
Schrift-Subsetter
Font Subsetter
Reduziert eine TrueType-Schrift auf die Glyphen, die Ihr Text tatsächlich verwendet, und kann das Ergebnis als WOFF verpacken – der Unterschied zwischen einer 4-MB- und einer 90-KB-Webschrift für Koreanisch.
Typografie-Skala
Type Scale Generator
Baut aus Basisgröße und Verhältnis eine modulare Schrift- und Abstandsskala, exportiert als CSS oder Tokens.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Seitenverhältnis-Rechner
Aspect Ratio Calculator
Berechnet die fehlende Abmessung für ein Zielverhältnis und listet die Standardgrößen auf, die dazu passen.
Hintergrund entfernen
Background Remover
Stellt ein Motiv vor einfarbigem Hintergrund per OKLab-Keying frei – ohne Upload, komplett im Browser – und liefert ein transparentes PNG samt Pinsel zum Nachbessern der Kanten.