Association de polices
Font Pairing
Propose des couples de polices titre et texte tirés des piles système, prévisualisés avec votre propre texte, et vous rend le CSS.
Dix associations titre/texte choisies avec soin, chacune accompagnée de la raison pour laquelle elle tient, dessinées en direct pour que vous y mettiez vos propres mots. Rien n’est téléchargé : l’aperçu se sert des polices déjà présentes sur la machine, et quand une association en appelle une qui n’est pas installée, la page dit qu’elle est approchée par une police de repli plutôt que de vous laisser juger la mauvaise chose.
10 associations
Aperçu
읽기 쉬운 화면은 글꼴 두 개면 충분합니다
제목은 시선을 붙잡고 본문은 시선을 흘려보냅니다. 두 글꼴이 같은 x-높이를 가지면 같은 줄에 섞여도 크기가 튀지 않고, 획의 대비가 다르면 위계가 저절로 생깁니다. 웹폰트를 하나 줄일 때마다 첫 화면이 빨라진다는 것도 잊지 마세요.
L’une de ces fontes n’est peut-être pas installée ici : une fonte système de la même catégorie la remplace. La vraie aura une autre allure.
Pourquoi ça marche
La plus coréenne des associations titre sans / texte avec empattements. Les formes larges et le faible contraste de trait de Pretendard tiennent en corps de titre, et les traits plus doux de Noto Serif fatiguent moins l’œil sur un texte long. Leurs hauteurs d’x sont proches : les mêler dans une même ligne ne produit pas de saut de taille.
- Titre
- Pretendard Boldgithub.com/orioncactus/pretendard (OFL)
- Texte
- Noto Serif KRfonts.google.com/noto (OFL)
CSS
@font-face. Si le poids du fichier vous inquiète, le sous-ensemble de police le réduit. Et pour le système de tailles, le générateur d’échelle typographique en construit un.Comment s’en servir
Réglez d’abord la langue de l’aperçu
Une association qui marche en alphabet latin peut s’effondrer en hangeul, parce que les deux écritures ne partagent ni les proportions ni les habitudes de ligne de base. Si le produit est coréen, regardez-le en coréen. Le filtre coréen réduit la liste aux associations où les deux caractères couvrent réellement le hangeul.
Mettez votre propre titre et votre propre texte
Les phrases d’exemple sont génériques exprès. Votre vrai titre est en général plus court et contient d’autres lettres, et l’un et l’autre changent la lecture d’une association.
Lisez la justification, pas seulement l’image
Chaque association dit ce qui la fait tenir : un squelette commun avec un contraste de graisse, ou un choc délibéré de catégories. C’est la partie qui se transfère à une association que vous inventez vous-même.
Prenez le CSS, puis allez chercher les polices
Le CSS donne les familles, la graisse du titre, l’approche et l’interlignage du texte. Les polices elles-mêmes viennent de la source nommée sous chaque association, et elles demandent un `@font-face` à vous.
Questions fréquentes
Pourquoi l’aperçu dit-il qu’il est approximatif ?
Parce que cette association nomme une police que votre machine n’a pas, et qu’aucune police web n’est téléchargée : la page retombe sur un caractère système de la même catégorie. Les proportions sont à peu près justes et la personnalité ne l’est pas. Installez la police, ou jugez sur le spécimen de la fonderie avant de vous engager.
Pourquoi ne pas simplement charger les polices web ?
Les charger voudrait dire une requête vers un CDN de polices pour chaque visiteur de cette page, c’est-à-dire une surface de pistage ajoutée à une page qui n’en a aucune, pour un aperçu. Le compromis est délibéré : moins d’aperçus fidèles, aucun tiers dans la requête.
Une association « correcte », est-ce que cela existe ?
Non. Ce sont dix associations qui tiennent pour des raisons énoncées, ce qui est différent de dix associations qui conviennent à votre produit. La réponse la plus fréquente en pratique est une seule famille à deux graisses — ce n’est pas un manque d’audace, c’est ce dont la plupart des interfaces ont besoin.
Une police coréenne alourdit beaucoup la page. Que faire ?
Réduisez-la à un sous-ensemble. Une police hangeul complète porte 11 172 syllabes et pèse souvent plusieurs mégaoctets ; la ramener au jeu KS X 1001 de 2 350 syllabes couvre bien plus de 99 % du coréen courant et enlève l’essentiel du poids. L’outil de sous-ensemble de ce site fait cela dans le navigateur.
À alimenter depuis
Générateur d’échelle typographique
Type Scale Generator
Construit une échelle modulaire de tailles de texte et d’espacements à partir d’une taille de base et d’un rapport, exportable en CSS ou en jetons.
Inspecteur de police
Font Inspector
Ouvre un fichier de police et montre la couverture de glyphes par bloc, le nombre de syllabes coréennes, les graisses, les axes variables, l’autorisation d’incorporation et les mentions de licence.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Inspecteur de police
Font Inspector
Ouvre un fichier de police et montre la couverture de glyphes par bloc, le nombre de syllabes coréennes, les graisses, les axes variables, l’autorisation d’incorporation et les mentions de licence.
Sous-ensemble de police
Font Subsetter
Réduit une police TrueType aux seuls glyphes que votre texte utilise vraiment et sait emballer le résultat en WOFF — la différence entre une police web de 4 Mo et de 90 ko.
Générateur d’échelle typographique
Type Scale Generator
Construit une échelle modulaire de tailles de texte et d’espacements à partir d’une taille de base et d’un rapport, exportable en CSS ou en jetons.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Calculateur de format d’image
Aspect Ratio Calculator
Trouve la dimension manquante pour un rapport visé et liste les tailles normalisées qui lui correspondent.
Supprimer l’arrière-plan
Background Remover
Détoure un fond uni ou d’une seule couleur dans l’espace OKLab et rend un PNG transparent, avec un pinceau pour reprendre les bords, sans envoi de fichier, tout dans votre navigateur.