L'un des problèmes de conception les plus courants est le problème avec .

Dans cet article, nous aborderons quelques principes d'une bonne typographie et vous donnerons des conseils pour éviter de nombreuses erreurs courantes.

L'article n'est pas un livre sur la typographie ou l'art de la typographie, il s'agit plutôt de "conseils rapides pour améliorer la base typographique de la conception".

Règle 1 : Moins il y a de polices, mieux c'est

Un des plus grosses erreurs ce que font les designers, c'est d'utiliser trop de polices et/ou leurs styles. Essayez de les limiter à deux ou trois. Autrement dit, le corps du texte doit être de la même police et de la même taille.

Choisissez-en un pour les titres et respectez-le, peut-être un de plus pour les sous-titres en dernier recours. N'ayez pas peur si les polices sont très différentes les unes des autres. Lorsque vous utilisez deux polices très similaires dans une conception, le lecteur peut penser que vous venez de faire une erreur et que vous avez accidentellement choisi la mauvaise police lors de la frappe.

Prendre soin de l'unité de couleur, de la densité, etc. ou votre texte ressemblera à des mouches ivres dispersées sur toute la page.

Règle 2

Attention à ne pas trop encombrer les lettres. Si vous rencontrez des problèmes d'espace insuffisant pour le texte, il est préférable de réduire la police. Oui, cela ajoutera probablement de l'espace entre les paragraphes, mais ce n'est pas grave, cela vous donnera un peu de répit lors de la lecture.

Règle 3. Alignement correct

