Mettre en forme un texte en CSS: choix et définition de la police (font) par la propriété font-family

Commencer à utiliser les polices et la typographie

Plutôt que de plonger dans les détails techniques, nous allons commencer par expliquer certaines des idées fondamentales qui doivent guider votre processus de sélection des polices et de conception du texte.
1. Prenez le temps de vous renseigner sur les polices et la typographie C'est ce que vous êtes en train de faire, vous êtes donc bien parti ! Il existe plusieurs termes et concepts avec lesquels vous devez vous familiariser dès le départ :

Police de caractères et caractère : Bien que certains experts affirment que ces termes signifient deux choses différentes, ils sont synonymes dans l'usage moderne. Dans le contexte du web, une police ou un caractère est un ensemble de lettres, de symboles et de signes de ponctuation de conception similaire et regroupés dans un seul fichier informatique.
Famille de polices : Une famille de polices comprend plusieurs polices différentes qui sont identiques à
Typographie : Un terme général qui englobe le choix de la police ainsi que des sujets tels que la couleur, la taille, l'espacement des caractères, l'interligne et l'alignement. La typographie Web est la discipline qui consiste à concevoir du texte pour le présenter sur le Web.
Guide de style : Un ensemble de normes qui décrivent la conception, le style et l'image de marque à appliquer de manière cohérente dans toutes les parties d'un site Web. Le développement d'un guide de style permet de créer une expérience cohérente pour les visiteurs d'un site Web. Un guide de style comprend des éléments tels que la typographie, le choix des couleurs, le style d'écriture. La sélection des polices et la conception de la typographie sont un aspect du développement d'un guide de style.

2. Limitez votre site Web à quatre familles de polices ou moins Beaucoup de sites Web se contentent de deux polices : une pour les éléments d'en-tête et une pour le texte des paragraphes. Il est possible d'en avoir plus de deux, mais si vous dépassez les quatre polices, essayez d'en éliminer une ou plusieurs. L'utilisation d'un trop grand nombre de polices peut avoir un effet négatif sur l'expérience des visiteurs et sur l'efficacité de l'image de marque de votre site. Sans compter que l'utilisation de nombreuses polices peut ralentir les performances de votre site Web en obligeant les navigateurs des visiteurs à charger plusieurs fichiers de polices.

3. Utilisez des polices qui correspondent à la personnalité de votre site Web Les polices doivent mettre en valeur votre site Web. Elles ne doivent jamais être une distraction ou nuire à l'expérience des visiteurs de votre site. Si vous concevez le site Web d'un cabinet d'avocats, vous ne voudrez pas utiliser une police fantaisiste écrite à la main, car elle ne sera pas considérée comme professionnelle et informelle. Choisissez des polices qui correspondent au style du message que votre site Web tente de transmettre.

4. La typographie consiste en fin de compte à améliorer la lisibilité Lorsque vous commencez à essayer différentes polices et techniques de style, il est facile de se laisser emporter. Avant d'opter pour une police ou un style spécifique, prenez le temps de vous assurer que ce que vous avez créé correspond à votre objectif ultime, à savoir offrir la meilleure expérience possible aux visiteurs de votre site Web.

5. Utilisez des styles d'en-tête pour ajouter un sens de la structure. Faites en sorte que vos en-têtes soient considérablement plus grands que le texte de vos paragraphes, et que le changement de taille d'un niveau d'en-tête à l'autre soit suffisamment perceptible pour que la structure du document soit renforcée par la taille de la police. Utilisez une police différente pour les titres et le texte des paragraphes afin de souligner que les titres représentent le début d'une nouvelle section ou d'un nouveau sujet. Une technique courante consiste à utiliser une police avec empattement pour les titres et une police sans empattement pour le texte des paragraphes. Certains concepteurs préfèrent faire le contraire. Si vous décidez de faire de même et d'utiliser une police avec empattement pour le texte des paragraphes, veillez à choisir une grande taille de police, car les polices avec empattement ne sont pas aussi faciles à lire que les polices sans empattement.

