Source Han Serif : guide pratique d’intégration et d’optimisation d’une police chinoise open source

Le choix d’une police de caractères chinoise conditionne directement la lisibilité et la qualité perçue d’un contenu numérique ou imprimé. Source Han Serif, développée conjointement par Adobe et Google, propose une solution open source couvrant plus de 20 000 sinogrammes et offrant sept graisses modulaires. Sa licence libre et sa conception en sous-ensembles régionaux la rendent adaptée à la fois aux interfaces web et aux documents haute définition. Ce guide présente ses fondamentaux, son déploiement sur les principaux systèmes d’exploitation et les techniques d’optimisation de son rendu.

  1. Fondamentaux et atouts de Source Han Serif

Couverture de caractères et famille de graisses

Source Han Serif se distingue par trois caractéristiques techniques : une couverture étendue des jeux de caractères chinois (GB2312, GBK, GB18030), une palette de sept graisess allant de l’ExtraLight au Heavy, et un rendu cohérent entre écrans et sorties imprimées. La police est distribuée sous la licence SIL Open Font License, ce qui autorise son utilisation et sa modification dans des projets commerciaux sans frais de licence.

  • Économie : pas de redevance, même pour un usage commercial ou un produit distribué massivement.
  • Modularité : les fichiers sont fournis par région linguistique (CN, TW, JP, KR), ce qui permet de n’installer que le sous-ensemble nécessaire.
  • Mise à jour communautaire : le projet évolue via des contributions externes qui corrigent les glyphes et améliorent le hinting.
  1. Cas d’usage et sélection des graisses

Chaque graisse répond à une fontcion précise dans la hiérarchie d’un document. Limiter une page à deux ou trois graisses différentes garantit une lecture fluide.

Graisse Usage typique Taille recommandée
ExtraLight Titres élégants, bannières créatives 18–36 pt
Light Corps de texte longs sur écran 10–14 pt
Regular Documents administratifs et rapports 10–12 pt
Medium Accroches et mises en valeur modérées 11–13 pt
SemiBold Sous-titres et titres de section 14–18 pt
Bold Titres principaux et marques 16–24 pt
Heavy Affichages publicitaires, points focaux 24–48 pt

À titre d’exemple, un magazine technique peut utiliser Regular pour le corps du texte, SemiBold pour les titres de rubrique et Bold pour le nom de la couverture. Sur une page web e-commerce, Medium met en valeur les noms de produit, Heavy souligne les promotions et Light sert aux descriptions longues.

  1. Installation sur les environnements courants

Windows

  1. Téléchargez l’archive contenant les fichiers .ttf et ouvrez le dossier dédié à la version simplifiée chinoise.
  2. Sélectionnez les fichiers de police, faites un clic droit et choisissez Installer.
  3. Redémarrez les logiciels de conception ou de bureautique pour qu’ils prennent en compte les nouvelles polices.

macOS

  • Ouvrez le fichier .ttf dans l’aperçu, puis cliquez sur Installer la police.
  • Gérez les polices et créez des collections via l’application Livre de polices.
  • Dans les logiciels de création, spécifiez manuellement le chemin vers Source Han Serif pour éviter les conflits avec d’autres polices du même nom.

Linux

Une installation en espace utilisateur évite d’écrire dans les répertoires système et facilite les mises à jour :

# Création d’un répertoire dédié aux polices utilisateur
mkdir -p ~/.local/share/fonts/source-han-serif

# Copie des fichiers TTF chinois simplifié
cp ./TTF-CN/*.ttf ~/.local/share/fonts/source-han-serif/

# Actualisation du cache de fontconfig
fc-cache -f -v

# Vérification de la détection
fc-list : family | grep -i "Source Han Serif"

Si le rendu reste incorrect, vérifiez que le répertoire ~/.local/share/fonts est bien référencé dans la configuration de fontconfig.

  1. Optimisation pour le web et l’impression

Réduction du temps de chargement

Les fichiers de police chinoise sont volumineux ; il faut donc limiter le nombre de graisses chargées et préparer les ressources critiques.

  1. Préchargement du fichier critique dans l’en-tête HTML :
<link rel="preload" href="/assets/fonts/SourceHanSerifCN-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">

  1. Déclaration des graisses utilisées via @font-face :
@font-face {
  font-family: 'HanSerifCN';
  src: url('/assets/fonts/SourceHanSerifCN-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'HanSerifCN';
  src: url('/assets/fonts/SourceHanSerifCN-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

  1. Politique d’affichage : l’attribut font-display: swap évite le contenu invisible pendant le chargement.

Rendu écran versus rendu papier

  • Écran : activez l’anticrénelage, utilisez une taille de 14–16 px et un interligne de 1,5–1,6.
  • Impression : désactivez le lissage, préférez 10–12 pt et un interligne de 1,2–1,4.
  • Couleurs : travaillez en RGB pour le numérique et en CMYK pour l’imprimerie afin de conserver une reproduction fidèle.

En grand format, ajustez le crénage dans le panneau de caractères de votre logiciel de maquette pour corriger l’espacement des sinogrammes.

  1. Diagnostic et compatibilité

Procédure de dépannage en cinq étapes

  1. Intégrité du fichier : comparez sa taille et sa somme de contrôle avec le paquet source.
  2. Cache des polices : sur Linux ou macOS, lancez sudo fc-cache -fv.
  3. Redémarrage de l’application : certains outils ne lisent les polices qu’au lancement.
  4. Compatibilité du format : assurez-vous que le logiciel prend en charge le format TrueType.
  5. Droits d’accès : le fichier doit être lisible par l’utilisateur qui exécute l’application.

Compatibilité entre navigateurs

Le rendu varie selon les moteurs. Définissez une pile de polices de secours et normalisez le lissage :

:root {
  --font-serif-cn: 'Source Han Serif CN', 'Noto Serif SC', 'STSong', serif;
}

body {
  font-family: var(--font-serif-cn);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Mixte sinogrammes et latin

  • Utilisez la partie latine de Source Han Serif pour les mots anglais et les chiffres afin de conserver l’harmonie stylistique.
  • Ajoutez un léger espacement entre les blocs de langues : word-spacing ou letter-spacing selon le cas.
  • Activez la césure automatique pour les longues chaînes latines : hyphens: auto.

Certains navigateurs ne reconnaissent correctement que les graisses 400 et 700 ; en cas de flou, vérifiez que font-weight correspond à une graisse réellement chargée.

Étiquettes: Source Han Serif Noto Serif SC @font-face font-display CJK Typography

Publié le 2 août à 22h18