Nous concevons des polices tous les jours. Mais nous ne nous sommes jamais sérieusement souciés de leur existence. Nous ne les avons pas bien utilisés ni même abusé. C'est tout parce que nous ne les connaissons pas. Les polices sont l'un des éléments importants de la composition; Dans cet article, discutons avec vous cette profonde connaissance. Type de police Les polices anglaises (police) sont divisées en plusieurs catégories majeures. 1. Serif Serif est la partie décorative des bords des coups. Le marquage rouge dans la figure ci-dessous est le Serif. L'intention d'origine de la conception de Serif est d'indiquer plus clairement la fin de la course, d'améliorer le taux de reconnaissance et d'améliorer la vitesse de lecture. De plus, l'utilisation des polices Serif fera que les gens se sentent plus orthodoxes. Par conséquent, bon nombre de nos livres d'anglais communs, en particulier les articles et les romans, utilisent des sérifs pour compléter le texte principal. Les Serifs couramment utilisés dans la conception Web sont des temps nouveaux Roman et Géorgie. Le côté gauche de l'image ci-dessous est la police romaine Times New avec 12px et le côté droit est la Géorgie avec 12px. En chinois, la police de la chanson que nous utilisons est la police Serif correspondante. 2. Sans-Serif / Sans-Serif Si la police n'est pas Serif, elle est appelée SSERIF ou SANS SERIF. Le chiffre suivant est un Sanserif. Il existe des SANS Serifs relativement plus courants utilisés dans la conception Web. Il y a Arial, Verdana, Tahoma, Helivetica, Calibri, etc. La figure suivante est Arial, Verdana et Tahoma de gauche à droite: Il convient de noter que, bien que les polices de Serif soient largement utilisées dans les livres, les polices Serif sont rarement utilisées sur Internet. Étant donné que la résolution de l'écran de l'ordinateur n'est pas comparable à celle des livres, il est difficile de reconnaître les polices Serif de 10 à 12px sur l'écran de l'ordinateur. L'image ci-dessous est une comparaison entre Verdana de 10px et Times New Roman de 10px sans ClearType. Vous pouvez constater que la Verdana à gauche peut être bien identifiée. Times New Roman à droite est assez difficile à identifier. 3. Monospace Les polices de monowidth ne sont en fait que pour les polices occidentales. Parce que la largeur des lettres anglaises varie. Par exemple, je suis beaucoup plus étroit que m. Lors de la programmation, le code s'affiche, si les lettres ne sont pas égales en largeur, la mise en page sera laide. Sur la ligne de commande DOS, nous pouvons voir que la police monospace est utilisée. Les polices de monospace requises pour la programmation ont les exigences suivantes: 1. Tous les caractères sont égaux en largeur; 2. Formes de caractère concises, claires et standardisées; 3. Prend en charge les jeux de caractères étendus avec le code ASCII de 128 ou plus; 4. Les caractères d'espace blanc (ASCII: 0 × 20) sont égaux à d'autres caractères; 5. Les trois personnages tels que "1", "L" et "I" sont faciles à distinguer; 6. Les trois caractères tels que "0", "O" et "O" sont faciles à distinguer; 7. Les parties avant et arrière de citations doubles et de citations simples sont faciles à distinguer, et il est préférable d'avoir un miroir symétrique; 8. Fonds de ponctuation claire, en particulier les accolades bouclées, les accolades rondes et les accolades carrés. Les polices communes en monospace comprennent le courrier, le courrier nouveau 4. Calligraphie Comme son nom l'indique, l'écriture manuscrite est une police de style d'écriture manuscrite. Parfois, nous appelons également cela des polices de calligraphie. La plupart des polices de calligraphie chinoises sont relativement raides. Je recommande personnellement d'utiliser des polices de calligraphie japonaises. Les polices de calligraphie japonaises sont plus douces et plus humaines. Cependant, l'inconvénient de l'utilisation des polices de calligraphie japonaise est que la plupart d'entre eux sont traditionnels et de nombreux caractères chinois manquent. 5. Symbole Le corps symbolique le plus célèbre de Windows est Webdings (je me souviens que j'ai adoré l'utiliser quand j'étais dans Windows 95 ...). Voici quelques polices Webdings: Style de police Les styles de police communs sont divisés en: normal, audacieux audacieux, italique. Autrement dit, Bold signifie que la police sera plus sombre et plus "épaisse". L'italique signifie légèrement l'inclinaison de l'axe du caractère. Ils sont tous utilisés pour souligner un certain paragraphe dans l'espace. Lorsque nous parlons de Bold, nous pouvons facilement associer l'attribut de poids de police dans CSS. Nous savons qu'en plus des utilisations normales et audacieuses, la valeur d'attribut de poids de police a également des propriétés telles que plus audacieuse, plus légère, 100 ~ 900. Alors, quelle est la valeur de 100 ~ 900? D'excellentes polices fourniront des conceptions différentes pour différents poids de police. Si la police a une conception intégrée d'épaisseur de différents niveaux à l'avance, ces valeurs correspondent respectivement à chaque niveau. Par exemple, les polices de Zurich comprennent six polices: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black et Zurich Ultrablack. De cette façon, Zurich Light correspond à trois valeurs: 100, 200 et 300, Zurich régulier correspond à 400, qui est "normal", le milieu Zurich correspond à 500, et Zurich Bold, qui est "Bold Bold" correspond à 600, 700, Zurich Black correspond à 800, et enfin, Zurich Ultrablack correspond à 900. Pour les italiques chinois, il n'est généralement pas utilisé sur Internet. Parce qu'il y a de nombreux accidents vasculaires cérébraux en chinois, il sera difficile d'identifier s'il est utilisé. unité Certaines unités seront utilisées dans notre conception Web: 1. Point (pt, point) 72 points = 1 pouce, 1 pouce est de 72 points. De plus, 1 pick-up (pica) = 12 points 2. Pixel (pixel, px) Un pixel est la plus petite unité d'image sur un écran d'ordinateur, et en termes profanes, c'est le plus petit point de l'écran. 3. DPI, PPI Le nom complet de DPI est des points par pouce, et le nom complet de PPI est de pixel par pouce. Ce sont des unités de résolution. C'est-à-dire combien de points (pixels) peuvent être disposés en longueur de 1 pouce. Par exemple, généralement, notre moniteur est d'environ 72 ppi, ce qui signifie 1 pouce de longueur, avec 72 points (pixels). Plus le DPI / PPI est élevé, plus la résolution est élevée, c'est-à-dire, plus les particules sont petites, plus l'image est délicate. D'une manière générale, la résolution d'une photo se situe entre 240 dpi et 300 dpi, alors pourquoi la photo semble-t-elle beaucoup plus détaillée qu'à l'écran? L'impression de magazines utilise 133 ou 150 dpi et les livres de haute qualité utilisent 350-400dpi, car les livres les plus imprimés utilisent 175 à 200 dpi lors de l'imprimé. Alors pourquoi est-il beaucoup plus clair de lire du texte de la même taille physique dans les livres que de lire à l'écran? Autrement dit, nous avons mentionné plus tôt, pourquoi pouvons-nous utiliser hardiment des polices sans-serif pour imprimer des 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 peut être que DPI est souvent utilisé pour décrire les scanners et les imprimantes, tandis que PPI décrit souvent la résolution de l'écran. 4.ex, X-Height Souvent utilisé dans CSS. 1Ex = la hauteur de la lettre minuscule x. 5.EM Souvent utilisé dans CSS. Bien sûr, 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. Ligne-hauteur, dirigeant En ce qui concerne l'espacement des lignes (hauteur de ligne, plomb), nous devons d'abord apprendre un terme appelé LASELINE. Vous souvenez-vous du livre de la grille de ligne que nous avons utilisé pour écrire des lettres lorsque nous avons appris l'anglais pour la première fois? La ligne de base est la ligne droite au-dessus de la partie descendante de la police que la plupart des lettres "s'assoient". La plupart des polices, des lettres majuscules collent toujours à la ligne de base et sont au-dessus de la ligne de base. Les polices chinoises sont les mêmes que celles des majuscules anglais. La ligne rouge dans la figure ci-dessous est la ligne de base. Ensuite, l'espacement des lignes fait référence à la distance entre deux lignes adjacentes et la ligne de base. L'unité d'espacement des lignes est souvent utilisée pour définir l'espacement des lignes en fonction de la taille de la police. Dans le navigateur, il n'y a pas de règle pour l'espacement de ligne par défaut. Plus avec les conseils fournis par W3C, il estime que l'espacement de ligne par défaut devrait se situer entre 1.0EM et 1.2EM. En fait, lors de l'espacement des lignes, il y a un principe de composition, c'est-à-dire que l'écart entre les lignes doit être plus grand que l'écart entre les mots. L'espacement des lignes adéquat peut séparer chaque ligne de texte, ce qui facilite la distinction des yeux pour distinguer la ligne précédente ou suivante. Ces dernières années, la plupart des gens aiment la disposition du texte principal sur le Web avec un espacement de ligne de 1.5EM, en particulier des sites Web chinois. Autrement dit, si une taille de police de 12px est utilisée, les concepteurs aiment souvent l'espacement des lignes 18px. 1.5EM est en effet une bonne valeur d'expérience. En fait, la spécification des articles chinois utilise également un espacement de ligne de 1.5EM. 2. Espace des lettres, suivi L'espacement des mots fait référence à la distance entre un groupe de lettres. L'espacement des caractères affecte la densité du texte dans une ligne ou un paragraphe. 3. Vérin Le kering est un traitement technique qui est fait en raison des besoins visuels. Autrement dit, lorsque deux caractères spécifiques sont disposés, vous pouvez spécifier séparément l'espacement des caractères uniques. Par exemple, lorsqu'une capitale A est suivie d'un V minuscule, un espacement visuellement plus grand apparaîtra entre les deux caractères (en fait, l'espacement des caractères est le même), qui ne peut pas être résolu par l'espacement ordinaire des caractères. S'ils sont réduits, les autres lettres seront connectées dans une balle. À l'heure actuelle, un réglage de la création est nécessaire pour le gérer. La figure suivante montre un exemple d'utilisation de Kerning: paragraphe 1. Président (mesure) La longueur de ligne fait référence à la largeur d'un paragraphe de texte. Comme indiqué ci-dessous: Il y a deux problèmes de lisibilité liés au président: Plus la longueur de la ligne est longue, plus l'espacement de la ligne est grand. L'espacement des lignes est trop petit, ce qui permet aux lecteurs de sérialiser facilement lors de la lecture de Newlines. L'espacement des lignes est trop grand et les lecteurs auront l'impression que le texte est discontinu lors de la lecture de la ligne. Dans le texte, il est conseillé d'avoir 40 à 70 lettres par ligne. 2. Alignement Il existe essentiellement quatre types d'alignement des paragraphes: à gauche (à gauche à gauche), à droite (à droite à droite), centrée (centrée) et justifiée. 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 en paragraphes ou articles à gauche dans la direction horizontale. L'alignement gauche donne le texte sur le côté gauche de l'article un bord soigné. En même temps, le côté droit du texte sera inégal. Par conséquent, l'alignement anglais sur la gauche est également appelé droite en lambeaux, ce qui signifie le côté droit avec des apparences inégales. L'alignement droit est le même. L'alignement du centre fait référence à une méthode d'alignement qui définit le contenu du texte, ajuste l'espacement horizontal du texte et rend le texte dans le paragraphe ou l'article s'aligner dans une direction horizontale au milieu. Alignez le centre afin que le texte des deux côtés de l'article soit soigneusement concentré au milieu, de sorte que l'ensemble du paragraphe ou de l'article est soigneusement organisé. L'alignement des deux extrémités signifie régler les deux extrémités du contenu du texte, ajustant l'espacement horizontal du texte / des mots, de sorte qu'il est réparti uniformément entre les marges de page gauche et droite. Alignez les deux extrémités pour que le texte des deux côtés ait des bords soignés. Après avoir utilisé les deux extrémités pour s'aligner, les lignes d'alignement des deux côtés seront claires et la sensation "rapide" des blocs de texte sera évidente. Cependant, en composition anglaise, lorsque la longueur de ligne est très courte, en utilisant les deux extrémités pour s'aligner, il peut faire des lignes avec un espacement trop long et des lignes avec un espacement trop court, donc l'espacement inégal sera très désordonné. de vêtements avec des patchs partout. 3. Facilité de lisibilité L'alphabétisation décrit la facilité et le confort de la lecture de texte typographique. En fait, c'est le but le plus fondamental de la conception ordinaire. En plus de certains des principes décrits ci-dessus, j'ai inclus quelques petits principes de lisibilité et partage avec vous: Une conception utilise jusqu'à trois tailles de police. Un maximum de trois polices sont utilisées dans une conception. Un certain contraste doit être assuré, mais il ne doit pas y avoir de contraste excessif. Le texte Yang (caractères noirs sur fond blanc) est plus facile à lire que le texte yin (caractères noirs sur fond noir). En arrière-plan de #FFFF, l'utilisation du texte # 333 semble plus confortable que le texte de # 000. Faites attention à l'arrière-plan du texte. L'arrière-plan doit être unique. Évitez le bruit de fond. "Moins c'est plus" utilise les moindres éléments pour transmettre le plus d'informations. Faites en sorte que votre lien ressemble à un lien. Faites bon usage de votre espace.