Les polices (fonts) HTML permettent de personnaliser les contenus textuels de vos sites Web. Une utilisation optimisée des polices sécurisées pour le Web assure une présentation cohérente sur tous les navigateurs.

Quelles sont les polices HTML disponibles ?

En théorie, il existe un grand nombre de polices de texte HTML diffé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écharger et de la configurer correctement.

Différents problèmes peuvent néanmoins survenir. Les polices ornementales ou celles avec de très petits caractè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 lisibilité. De plus, si une police HTML utilisée sur votre site n’est pas disponible sur l’ordinateur de l’utilisateur ou mal intégrée, le navigateur remplacera automatiquement cette police par une autre, souvent générique, ce qui peut entraîner des incohérences visuelles importantes.

Hébergement Web
Hébergement Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'économie
  • Haute disponibilité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

HTML fonts : sécurisées et compatibles pour le Web

Si vous cherchez des polices adaptées pour votre site Web, il est recommandé de privilégier des polices sécurisées pour le Web. Ces polices sont généralement préinstallées sur la majorité des systèmes d’exploitation ou accessibles en tant que polices Web via des serveurs publics. Cela garantit une compatibilité optimale, évitant ainsi des problèmes d’affichage ou de lisibilité.

Polices sécurisées pour le Web

Les polices sécurisées pour le Web sont celles qui sont préinstallées sur la plupart des appareils et des systèmes d’exploitation. Les polices Web sécurisées les plus connues sont :

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

Polices Web

En plus des polices préinstallées, vous pouvez utiliser des webfonts. Les polices Web sont chargées depuis des serveurs publics et offrent un large choix de styles typographiques. L’un des fournisseurs de polices Web les plus connus est Google Fonts. En utilisant des polices Web, vous pouvez personnaliser le design de votre site Web sans compromettre la compatibilité 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 Responsive Web design : astuces », nous abordons plus en détail le fonctionnement et les avantages des polices de caractères Web.

Polices HTML : anciennes balises HTML

Historiquement, il était possible de personnaliser les polices avec les balises HTML <font> et <basefont>. Ces balises sont aujourd’hui obsolètes depuis l’introduction de HTML5. Leur utilisation est fortement déconseillée dans les projets modernes.

<font>

La balise <font> était utilisée pour sélectionner et définir les polices HTML. Différents attributs HTML permettaient de définir la couleur, la taille et la police de caractères. Voici les attributs et leurs valeurs autorisées :

Attribut Valeurs Description
color Nom de la couleur, code couleur hexadécimal 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ésentait comme suit :

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

<basefont>

La balise <basefont> fonctionnait de manière très similaire : elle définit la famille de polices HTML et ses spécifications, mais toujours pour l’ensemble du document HTML. Ses attributs correspondent à ceux de la balise <font>. Sa syntaxe se présentait ainsi :

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

Polices HTML : utiliser CSS pour personnaliser vos polices

Avec l’avènement de HTML5 et CSS, la personnalisation des polices est devenue plus flexible et performante. Désormais, au lieu d’utiliser des balises HTML obsolètes comme <font>, vous pouvez définir des styles typographiques directement dans des feuilles de style CSS. Cette méthode vous permet de mieux séparer le contenu (HTML) de la présentation (CSS) et de créer des designs plus cohérents.

Conseil

L’utilisation des polices HTML nécessite quelques précautions pour garantir un site à la fois attrayant et performant. Évitez de multiplier les polices sur une même page, car cela risque de nuire à l’harmonie visuelle et d’alourdir le temps de chargement. N’oubliez pas d’ajouter des polices de secours (fallbacks) : si la police principale ne s’affiche pas correctement, une alternative assurera la cohérence visuelle. Enfin, privilégiez des tailles de texte suffisamment grandes et des polices faciles à lire pour offrir une expérience utilisateur optimale.

Vous trouverez ci-dessous des exemples pratiques pour personnaliser 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 différentes tailles de texte pour des paragraphes 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 personnalisée à l’aide de la propriété color. Vous pouvez utiliser des noms de couleur prédéfinis, des codes hexadécimaux, ou des valeurs RVB pour définir des nuances spécifiques.

Voici un exemple simple où le texte utilise une couleur personnalisée en hexadécimal :

<!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 essentielle. Elle permet également d’inclure des polices de secours qui s’afficheront si la police principale n’est pas disponible sur le système de l’utilisateur.

Voici un exemple d’utilisation de la police « Lucida Console » avec une alternative « monospace » en cas d’indisponibilité :

<!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’utilisateur, la police de secours (comme « monospace » dans cet exemple) sera automatiquement appliquée. Cela garantit une présentation cohérente, même dans des environnements variés.

Nom de domaine
Votre domaine en un clic
  • 1 certificat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une configuration DNS simplifiée
Aller au menu principal