Veuillez ne pas tout centrer (sauf s'il s'agit d'un mouvement de conception spécial). Pensez à utiliser une grille. Après tout, tout sur la page est interconnecté. Utilisez des guides et placez les objets en fonction de ceux-ci. Ne dispersez pas les objets dans les coins de la page comme si vous ne pouviez pas décider où les placer.

Règle 4. Polices moins décoratives

Avez-vous de belles polices décoratives? Formidable! Mais cela ne signifie pas du tout qu'il soit nécessaire de les utiliser pour le texte des paragraphes. Derrière les polices décoratives, il y a le plus souvent une histoire ou elles sont utilisées dans un cas précis, par exemple pour un titre ou un titre. Souvent, plus c'est simple, mieux c'est, c'est pourquoi les polices comme Helvetica sont si populaires.

Règle 5. La taille compte

C'est à peu près la taille des lettres du texte ;). Les titres sont bien quand ils sont en gras et en gros caractères, mais si vous utilisez des lettres trop grosses dans le corps du texte, cela le rendra moins cher. Pensez-y. Vous allez dans un bon restaurant et il arrive souvent que le menu soit écrit en petits caractères, ça a l'air cool. (Assurez-vous simplement que la police n'est pas si petite qu'elle est difficile à lire.) N'ayez pas peur de faire des titres beaucoup plus gros que le corps du texte.

Règle 6

Tout ce que vous faites est fait pour qu'il puisse être lu. Un texte sombre sur un fond sombre n'est pas une bonne idée. Pire encore, mettre un petit texte sur une photo très contrastée. N'oubliez pas d'éviter de placer du texte sur quoi que ce soit.

Règle 7. Choisissez les bonnes couleurs

Quelle est la meilleure couleur pour une police ? Généralement, croyez-le ou non, le noir ou le blanc est souvent le meilleur. Si vous utilisez une couleur autre que différentes nuances de gris, réduisez la saturation. Une police aux couleurs vives peut être difficile à lire. Méfiez-vous des combinaisons vibrantes complexes telles que le rouge sur le vert.

Règle 8. Regroupement approprié

Les éléments d'information connexes sont mieux combinés ensemble. Cela rendra la conception plus claire. Par exemple : regardez une affiche de film, toutes les données sont regroupées en blocs attractifs. Ils peuvent maintenant être considérés comme un élément de conception distinct. Exemples de mauvais regroupement - ouvrez les pages jaunes.

Règle 9. Initiation suffisante

Il s'agit de la distance entre les lignes de texte. Il est très important de choisir le bon intervalle. C'est beaucoup plus agréable à lire quand il y a une place pour que les yeux se reposent entre les lignes. En règle générale, essayez d'utiliser au moins 2 points de plus que la taille de la police. Par exemple : pour une lisibilité maximale à 10 pt, la police doit être définie sur au moins 12 pt.

Règle 10. Attention au crénage

Le crénage est l'espacement entre les caractères individuels d'un mot. Il est important d'avoir de l'expérience dans l'identification d'un mauvais crénage, car souvent des programmes tels que Photoshop, par exemple, font des erreurs en l'arrangeant. Cela devra être ajusté manuellement, mais l'essentiel est de ne pas en faire trop. Si vous n'aimez pas l'espacement des caractères mais que vous ne savez pas comment l'améliorer, choisissez une police différente.

Essayez d'appliquer ces règles lorsque vous travaillez avec une police. Les blocs de type bien conçus doivent être beaux sans aucune image. Au mieux, votre typographie renforce l'impression positive du design. Il doit être attrayant et facile à lire.

La communication joue un rôle énorme dans le design. Il est très important de créer un lien fort entre le site Web et l'utilisateur lui-même, puis de l'aider à atteindre ses objectifs. Lorsque nous parlons de communication dans le contexte de la conception Web, nous parlons généralement de texte. La typographie fait partie intégrante de ce processus :

Plus de 95 % des informations sur Internet sont stockées par écrit.

Une bonne typographie consiste à rendre les informations facilement accessibles, tandis qu'une mauvaise typographie demande des efforts pour comprendre le texte. Comme le souligne Oliver Reichenstein dans l'article « Le design web c'est 95% de typographie » :

L'optimisation de la typographie consiste à optimiser la lisibilité, l'accessibilité, la convivialité (!) et à atteindre l'équilibre graphique en général.

1. Utilisez le nombre minimum de polices

Lorsque vous utilisez plus de 3 polices différentes, votre site Web perd sa structure et ne semble pas professionnel. N'oubliez pas qu'une utilisation excessive de la taille et du style de police peut ruiner tout balisage.

Pour éviter cette situation, essayez de limiter au minimum le nombre de polices utilisées.

En général, limitez le nombre de polices au minimum (deux suffisent amplement, une seule suffit souvent) et respectez les mêmes polices sur l'ensemble du site Web. Si vous choisissez de travailler avec plusieurs polices, assurez-vous que les familles de polices s'emboîtent en termes de largeur de lettre. Jetez un oeil à l'exemple ci-dessous. La combinaison de Georgia et Verdana (à gauche) a Caractéristiques générales ce qui leur permet de s'harmoniser les uns avec les autres. Prenons pour comparaison la combinaison de Baskerville et Impact (à droite). "Heavyweight" Impact supprime son partenaire "notch".

Assurez-vous que les familles de polices s'emboîtent en termes de largeur de lettre

2. Essayez d'utiliser des polices standard

Les services de polices (comme Google Web Fonts ou Typekit) ont beaucoup de choses intéressantes qui ajouteront quelque chose de nouveau et de différent à votre conception. De plus, ils sont très faciles à utiliser. Prenons Google par exemple :

1. Choisissez n'importe quelle police. Disons Open Sans .
2. Générez du code et collez-le dans

Votre HTML.
3. C'est fait !

Mais qu'est-ce qui peut mal tourner ?

En fait, cette méthode présente un sérieux problème : les utilisateurs sont habitués aux polices standard et lisent plus rapidement le texte écrit dans ces polices.

Généralement, la meilleure solution consiste à utiliser des polices système (Arial, Calibri, Trebuchet, etc.). Une exception peut être la nécessité de s'en tenir à certaines polices que le client lui-même a spécifiées : par exemple, pour la marque ou pour créer quelque chose de mémorable. N'oubliez pas qu'une bonne typographie affecte la lecture du texte, pas la perception visuelle de la police.

3. Limitez la longueur de la chaîne

Le bon nombre de caractères par ligne est la clé pour rendre votre texte facile à lire. Lorsque vous choisissez la largeur du texte, vous ne devez pas vous concentrer sur votre conception, mais sur la clarté et la clarté de l'écrit. Découvrez cette astuce de l'Institut Baymard :

« Si vous voulez que votre lecteur soit à l'aise, chaque ligne ne doit pas dépasser 60 caractères. Choisir le bon nombre de caractères par ligne est la clé pour rendre votre texte facile à lire.

Si la ligne est trop courte, les yeux devront changer de focale fréquemment, ce qui ralentira le rythme de lecture. Si la ligne est trop longue, les yeux du lecteur, au contraire, devront se focaliser longtemps sur ce qui est écrit. Photo : Conception matérielle

Pour les appareils mobiles, respectez une plage de 30 à 40 caractères par ligne. Ci-dessous un exemple de deux sites ouverts sur appareils mobiles. Sur une ligne contient de 50 à 75 caractères (le meilleur nombre de caractères par ligne pour le texte imprimé et la résolution de l'ordinateur), et sur la seconde, nous voyons les 30 à 40 caractères optimaux.

Dans la conception Web, vous pouvez atteindre le nombre de caractères requis en réduisant la largeur des blocs de texte à l'aide d'ems ou de pixels.

4. Choisissez des polices de caractères qui se lisent bien à n'importe quelle taille.

Les utilisateurs accéderont à votre site à partir de différents appareils, qui, par conséquent, ont des tailles et des résolutions différentes. Majorité Les interfaces des utilisateurs utiliser des éléments de texte de différentes tailles (le bouton « copier », les libellés des champs, les en-têtes de section, etc.). Vous devez choisir une police de caractères qui aura fière allure et sera lisible à n'importe quelle taille.

Roboto de Google

Assurez-vous que la police de caractères que vous choisissez est facile à lire sur les petits écrans ! Essayez de ne pas utiliser de polices italiques comme Vivaldi (photo ci-dessous) : bien qu'elles soient jolies, elles peuvent parfois être difficiles à comprendre.

L'utilisation de la police Vivaldi rendra le texte difficile à lire sur un petit écran

5. Utilisez des polices avec des lettres claires

De nombreuses polices de caractères sont conçues de telle manière qu'il est parfois très facile de confondre des lettres similaires, en particulier "I" et "L", écrites en latin (comme dans l'image ci-dessous). Dans certains, les lettres sont si proches les unes des autres que la combinaison de "r" et "n" peut être confondue avec la lettre "m". Par conséquent, lorsque vous choisissez une police, testez-la dans différents contextes. De cette façon, vous pouvez vous assurer que le lecteur n'aura pas de problèmes pour comprendre le texte en raison de la police de caractères.

6. Évitez les majuscules

Le texte écrit en majuscules - ou tout en majuscules - convient aux situations où l'utilisateur n'est pas impliqué dans le processus de lecture (par exemple, dans les abréviations ou les logos). Mais sinon, ne forcez pas vos lecteurs avec du texte tout en majuscules. Comme le note Miles Tinker dans son ouvrage bien connu Lisibility of Print, un tel texte se lit beaucoup plus lentement qu'un texte en minuscules.

7. Ne minimisez pas l'espacement des lignes

En typographie, il existe un terme spécial pour l'espacement entre les lignes - interlignage (ou interligne). En augmentant l'interligne, vous augmentez l'espace vertical entre les lignes, améliorant ainsi la lisibilité du texte à l'écran. Selon les règles, pour assurer la lisibilité du texte, l'interlignage doit être environ 30 % plus grand que la hauteur du caractère.

Un interligne correct contribue à une meilleure lisibilité du texte. Photo : Microsoft

Selon Dmitry Fadeev, le bon espacement entre les paragraphes augmente la compréhension en lecture de 20 %. La capacité du concepteur à travailler avec des espaces blancs permet aux utilisateurs d'assimiler le contenu du texte dans son intégralité sans manquer aucun détail.

A gauche : Le texte est écrit presque côte à côte. À droite : un interligne correct contribue à la lisibilité du texte. Photo : Pomme

8. Assurez-vous que vous êtes d'accord avec le contraste des couleurs

N'utilisez pas des couleurs identiques ou similaires pour le texte et l'arrière-plan. Plus le texte est visible, plus les utilisateurs pourront le lire rapidement et saisir les points principaux. Consortium World Wide Web conseille d'utiliser le rapport suivant pour le corps du texte et le texte de l'image :

• Le petit texte doit avoir un rapport de contraste d'au moins 4,5:1 par rapport à l'arrière-plan.
• Les gros textes (taille 14 gras/taille 18 et plus standard) doivent avoir un rapport de contraste d'au moins 3:1 par rapport à l'arrière-plan.

Ce texte n'est pas standard contraste des couleurs, il est donc difficile de le distinguer sur le fond.

Ce texte est conforme à la norme de contraste des couleurs, il est donc facile à lire.

Quand tu as choisi Schéma de couleur, vous devez donner votre texte à lire par de vrais utilisateurs et de préférence sur plusieurs différents appareils. Si, lors des tests, des difficultés de reconnaissance de texte sont révélées, vous pouvez être sûr qu'à l'avenir, de nombreux utilisateurs rencontreront le même problème.

9. Essayez de ne pas utiliser de rouge ou de vert dans votre texte.

Le daltonisme est un phénomène assez courant, notamment chez les hommes (8% de la population masculine est daltonienne). Par conséquent, en plus de la couleur, il est conseillé d'utiliser d'autres signes pour mettre en évidence une information important. Aussi, essayez de ne pas recourir au rouge et au vert, car ce sont les couleurs les plus souvent non reconnues par les daltoniens.

10. Essayez de ne pas utiliser de texte clignotant

Les informations qui clignotent ou scintillent peuvent gêner les utilisateurs sensibles. En plus d'être malade, cela peut également irriter de nombreux lecteurs, car cela les distraira du processus de lecture.

N'utilisez pas de texte clignotant !

Conclusion

La typographie est une chose très importante. Action bon choix, vous dotez le site de clarté et de clarté. Dans le même temps, le mauvais choix peut conduire à une lecture inattentive du texte, car il détourne toute l'attention sur lui-même. La typographie doit être lisible, claire et compréhensible.

La typographie doit être respectueuse du contenu

Cela implique que le lecteur ne doit jamais ressentir d'inconfort lors de la lecture du texte.

Pour dissiper la confusion qui peut survenir, il est nécessaire de clarifier immédiatement le sens de certains termes clés. Premier ensemble important mots clés définir les concepts de "police" et "police de caractères".

Une police est un ensemble de caractères d'une taille et d'un motif spécifiques. La police de caractères définit les familles de styles de police de la même manière.Le mot clé ici est les styles, qui séparent les différentes polices en groupes ou familles. Par exemple, il peut être serif, sans-serif, manuscrit, display, monospace et autres. On peut dire qu'une police de caractères est un ensemble de polices de styles et de tailles différents, unies par un style d'exécution commun. Comme vous pouvez le voir, la police est un concept plus étroit.

Lors de la conception d'une mise en page Web, la sélection de la police est très importante. Naturellement, il est préférable d'utiliser des polices de l'ensemble standard de Windows ou Mac. Mais parfois, cet ensemble ne suffit pas à donner vie à l'idée du concepteur, puis toute la charge retombe sur les épaules du maquettiste. Heureusement, Polices Web Google offre une solution très élégante à ce problème.

Il existe également des termes tels que "poids" et crénage. Tous peuvent être modifiés avec CSS et appliqués aux paragraphes, en-têtes ou autres éléments de texte. La propriété "weight" de la police détermine l'épaisseur des lignes lorsqu'elles sont dessinées. Il s'agit d'une plage de valeurs allant de 100 à 900, où chaque chiffre indique un poids correspondant au poids de la police. La police normale "normal" correspond au nombre 400, gras "gras" - 700. Crénage - modification de l'espacement entre les lettres en fonction de leur forme. C'est le processus de placer les symboles correctement, en ajustant les distances entre eux, afin d'atteindre l'harmonie. Bien que beaucoup ne prêtent pas beaucoup d'attention au crénage, ce sont les petites choses qui aident à obtenir de très bons résultats.

Ne pas respecter les règles

Il serait raisonnable de discuter de la nécessité de créer de nouvelles polices. Récemment, de nombreux sites Web sont devenus obsolètes. Ils utilisent des polices standard, dont nous sommes déjà assez fatigués.

Aujourd'hui, il existe des centaines de polices, mais différentes SE proposent leurs propres forfaits. Et seules quelques-unes des polices sont incluses dans ces packages. Si vous sélectionnez une police que quelqu'un dans le système n'a peut-être pas, la police sera remplacée par la police par défaut. Pour ces raisons, il est recommandé d'utiliser des polices de base. Mais parfois, les polices de base ne peuvent pas capturer pleinement l'imagination du concepteur. Par conséquent, si vous êtes sûr qu'une police personnalisée est nécessaire pour votre conception, vous pouvez transformer votre police personnalisée en image et la télécharger sur votre site. Rendez graphiques vos en-têtes, en-têtes ou menus et utilisez-les.

Assurez-vous que les titres correspondent aux sujets du site. Ils peuvent inclure différentes couleurs, un soulignement, des icônes d'arrière-plan ou du texte graphique. En fin de compte, la décision vous appartient.

De plus, vous devez vous assurer que tous les liens texte ont la même police sur le site. L'utilisation de liens de polices et de conceptions différentes donnera à l'utilisateur des difficultés de navigation importantes.

Choisir la bonne police

Il convient également de noter que différentes polices de caractères peuvent affecter l'humeur des lecteurs de différentes manières. En règle générale, les polices avec empattement conviennent mieux aux documents imprimés. Les empattements aident à créer un espace entre les lettres et à séparer un caractère d'un autre. Souvent, les polices avec empattement donnent un sentiment de personnalité, de respect, d'intelligence et de professionnalisme.

Les polices sans empattement conviennent mieux aux pages Web. Les écrans à faible résolution rendent les empattements flous et, à leur tour, mal perçus. Les polices sans empattement ont tendance à exprimer des sentiments de rationalité, de style, de jeunesse et de modernité.

Par exemple, le choix des empattements donne un sentiment de professionnalisme et d'informations faisant autorité. Vous pouvez souvent le voir dans les médias grand public comme le New York Times. Les petits blogs peuvent utiliser une police sans empattement avec une grande hauteur de ligne. Cela donne aux utilisateurs la possibilité de visualiser rapidement le texte du blog.

Vous devez toujours penser aux informations que vous essayez de transmettre au visiteur. Lorsque vous choisissez une police, gardez à l'esprit que les messages heureux doivent être accompagnés de formes de police claires, aérées et douces, tandis que les messages avec des thèmes plus sombres, tels que Halloween, seraient mieux accompagnés de polices à bords durs.

lisibilité

La typographie, et le plus souvent simplement illisible, peut faire très mal aux yeux. Il y a, bien sûr, quelques exceptions lorsque Funky ou d'autres polices illisibles peuvent être utilisées, comme pour les promotions de boîtes de nuit.

Mais encore, si vous avez envie d'utiliser, par exemple, Soda, Bored ou Akka, alors il vaut mieux refuser cette idée. Si le désir est encore assez fort, alors ces polices doivent être utilisées avec parcimonie. Par exemple, comme titre. Mais alors le corps du texte devrait être plus lisible. Cela peut aider à créer une dynamique dans votre site. Et n'oubliez pas que l'utilisation de telles polices devrait être un avantage de conception, pas un inconvénient.

informatif

Le design doit compléter vos informations. L'utilisateur n'a pas besoin de comprendre exactement ce que le concepteur avait en tête. Le mauvais choix de typographie peut contribuer à l'idée fausse de l'utilisateur sur l'entreprise et ses services.

Dans la conception de projets professionnels, vous devez principalement utiliser des polices lisses traditionnelles. Ceci doit être pris en compte même si vous n'avez pas de design officiel. Surtout si vous voulez que les gens prennent votre site au sérieux.

Emplacement et dimensions

C'est très important pour une conception efficace - où vous devez placer le texte et sa taille. Personne ne veut se fatiguer les yeux pour lire des informations ou voir des mots incroyablement énormes sur un site. Le but de créer bon design est de trouver un équilibre. Et la première étape consiste à déterminer quelles informations seront les plus importantes.

En règle générale, les mots qui nécessitent de l'attention doivent être traités un peu plus. Ou vice versa - insignifiant devrait être plus petit. Tout dépend de l'importance. En d'autres termes, vous devez créer une hiérarchie de mots.

En ce qui concerne le placement des polices, essayez de le garder équilibré. Pas besoin de disperser des morceaux de texte aux quatre coins. Cela peut considérablement distraire les utilisateurs.

Couleur

C'est l'un des aspects les plus faciles. Vous devez choisir une couleur avec laquelle le texte se démarquera de l'arrière-plan et restera lisible.

Vos assistants seront des couleurs contrastées, ainsi que l'utilisation d'effets tels que les traits (course) et les lueurs (lueur). Cela contribuera à rendre le site plus attrayant et plus facile à lire. Vous devez choisir une couleur qui incitera les gens à s'arrêter et à regarder, et faire de l'information la partie dominante du design.

Conclusion

L'utilisation de polices dans Photoshop est très différente de leur utilisation dans des pages Web. Cela explique pourquoi la typographie est si difficile à travailler pour certains designers. La typographie sur le web est un sujet vaste et demande beaucoup de recherches. Vous devez toujours vous rappeler qu'il est très important de trouver une approche d'utilisation de la typographie qui corresponde à l'ambiance et à l'esthétique du design. N'ayez pas peur de mélanger et assortir différents types polices, assurez-vous simplement qu'ils ont de la chance.

Typographie joue un rôle clé dans la conception Web, selon les statistiques, 95% du contenu du site Web est du contenu textuel. La conception des polices contrôle l'ambiance et crée une certaine atmosphère lors de la lecture du contenu textuel des pages Web.

La typographie Web moderne est basée sur les styles CSS. En modifiant les valeurs de style de navigateur par défaut, vous pouvez rendre le contenu textuel plus attrayant.

Cet article couvrira les principaux aspects de la typographie Web moderne, ce qui vous aidera à décider lors du choix d'une police et d'un style de texte.

Propriétés CSS pour une typographie Web appropriée

1. Famille de polices (propriété font-family)

La sélection de la police commence par le choix d'une police de caractères.

Casque- une police ou plusieurs polices qui ont une unité stylistique de style. Il est constitué d'un ensemble de caractères (généralement des chiffres, des lettres, des signes de ponctuation, des caractères spéciaux, mais il peut également être constitué exclusivement de caractères non alphabétiques). Par exemple, la police de caractères Times New Roman se compose de polices régulières, italiques, grasses et de nombreuses autres polices de cette famille.

Les casques peuvent être divisés en deux catégories principales : empattement(polices antiqua et carrées) et sans empattement(grotesques).

Les polices sans empattement ont un caractère simple et clair apparence. Les polices Serif, en revanche, donnent un ton plus sérieux et formel.

Au cours de la lecture, les yeux s'habituent à la police principale et ils se fatiguent si les titres, la table des matières et le texte secondaire sont tapés dans des polices d'une police différente qui ne s'harmonise pas avec la police principale. Par conséquent, lors du choix des polices, il suffit de s'arrêter à une ou deux polices et de placer des accents en raison de la taille, de la couleur, du style, etc.

Quand plusieurs polices peuvent-elles être utilisées :

• Il n'y a pas de styles spéciaux dans la police de caractères (gras, gras, italique) ;
• Il est nécessaire d'atteindre une similitude avec une certaine époque;
• Pour la séparation visuelle de textes de plusieurs types (par exemple, commentaires dans le texte, lignes de code, formules, textes dans une autre langue) ;
• A des fins esthétiques.

Service TypeTester pour la sélection de polices

2. Combinaison de polices serif et sans serif

Il existe une règle tacite dans les recommandations de combinaison de polices : la police sans empattement est choisie pour les titres et la police avec empattement est utilisée pour le corps du texte. Cependant, cette approche n'est pas aussi populaire qu'il y paraît.

En fait, cette règle s'applique principalement aux publications imprimées, à l'impression de livres. Cela est dû au fait qu'une police serif (petits traits aux extrémités des traits principaux) s'aligne en douceur sur une ligne, ce qui rend le texte plus facile à lire et plus lisible.

La situation est différente avec l'affichage de texte par écrans. divers appareils. Il y a un problème de lissage et d'empattements inégaux. Par conséquent, une police sans empattement avec une hauteur légèrement augmentée de caractères minuscules est mieux adaptée au corps du texte.

3. Couleur de police (propriété de couleur)

La couleur donne au texte clarté et expressivité. Les en-têtes colorés et les petits accents dans le texte peuvent attirer davantage l'attention que le texte noir.

Cependant, n'oubliez pas que toute couleur porte en elle sa propre humeur et que chaque personne a des sentiments personnels que telle ou telle couleur évoque en elle.

Une couleur chaude attire activement l'attention sur le texte, ce qui le rend visuellement plus grand qu'une police de taille similaire dans des tons froids. Pour les petits éléments de texte, des couleurs plus vives conviennent, le contenu latéral de la page peut être mis en évidence à l'aide d'une couleur 20 à 30 % plus claire que la couleur du texte du contenu principal de la page Web.

Lors du choix du nombre de couleurs de texte, il est préférable de se limiter à deux couleurs suffisamment contrastées (sans compter le noir et le blanc). Le texte noir sur fond blanc est un classique très contrasté.

4. Taille de la police (propriété font-size)

La taille de police de base du navigateur est de 16 pixels et les titres sont définis proportionnellement à la taille de police de base (h1 - 2em, h2 - 1.5em, h3 - 1.17em, etc.).

En faisant varier la taille de la police, vous pouvez donner une signification visuelle au texte et attirer l'attention des visiteurs sur les éléments de texte les plus importants. En règle générale, plus l'élément est grand, plus il est important.

La taille du texte dans la fenêtre du navigateur est affectée par la résolution du moniteur de l'utilisateur : le texte a la même taille sur le moniteur avec haute résolution apparaît plus petit qu'un texte de même taille sur un moniteur de résolution inférieure.

Les polices de différentes familles de la même taille peuvent également avoir des tailles réelles différentes.

Avec la croissance des résolutions d'écran et des tailles de moniteur, il est nécessaire de reconsidérer la taille de texte habituelle de 12-14px. Pour le texte brut, une police 14-18px est déjà largement utilisée. Lors du réglage de la taille de la police, il ne faut pas oublier l'adaptabilité, c'est-à-dire la taille de la police doit changer en fonction de la taille de l'écran.

5. Alignement du texte (propriété text-align)

Le texte justifié a fière allure sur une page imprimée en répartissant les mots uniformément sur les lignes. Ce type de formatage des pages Web avec CSS n'est pas possible, et justifier le texte en largeur crée de grands espaces désagréables entre les mots. Par conséquent, la typographie Web utilise généralement l'alignement à gauche.

6. Espacement des lettres et des caractères (propriétés d'espacement des mots et des lettres)

L'espacement des lettres affecte la lisibilité du texte. Faire varier la densité du texte (texte condensé et clairsemé) vous permettra de diversifier le rythme de perception, en obtenant un équilibre dans la composition textuelle du site.

Les polices Serif semblent plus expressives avec un espacement des lettres réduit.

7. Interligne (propriété de hauteur de ligne)

L'interligne optimal est de 1,4 à 1,6 fois la taille de la police.

Aussi, ne mettez pas trop d'indentation entre les titres et leur paragraphe associé.

8. Longueur de ligne

Une ligne de lecture continue doit contenir de 30 à 75 caractères (environ 7 à 10 mots par ligne). Plus la ligne de texte est large, plus l'interligne doit être important. L'interligne ne doit pas être inférieur à l'espace entre les mots.

9. Style de police (propriété de style de police)

Vous pouvez créer une belle typographie en contrôlant le style de police. Par exemple, les italiques donnent au texte une certaine solennité. Le style gras et une taille de police accrue vous permettent de mettre en évidence le contenu souhaité, mais uniquement si ce texte se détache sur l'arrière-plan des objets à proximité.

Propriété font-variant : petites majuscules ; donne au texte une sophistication typographique en transformant le texte de sorte que toutes les lettres soient reflétées en petites majuscules. Cette technique convient aux petits fragments de texte.

10. Structure du texte et hiérarchie visuelle

Les objets suivants sont distingués dans la structure d'une page Web :

• logo/nom du site ;
• Titres/titres ;
• Rubriques secondaires ;
• Texte principal;
• La navigation;
• Liens hypertextes ;
• Citations longues ;
• Des panneaux latéraux;
• Signatures/inscriptions dans les tableaux, figures.

Chaque élément de la liste est un élément fondamental du site et justifie la nécessité de le mettre en valeur.

Il existe six niveaux de titres en HTML, en commençant par le plus important

et se terminant par le moins significatif

. entête

doivent figurer en premier dans la structure du document, et les titres de niveau inférieur doivent suivre et détailler les informations. Pour mettre en évidence les en-têtes, vous pouvez utiliser la technique de surbrillance d'une partie de l'en-tête avec de la couleur.

Pour une assimilation plus facile, le texte doit être divisé en parties et pour chaque section, choisir le titre du niveau approprié. Plus le niveau de titre est élevé, plus la section doit être significative dans le contenu.

À structure globale texte, une attention particulière doit être portée aux liens, ils doivent se démarquer facilement du contenu environnant.

La hiérarchie visuelle établit la structure correcte sur la page, rendant le texte facile à comprendre et à lire. Dans la plupart des textes, il y a une division du texte selon le sens. Il existe plusieurs façons, la plus simple est de diviser le texte en paragraphes.

• Capital;
• Italique;
• Style gras/gras ;
• La taille;
• Couleur;
• changement de casque ;
• Modification de la position des caractères sur la bande de texte (majuscules et minuscules, retraits) ;
• Sélection de caractères avec éléments graphiques— pointeurs, cadres, icônes, etc.

Trop surligner non seulement suraccentue l'attention sur n'importe quel fragment, mais le rend également difficile à lire.

11. Polices sécurisées

Polices Windows / Polices Mac / famille de polices

Arial, Arial, Helvetica, sans empattement

sans empattement

cursive

monospace

Géorgie 1, Géorgie, empattement

sans empattement

Console Lucida, Monaco 5, monospace

sans empattement

empattement

Tahoma, Genève, sans empattement

Times New Roman, Times, empattement

Trébuchet MS 1, Helvetica, sans empattement

Verdana, Verdana, Genève, sans empattement

Symbole, Symbole (Symbole 2 , Symbole 2)

toiles, toiles (sangles 2 , sangles 2 )

Wingdings, Zapf Dingbats

MS Sans Serif 4 Genève sans empattement

MS Serif 4, New York 6, empattement

Arial, Arial, Helvetica, sans empattement

Arial Noir, Arial Noir, Gadget, sans empattement

Comic Sans MS, Comic Sans MS 5, cursive

Courrier Nouveau, Courrier Nouveau, Courrier 6, monospace

Géorgie 1, Géorgie, empattement

Impact, Impact 5, Charbon 6, sans empattement

Console Lucida, Monaco 5, monospace

Lucida Sans Unicode, Lucida Grande , sans empattement

Palatino Linotype, Livre Antiqua 3, Palatino 6, empattement

Tahoma, Genève, sans empattement

Times New Roman, Times, empattement

Trébuchet MS 1, Helvetica, sans empattement

Verdana, Verdana, Genève, sans empattement

Symbole, Symbole (Symbole 2 , Symbole 2)

toiles, toiles (sangles 2 , sangles 2 )

Wingdings, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4 Genève sans empattement

MS Serif 4, New York 6, empattement

1 Les polices Georgia et Trebuchet MS sont livrées avec Windows 2000/XP et sont incluses dans le package de polices IE (et sont en effet incluses avec de nombreuses applications Microsoft), elles sont donc installées sur de nombreux ordinateurs Windows 98.

2 Les polices de caractères sont affichées uniquement dans Internet Explorer, dans d'autres navigateurs, ils sont généralement remplacés par police standard(bien que, par exemple, la police Symbol soit rendue dans Opera, tandis que Webdings est rendu dans Safari).

3 Book Antiqua est presque identique à Palatino Linotype; Palatino Linotype est livré avec Windows 2000/XP et Book Antiqua est livré avec Windows 98.

4 Veuillez noter que ces polices ne sont pas TrueType mais bitmap donc elles peuvent sembler mauvaises à certaines tailles (elles sont conçues pour s'afficher à 8, 10, 12, 14, 18 et 24 pt à 96 DPI).

5 Ces polices ne fonctionnent que dans les polices standard de Safari, mais ne fonctionnent pas en gras ou en italique. Comic Sans MS fonctionne également en gras mais pas en italique. D'autres navigateurs Mac semblent bien émuler les propriétés de police manquantes (merci à Christian Fecteau pour l'astuce).

6 Ces polices ne sont installées sur le Mac que lors de l'installation classique

Correction d'un vieil article sur la typographie, pour ceux qui ne l'ont pas vu, il sera utile pour la révision

Typographie- l'un des aspects les plus importants de la conception Web, car il transmet des informations de base. Malheureusement, de nombreux concepteurs et clients ont peur des expériences audacieuses, choisissant une ou deux polices « testées » pour leurs projets.

Donc, cet article est dédié à ceux qui sont perdus dans l'océan de la typographie. Nous parlerons des bases de la typographie, de ce que sont les polices et de la structure des polices.

Polices de caractères vs polices - Quelle est la différence ?

De nombreuses personnes utilisent indifféremment les mots police de caractères et police. En fait, ce n'est pas la même chose, maintenant je vais vous expliquer pourquoi.

Casque est un ensemble de caractères stylistiquement similaires qui peuvent être écrits/imprimés. Ce sont des chiffres, des lettres, des symboles. Police de caractère- Il s'agit d'un concept plus étroit, qui est déterminé par plusieurs facteurs, tels que la taille et le style. Fondamentalement, Arial est une police de caractères et Arial Bold est une police de caractères.

Classification

Les polices peuvent être divisées en plusieurs groupes - serif (serif), sans-serif (sans-serif), manuscrite (script), affichage (affichage). Cependant, il existe d'autres types de classification.

Polices Serif, Antiqua (Serif)

Ils sont appelés ainsi parce que chaque lettre a de petits empattements. Lors de l'impression de gros blocs de texte dans la conception Web, ils ne sont pas recommandés, car ils sont considérés comme difficiles à lire. Ces polices sont généralement utilisées pour les titres.

Les polices Serif ont plusieurs sous-types - par exemple, style ancien("Old style" - on les appelle aussi humanistes, antiquité humaniste) - les toutes premières polices de cette classification, elles étaient déjà utilisées dans les années 1400 lointaines. Leur caractéristique- que la partie du symbole, qui est située à un angle, est rendue mince. Les exemples de polices sont Adobe Jenson, Centaur et Goudy Old Style.

Empattements de transition (Empattements de transition)- ont été utilisés dans les années 1700. Cela inclut des polices telles que Times New Roman et Baskerville, ainsi que Caslon, Georgia et Bookman. Avec eux, la différence entre les parties épaisses et fines des lettres est plus perceptible qu'avec Old Style, mais moins perceptible qu'avec Modern.

Empattements modernes (New Style Antiqua)- utilisés déjà après les années 1700, et ont un fort contraste entre les parties épaisses et fines des personnages. Cela inclut des polices telles que Didot et Bodoni

et enfin , Serifs Slab (polices Slab)- ont généralement la même épaisseur de toutes les lignes, et de grands empattements aux extrémités

Polices dentelées, Grotesques (Sans Serif)

Les polices Serif sont ainsi nommées car elles n'ont pas de serifs.) Ils ont l'air plus modernes, d'ailleurs ils ont commencé à être utilisés au 18ème siècle.

Voici les 4 principaux types de polices sans-serif : Grotesque (ancien grotesque), néo-grotesque (nouveau grotesque), humaniste (humaniste) et géométrique (géométrique).
Vieux grotesques- les toutes premières, elles sont similaires aux polices serif, mais sans empattements.
Par exemple, Franklin Gothic et Akzidenze

Nouveaux grotesques ont une apparence simplifiée, en comparaison avec les anciens grotesques. La plupart des polices de caractères les plus populaires aujourd'hui sont de nouvelles polices sans empattements, telles que MS Sans Serif, Arial, Helvetica et Univers.

Humanistes- plus calligraphiques que toutes les autres polices sans empattement (c'est-à-dire qu'elles modifient l'épaisseur des lignes). Ceux-ci incluent, par exemple, Gill Sans, Frutiger, Tahoma, Verdana, Optima et Lucide Grande - ils sont souvent utilisés pour remplir le corps du site.

Géométrique basé sur des chiffres réguliers, par exemple, "O" est un cercle, etc.; sont considérées comme les polices sans empattement les plus modernes. Les exemples sont ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Manuscrit (Script)

Les polices manuscrites sont basées sur l'écriture manuscrite. Il existe deux types de polices de ce type - formelles (formelles) et Kezhl (décontractées). Formelles, comme écrites à la main, elles datent des XVIIe-XVIIIe siècles. Certaines polices de caractères sont basées sur des maîtres célèbres tels que George Snell et George Bickham. Prenez Kuenstler Script comme exemple de polices modernes. Agréable et élégant, il ne rentre pas dans le corps du texte de la page.

Les polices Kezhl sont une version plus moderne, elles sont nées au 20ème siècle. C'est moins formel, souvent avec des traits audacieux et un effet de coup de pinceau. Ces polices incluent Mistral et Brush Script.

Polices d'affichage (Affichage)

La catégorie d'affichage comprend les polices qui ne conviennent généralement pas à l'écriture de texte. Le plus souvent, ils servent d'accent. Ils sont généralement utilisés dans l'industrie de l'imprimerie, bien qu'ils commencent également à apparaître sur les pages Internet. Parmi les affichages, vous pouvez trouver, par exemple, des lettres noires - les polices originales des premières presses à imprimer.

Polices non alphabétiques (Dingbats)

Polices non alphabétiques- ce sont les polices qui ne contiennent pas du tout de lettres, mais qui contiennent des symboles et des ornements.

Proportionnel vs Monospace

Dans les polices proportionnelles, un caractère occupe autant d'espace que son orthographe naturelle l'exige. Par exemple, Times New Roman est une police proportionnelle. Mais dans les polices monospace, tous les caractères ont la même largeur. Ces polices incluent, par exemple, Courier New

Humeur

L'humeur d'une police influence grandement s'il est approprié de l'utiliser dans une situation donnée. Très souvent, les contrastes sont également utilisés - le style professionnel est combiné avec l'informel, la lumière avec le dramatique. Par exemple, Times New Roman est une police stricte, et c'est ce type qui est si souvent utilisé pour correspondance commerciale. Mais, par exemple, Helvetica change généralement d'ambiance en fonction des polices environnantes.

Épaisseur et style

L'épaisseur des polices est de : léger, fin, régulier, moyen, gras, lourd ou noir.

Il existe trois styles de police : italique, oblique et petites majuscules. Les petites majuscules sont couramment utilisées pour les titres.

L'italique et l'oblique sont interchangeables, bien qu'il s'agisse de styles différents. Oblique est une variante inclinée des polices régulières. Pour l'obtenir, utilisez simplement la fonction Free Transform-distort de Photoshop. Mais l'italique est déjà un jeu de caractères distinct, responsable de la version oblique de la police.

Structure de la police

Chaque caractère a un certain ensemble de caractéristiques qui peuvent être utilisées pour déterminer comment il se combine avec d'autres polices. Voici les principaux :

Ligne de police (ligne de base)- une ligne imaginaire sur laquelle se trouve le texte. Parfois, les polices arrondies s'éloignent légèrement de la ligne de type.

Ligne minuscule (ligne moyenne) désigne la hauteur de la plupart des lettres minuscules, généralement déterminée par la hauteur du "x". C'est de là que vient le concept de hauteur x.

Ligne supérieure des capitales (Cap)- la hauteur de la lettre majuscule "A".

La figure ci-dessus montre les trois parties communes de toutes les lettres.

Course de base, Shtamb (tige)- la verticale principale de chaque caractère, y compris l'oblique.

Barre transversale (barre)- partie horizontale de la police

Ovale (Bol)- la partie arrondie de la police.

Télécommande supérieure (Ascender)- coller une partie de lettres telles que "d", "h" et "b".

Descendeur- coller une partie de lettres telles que "p", "q" et "f"

empattements- une caractéristique distinctive des polices serif). Dans certaines polices, ils sont plus prononcés, tandis que dans d'autres, ils sont moins prononcés.

Ouverture- indique un espace sur les caractères ouverts tels que "A", "c" ou "m"

Oreille c'est un ajout décoratif à un caractère, comme le "g" dans l'exemple ci-dessus.

Course de connexion (Hairline) c'est la partie la plus fine d'une police avec empattement.

Barre transversale- une ligne horizontale, comme par exemple dans les symboles « A » et « H ».

Chute (Terminal)- trait rond ou ovale (en forme de goutte) se terminant par le dessin de certains caractères de la police.

Boucle se produit uniquement sur certaines lettres minuscules "g" et peut être complètement fermé ou partiellement fermé.

Pointe (éperon)- une toute petite encoche sur certaines lettres, par exemple sur « G ».

Pièce jointe (Lien) relie le haut et le bas de la lettre "g".

Dos- la courbe centrale que la lettre "s" a.

Queue de la lettre (Queue)- une ligne décorative, par exemple, sur la lettre « R » ou « Q ».

Élément d'extrémité (terminal, fleuron)- fin de course sans empattement

Épaule- une ligne arrondie qui part du trait principal. (pour être honnête, sur de nombreux sites russes, ils donnent une définition complètement différente de ce concept,)