6. Faites preuve de créativité avec les en-têtes et les logos Le nom de votre site Web, le slogan, les étiquettes du menu de navigation et les en-têtes de votre site sont l'endroit idéal pour expérimenter avec des polices d'affichage, des scripts écrits à la main, des majuscules, des minuscules et d'autres choix typographiques accrocheurs. Restez-en à des polices simples et faciles à lire pour les blocs de contenu tels que les paragraphes, les tableaux et les listes.

7. Faites attention à l'alignement et à l'espacement. L'espace entre chaque ligne de texte et l'alignement du texte peuvent être contrôlés avec CSS. Votre texte de paragraphe vous semble-t-il trop ramassé ? Les titres d'articles seraient-ils plus jolis s'ils étaient centrés sur le corps d'un article ? Le travail avec les polices et la typographie est le bon moment pour avoir le sens du détail. Allez-y et soignez les détails.
8. N'oubliez pas de maintenir l'espace blanc En supposant que vous ayez choisi une police et une taille de police lisibles, rien n'améliore la lisibilité plus que de fournir un espace blanc adéquat entre les éléments de votre page Web. Lorsqu'un visiteur accède à une page Web et qu'il voit un mur de texte, il est fort probable qu'il quitte la page avant d'en lire le contenu. Répartissez les blocs de texte, intercalez les graphiques et les listes, rompez le flux avec des titres et utilisez un espacement généreux entre les lignes pour que la lecture du contenu de votre site Web soit agréable pour les yeux.

Choix de polices

Le problème c'est que, pour qu'une police (font) s'affiche correctement, il faut que le visiteur l'a dans son système.
S'il ne l'a pas, son navigateur prendra une police (font) par défaut (une police (font) standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendez.
La propriété CSS qui indique la police (font) au navigateur est font-family.

on écrit font-family:police;

Pour éviter tout problème si l'internaute n'a pas la même police (font) que vous, on met plusieurs noms de police, séparés par des virgules :

on écrit donc font-family:police1, police2, police3, police4;

Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il mettra la police2. Puis la police3 et ainsi de suite.
En général, on met en tout dernier une police (font) standard (qui ne se met que si aucune autre police (font) n'a été trouvée) c'est "serif".
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs et que vous pouvez donc utiliser sans crainte :

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Exemple:
Code : CSS

Exemple :      Copier le code

h1{
font-family: "Arial Black", Arial, Verdana, serif;
}
p{
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}

Remarque : le choix d’un groupe de police (font) doit suivre certaines règles :
1 – Pour votre design ne pas se baser sur une seule police, il faut faire des testes avec chaque police (font) du groupe que vous avez choisie et s’assurer que la mise en page n’explose pas complètement et que le contenu n’est pas caché ou recouverts les uns sous les autres.
L’astuce est de s’assurer que le contenant a une hauteur extensible, n’utiliser la propriété font-size qui définie la hauteur que si nécessaire.
2 – Les polices choisies dans un groupe doivent être proches par leurs caractéristiques, deux polices différentes peuvent avoir des tailles et occupent un espace diffèrent pour la même valeur font-size. Donc mettre une police (font) arial dans le même groupe que verdana est une erreur car verdana est plus haute et plus large.
C'est pour quoi il faut faire des testes pour chaque police (font).

Voici ci-dessous un ensemble de groupe qui ont été établis après plusieurs expériences :

Polices à chasse fixe (monospace)
font-family: "Courier New", Courier, monospace;
font-family: Monaco, "Lucida Console", "Andale Mono", monospace;

Polices sans empattements (sans-serif)
font-family: Arial, Helvetica, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;

Polices à empattements (serif)
font-family: "Times New Roman", Times, FreeSerif, serif;
font-family: Georgia, Norasi, serif;

Pour plus de detail sur les propriétés css de latypographie voir notre Gide propriétés CSS

chapitre précédent    chapitre suivant