Les polices (fonts) HTML per­met­tent de per­son­na­li­ser les contenus textuels de vos sites Web. Une uti­li­sa­tion optimisée des polices sé­cu­ri­sées pour le Web assure une pré­sen­ta­tion cohérente sur tous les na­vi­ga­teurs.

Quelles sont les polices HTML dis­po­nibles ?

En théorie, il existe un grand nombre de polices de texte HTML dif­fé­rentes. Comme HTML ne propose pas de polices intégrées, vous pouvez en principe utiliser n’importe quelle police pour vos sites Web, à condition de la té­lé­char­ger et de la con­fi­gu­rer cor­rec­te­ment.

Dif­fé­rents problèmes peuvent néanmoins survenir. Les polices or­ne­men­tales ou celles avec de très petits ca­rac­tères, par exemple, ne s’affichent pas toujours comme prévu, ce qui peut non seulement altérer le design des pages, mais également nuire à leur li­si­bi­lité. De plus, si une police HTML utilisée sur votre site n’est pas dis­po­nible sur l’or­di­na­teur de l’uti­li­sa­teur ou mal intégrée, le na­vi­ga­teur rem­pla­cera au­to­ma­ti­que­ment cette police par une autre, souvent générique, ce qui peut entraîner des in­co­hé­rences visuelles im­por­tantes.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

HTML fonts : sé­cu­ri­sées et com­pa­tibles pour le Web

Si vous cherchez des polices adaptées pour votre site Web, il est re­com­mandé de pri­vi­lé­gier des polices sé­cu­ri­sées pour le Web. Ces polices sont gé­né­ra­le­ment préins­tal­lées sur la majorité des systèmes d’ex­ploi­ta­tion ou ac­ces­sibles en tant que polices Web via des serveurs publics. Cela garantit une com­pa­ti­bi­lité optimale, évitant ainsi des problèmes d’affichage ou de li­si­bi­lité.

Polices sé­cu­ri­sées pour le Web

Les polices sé­cu­ri­sées pour le Web sont celles qui sont préins­tal­lées sur la plupart des appareils et des systèmes d’ex­ploi­ta­tion. Les polices Web sé­cu­ri­sées les plus connues sont :

  • Arial
  • Courier New
  • Helvetica
  • Times New Roman
  • Georgia
  • Verdana

Polices Web

En plus des polices préins­tal­lées, vous pouvez utiliser des webfonts. Les polices Web sont chargées depuis des serveurs publics et offrent un large choix de styles ty­po­gra­phiques. L’un des four­nis­seurs de polices Web les plus connus est Google Fonts. En utilisant des polices Web, vous pouvez per­son­na­li­ser le design de votre site Web sans com­pro­mettre la com­pa­ti­bi­lité de ce dernier. Voici un exemple de la manière dont vous pouvez intégrer une police Web :

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <p>Voici une phrase avec la webfont Roboto.</p>
</body>
</html>
html
Conseil

Dans notre article « Polices de caractère et Res­pon­sive Web design : astuces », nous abordons plus en détail le fonc­tion­ne­ment et les avantages des polices de ca­rac­tères Web.

Polices HTML : anciennes balises HTML

His­to­ri­que­ment, il était possible de per­son­na­li­ser les polices avec les balises HTML <font> et <basefont>. Ces balises sont aujourd’hui obsolètes depuis l’in­tro­duc­tion de HTML5. Leur uti­li­sa­tion est fortement dé­con­seil­lée dans les projets modernes.

<font>

La balise <font> était utilisée pour sé­lec­tion­ner et définir les polices HTML. Dif­fé­rents attributs HTML per­met­taient de définir la couleur, la taille et la police de ca­rac­tères. Voici les attributs et leurs valeurs au­to­ri­sées :

Attribut Valeurs Des­crip­tion
color Nom de la couleur, code couleur hexa­dé­ci­mal ou valeurs RVB Détermine la couleur du texte
size Valeur numérique de 1 à 7 Détermine la taille des polices HTML
face Nom des polices HTML Définit la famille de polices HTML (font family) souhaitée

La syntaxe de <font> se pré­sen­tait comme suit :

