Nous concevons et travaillons avec des polices chaque jour. Mais nous n’avons jamais prêté attention à leur existence. Nous ne les avons pas bien utilisés, voire abusés. Tout cela est parce que nous ne les comprenons pas. La police est l’un des éléments importants de la typographie ; c’est aussi l’un des sujets les plus profonds du design. Dans cet article, discutons avec vous de ces connaissances approfondies.
Types de polices
Les polices anglaises (Typeface) sont divisées en plusieurs grandes catégories. Voici les connaissances de base que vous devez connaître lorsque vous utilisez des polices anglaises :
1. Serif
Serif est la partie décorative du bord du trait. La zone marquée en rouge dans l'image ci-dessous est l'empattement.
L'intention initiale de la conception serif est de marquer plus clairement les fins des traits, d'améliorer le taux de reconnaissance et d'augmenter la vitesse de lecture. De plus, l’utilisation de polices serif permettra aux gens de se sentir plus orthodoxes. Par conséquent, bon nombre de nos livres anglais courants, en particulier les essais et les romans, utilisent des polices serif pour compléter le texte.
Les empattements couramment utilisés dans la conception de sites Web incluent Times New Roman et Georgia. Le côté gauche de l’image ci-dessous est une police Times New Roman de 12 pixels et le côté droit est une police Georgia de 12 pixels.
En chinois, la police Song que nous utilisons est la police serif correspondante.
2. Sans-serif
Si une police n'a pas d'empattement, elle est appelée non-serif ou sans-serif. L'image ci-dessous est sans empattement.
Il existe relativement de nombreux sans-serifs couramment utilisés dans la conception de sites Web. Il existe Arial, Verdana, Tahoma, Helivetica, Calibri, etc. L'image ci-dessous montre Arial, Verdana et Tahoma de gauche à droite :
Il convient de noter que même si les polices serif sont largement utilisées dans les livres, les polices serif sont rarement utilisées sur Internet. Étant donné que la résolution de l'écran d'un ordinateur n'est pas comparable à celle des livres, les polices serif de 10 à 12 pixels dans le texte principal sont difficiles à lire sur l'écran de l'ordinateur. L'image ci-dessous est une comparaison de 10px Verdana et 10px Times New Roman sans Cleartype. Comme vous pouvez le constater, Verdana à gauche est facilement identifiable. Le Times New Roman à droite est assez difficile à lire.
3. Polices monospaces
Les polices monospaces sont en réalité uniquement destinées aux polices occidentales. Parce que les lettres anglaises varient en largeur. Par exemple, i est beaucoup plus étroit que m. Afficher le code lors de la programmation Si les lettres ne sont pas de même largeur, la mise en page sera moche. Dans la ligne de commande DOS, nous pouvons voir qu'une police à largeur fixe est utilisée.
Les polices à largeur constante requises pour la programmation ont les exigences suivantes :
1. Tous les caractères doivent être de largeur égale ;
2. Formes de caractères simples, claires et standardisées ;
3. Prise en charge des jeuxde
caractères étendus avec des codes ASCII supérieurs à 128 ;
(ASCII : 0 × 20) Même largeur que les autres caractères ;
5. Trois caractères tels que "1", "l" et "i" sont faciles à distinguer ;
6. Trois caractères tels que "0", "o" et " O" sont faciles à distinguer ;
7. Les parties avant et arrière des guillemets doubles et simples sont faciles à distinguer, et il est préférable d'être symétriques en miroir ;
8. Des signes de ponctuation clairs, en particulier des accolades, des crochets et des crochets.
Les polices à espacement fixe courantes incluent Courier et Courier New.
4. Calligraphie
Comme son nom l'indique, la calligraphie est une police de style écriture manuscrite. Parfois, nous l’appelons aussi police de calligraphie. La plupart des polices de calligraphie chinoise sont rigides. Personnellement, je recommande d’utiliser des polices de calligraphie japonaise. Les polices de calligraphie japonaise sont plus douces et plus humaines. Cependant, l’inconvénient de l’utilisation de polices de calligraphie japonaise est que la plupart d’entre elles sont en chinois traditionnel et que de nombreux caractères chinois sont manquants.
5. Symbole
Le corps de symbole le plus connu sous Windows est Webdings (je me souviens que je l'utilisais beaucoup lorsque j'étais encore sous Windows 95...). Voici quelques-unes des polices Webdings :
Styles de police :
les styles de police courants sont : Normal, Gras et Italique.
En termes simples, gras signifie que la police sera plus sombre et plus « épaisse ». L'italique signifie incliner légèrement l'axe du texte. Ils sont utilisés pour mettre en valeur un certain paragraphe de texte dans l'espace.
Quand on parle de gras, on peut facilement penser à la propriété font-weight en CSS. Nous savons qu'en plus du normal et du gras que nous utilisons habituellement, la valeur de l'attribut font-weight possède également des attributs tels que plus gras, plus clair, 100 ~ 900, etc. Alors, quelle est la valeur de 100 à 900 ? En fait, 100 à 900 n’a pas d’unité. Une bonne police fournira différents modèles pour différents poids. Si la police a des conceptions prédéfinies pour différents niveaux d'épaisseur, ces valeurs correspondront respectivement à chaque niveau. Par exemple, la police Zurich comprend six polices : Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black et Zurich UltraBlack. Ainsi, Zurich Light correspond aux trois valeurs 100, 200 et 300, Zurich Regular correspond à 400, ce qui est "normal", Zurich Medium correspond à 500 et Zurich Bold, qui est "gras", correspond à 600, 700, Zurich Black correspond à 800, et enfin Zurich UltraBlack correspond à 900.
L’italique chinois n’est généralement pas utilisé sur Internet. Étant donné que le chinois comporte de nombreux traits, l'utilisation de l'italique rendra la lecture difficile.
Unités
Nous utiliserons certaines unités dans notre conception Web :
1. Point (pt, point)
72 points = 1 pouce, 1 pouce équivaut à 72 points. De plus, 1 pica = 12 points
2. Pixel (pixel, px)
Un pixel est la plus petite unité d'image sur l'écran de l'ordinateur. En termes simples, c'est le plus petit point sur l'écran.
3. DPI, PPI
Le nom complet de DPI est Dots Per Inch, points par pouce, et le nom complet de PPI est Pixel Per Inch. Ce sont des unités de résolution. En d’autres termes, combien de points (pixels) peuvent être disposés sur une longueur de 1 pouce. Par exemple, en général, notre moniteur mesure environ 72 ppp, ce qui signifie qu'il y a 72 points (pixels) sur une longueur de 1 pouce. Plus le dpi/ppi est élevé, plus la résolution est élevée, c'est-à-dire que plus les particules sont petites, plus l'image est délicate. De manière générale, la résolution des photos est comprise entre 240 dpi et 300 dpi, c'est pourquoi les photos semblent beaucoup plus détaillées qu'elles ne le paraissent à l'écran. Les magazines sont imprimés à 133 ou 150 dpi, et les livres de haute qualité sont imprimés à 350-400 dpi, car la plupart des livres joliment imprimés sont imprimés entre 175 et 200 dpi. C’est pourquoi un texte de même taille physique est beaucoup plus clair lorsqu’il est affiché sur un livre que sur un écran. C’est pourquoi nous avons mentionné précédemment que les polices sans empattement pouvaient être utilisées avec audace dans l’impression de livres en anglais.
Il n'y a essentiellement aucune différence entre dpi et ppi. Si vous voulez vraiment trouver la différence, la seule différence est peut-être que dpi est souvent utilisé pour décrire les scanners et les imprimantes, tandis que ppi est souvent utilisé pour décrire la résolution de l'écran.
4. ex et x-height
sont souvent utilisés en CSS. 1ex = hauteur de la lettre minuscule x.
5. em
est souvent utilisé en CSS. Bien entendu, em ne représente pas la hauteur de la lettre minuscule m (en fait, la hauteur de la lettre minuscule m est généralement la même que la hauteur de la lettre minuscule x). 1em = 100 % de la taille de la police. est une unité multiple.
Espacement
1. Espacement des lignes (Line-height, Leading)
Lorsqu'il s'agit d'espacement des lignes (Line-height, Leading), nous devons d'abord apprendre un terme appelé ligne de base. Vous vous souvenez du livre quadrillé que nous utilisions pour écrire des lettres lorsque nous avons appris l'anglais pour la première fois ? La ligne horizontale la plus épaisse est ce que nous appelons la ligne de base. La ligne de base est la ligne au-dessus du descendeur de la police où la plupart des lettres « se trouvent ». Dans la plupart des polices, les lettres majuscules sont toujours placées près et au-dessus de la ligne de base. Les polices chinoises sont les mêmes que les majuscules anglaises. La ligne rouge dans l'image ci-dessous est la ligne de base.
Ensuite, l’espacement des lignes fait référence à la distance entre les lignes de base entre deux lignes adjacentes. L'unité d'interligne est souvent em, qui est définie en fonction de la taille de la police. Dans les navigateurs, il n’existe aucune directive concernant l’espacement des lignes par défaut. Selon les recommandations fournies par le W3C, l'interligne par défaut doit être compris entre 1,0em et 1,2em. En fait, lors de la définition de l'espacement des lignes, il existe un principe de composition selon lequel l'espace entre les lignes doit être plus grand que l'espace entre les mots, sinon les lecteurs «sérialiseront» facilement lors de la lecture, ce qui entraînera des difficultés de lecture. Un espacement des lignes suffisant peut séparer chaque ligne de texte, permettant ainsi à l'œil de distinguer plus facilement la ligne précédente ou suivante. Ces dernières années, la plupart des gens préfèrent un interligne de 1,5 em pour la mise en page du texte sur le Web, en particulier sur les sites Web chinois. Autrement dit, si une taille de police de 12 px est utilisée, les concepteurs préfèrent souvent un interligne de 18 px. 1,5em est en effet une bonne valeur d'expérience. En fait, la norme pour les journaux chinois est d’utiliser un interligne de 1,5em.
2. Espacement des lettres (Espacement des lettres, Suivi)
L'espacement des lettres fait référence à la distance entre un groupe de lettres. L'espacement des mots affecte la densité du texte dans une ligne ou un paragraphe.
3. Crénage
Le crénage est un processus technique réalisé pour des besoins visuels. En termes simples, lorsque deux caractères spécifiques sont alignés, vous pouvez spécifier individuellement un espacement de mots unique pour eux. Par exemple, lorsqu'un A majuscule est suivi d'un v minuscule, il y aura un espacement visuellement plus grand entre les deux caractères (en fait, l'espacement des mots est le même), ce qui ne peut pas être résolu par un espacement de caractères ordinaire. Si vous réduisez l’espacement entre elles, les autres lettres s’enchaîneront. À ce stade, un ajustement du crénage est nécessaire pour y remédier. L'image ci-dessous est un exemple d'application du crénage :
Paragraphe
1. Longueur de ligne (Mesure)
La longueur de ligne fait référence à la largeur d'un paragraphe de texte. Comme indiqué ci-dessous :
Il existe deux problèmes de lisibilité liés à la longueur des lignes :
plus la longueur des lignes est longue, plus l'espacement des lignes requis est grand. Si l'interligne est trop petit, les lecteurs se briseront facilement lors de la lecture. Si l’interligne est trop grand, les lecteurs auront l’impression que le texte est discontinu lors de la lecture des lignes.
Dans le texte principal, 40 à 70 lettres par ligne sont appropriées.
2. Alignement
Il existe essentiellement quatre types d'alignement de paragraphe : à gauche, à droite, centré et justifié.
L'alignement à gauche fait référence à une méthode d'alignement qui définit le contenu du texte, ajuste l'espacement horizontal du texte et aligne le texte du paragraphe ou de l'article vers la gauche dans la direction horizontale. L’alignement à gauche donne au texte sur le côté gauche de l’article un bord net. Dans le même temps, le côté droit du texte sera inégal. Par conséquent, l’alignement à gauche en anglais est également appelé Ragged Right, ce qui signifie que le côté droit a une apparence irrégulière. Il en va de même pour le bon alignement.
L'alignement central fait référence à une méthode d'alignement qui définit le contenu du texte et ajuste l'espacement horizontal du texte afin que le texte du paragraphe ou de l'article soit aligné horizontalement vers le milieu. L'alignement central rend le texte des deux côtés de l'article parfaitement concentré au milieu, de sorte que l'ensemble du paragraphe ou de l'article soit soigné.
L'alignement signifie définir les deux extrémités du contenu du texte et ajuster l'espacement horizontal du texte/des mots afin qu'ils soient. réparties uniformément sur les bords gauche et droit de la page entre les distances. Justifier donne des bords nets au texte des deux côtés.
Après avoir utilisé l'alignement aux deux extrémités, les lignes d'alignement des deux côtés seront très claires et la sensation « rapide » du bloc de texte sera également évidente. Cependant, dans la composition anglaise, lorsque la longueur des lignes est très courte, l'utilisation de l'alignement peut rendre l'espacement entre certaines lignes trop long et l'espacement entre certaines lignes trop court. Cet espacement inégal des mots ressemblera à une robe. avec des patchs partout.
3. Lisibilité
La lisibilité décrit la facilité et le confort de lecture d'un texte imprimé. En fait, c’est l’objectif le plus fondamental du design ordinaire. En plus des principes décrits ci-dessus, j'ai également rassemblé quelques petits principes de lisibilité à partager avec vous :
Utilisez au maximum trois tailles de police dans un design.
Utilisez jusqu'à trois polices sur un seul motif.
Il faut assurer un certain contraste, mais pas un contraste excessif. L’écriture Yang (caractères noirs sur fond blanc) est plus facile à lire que l’écriture Yin (caractères blancs sur fond noir). Sur le fond de #fff, le texte utilisant #333 semble plus confortable que le texte #000.
Faites attention à l'arrière-plan du texte. Le contexte doit être simple. Évitez les bruits de fond.
"Moins c'est plus" Utilisez le moins d'éléments pour transmettre le plus d'informations.
Faites ressembler votre lien à un lien.
Faites bon usage de votre espace.