<font size="3" color="#0000FF" face="arial, sans-serif">
    Exemple de texte avec `<font>`
</font>
html

<basefont>

La balise <basefont> fonc­tion­nait de manière très similaire : elle définit la famille de polices HTML et ses spé­ci­fi­ca­tions, mais toujours pour l’ensemble du document HTML. Ses attributs cor­res­pon­dent à ceux de la balise <font>. Sa syntaxe se pré­sen­tait ainsi :

<basefont size="3" color="#0000FF" face="arial, sans-serif">
html

Polices HTML : utiliser CSS pour per­son­na­li­ser vos polices

Avec l’avènement de HTML5 et CSS, la per­son­na­li­sa­tion des polices est devenue plus flexible et per­for­mante. Désormais, au lieu d’utiliser des balises HTML obsolètes comme <font>, vous pouvez définir des styles ty­po­gra­phiques di­rec­te­ment dans des feuilles de style CSS. Cette méthode vous permet de mieux séparer le contenu (HTML) de la pré­sen­ta­tion (CSS) et de créer des designs plus cohérents.

Conseil

L’uti­li­sa­tion des polices HTML nécessite quelques pré­cau­tions pour garantir un site à la fois attrayant et per­for­mant. Évitez de mul­ti­plier les polices sur une même page, car cela risque de nuire à l’harmonie visuelle et d’alourdir le temps de char­ge­ment. N’oubliez pas d’ajouter des polices de secours (fallbacks) : si la police prin­ci­pale ne s’affiche pas cor­rec­te­ment, une al­ter­na­tive assurera la cohérence visuelle. Enfin, pri­vi­lé­giez des tailles de texte suf­fi­sam­ment grandes et des polices faciles à lire pour offrir une ex­pé­rience uti­li­sa­teur optimale.

Vous trouverez ci-dessous des exemples pratiques pour per­son­na­li­ser la taille, la couleur et la famille des polices.

Définir la taille de la police

La taille des polices peut être ajustée avec la propriété font-size en CSS. Voici un exemple qui montre comment définir dif­fé­rentes tailles de texte pour des pa­ra­graphes classés par taille :

<!DOCTYPE html>
<html>
<head>
    <style>
        p.small { font-size: 12px; }
        p.medium { font-size: 16px; }
        p.large { font-size: 20px; }
    </style>
</head>
<body>
    <p class="small">Texte en petite taille.</p>
    <p class="medium">Texte en taille moyenne.</p>
    <p class="large">Texte en grande taille.</p>
</body>
</html>
html

Définir la couleur de la police

La couleur du texte peut être per­son­na­li­sée à l’aide de la propriété color. Vous pouvez utiliser des noms de couleur pré­dé­fi­nis, des codes hexa­dé­ci­maux, ou des valeurs RVB pour définir des nuances spé­ci­fiques.

Voici un exemple simple où le texte utilise une couleur per­son­na­li­sée en hexa­dé­ci­mal :

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: #008080; / *Couleur Petrol* /
        }
    </style>
</head>
<body>
    <p>Texte avec une couleur personnalisée.</p>
</body>
</html>
html

Définir la famille de polices (HTML Fonts Family)

Pour définir la famille de polices utilisée par un texte, la propriété font-family est es­sen­tielle. Elle permet également d’inclure des polices de secours qui s’af­fi­che­ront si la police prin­ci­pale n’est pas dis­po­nible sur le système de l’uti­li­sa­teur.

Voici un exemple d’uti­li­sa­tion de la police « Lucida Console » avec une al­ter­na­tive « monospace » en cas d’in­dis­po­ni­bi­lité :

<!DOCTYPE html>
<html>
<head>
<title>HTML Fonts Family</title>
    <style>
        body {
            font-family: 'Lucida Console', monospace;
        }
    </style>
</head>
<body>
    <p>Texte utilisant la police « Lucida Console ».</p>
</body>
</html>
html

Si la police choisie n’est pas présente sur le système de l’uti­li­sa­teur, la police de secours (comme « monospace » dans cet exemple) sera au­to­ma­ti­que­ment appliquée. Cela garantit une pré­sen­ta­tion cohérente, même dans des en­vi­ron­ne­ments variés.

Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée
Aller au menu principal