5 polices Web sécurisées que vous pouvez utiliser sur votre site Web

Publié: 2020-10-07

Si vous êtes propriétaire d'un site Web, vous devez savoir qu'une police HTML joue un rôle important dans votre site Web. Tous les sites Web ont du contenu textuel sous une forme ou une autre, si elle est choisie correctement, une bonne police peut augmenter l'esthétique de votre page et avoir un impact positif sur la lisibilité du contenu, c'est pourquoi la conception et le développement d'un site Web est en effet l'un des aspects les plus importants pour démarrer toute entreprise. Une mauvaise police affecte négativement les performances de votre suite, tout dépend si vous utilisez une police sécurisée pour le Web ou non.

Table des matières afficher
  • Qu'est-ce qu'une police Web Safe ?
  • Pourquoi les polices sécurisées pour le Web sont-elles importantes ?
  • Quelles sont les cinq familles de polices ?
    • 1. Cursif (par exemple, Zapf-Chancellerie)
    • 2. Fantaisie (par exemple, Star Wars)
    • 3. Serif (par exemple, Times New Roman)
    • 4. Sans empattement (par exemple, Helvetica)
    • 5. Monospace (par exemple, Courier)
  • Polices Web populaires :
    • 1. Arial
    • 2. Times New Roman
    • 3. Helvétique
    • 4. Courrier
    • 5. Calibri
  • Outils de police à vérifier
    • Paire de polices
    • Wordmark.it
    • WhatTheFont
  • Comment ajouter des polices Web Safe à mon site Web ?

Qu'est-ce qu'une police Web Safe ?

typographie-polices-caracteres-lettres-design

Une police est lisible et a la même apparence dans n'importe quel navigateur ou appareil (mobile, tablette, etc.) uniquement si la police est installée sur cet appareil. Les polices Web sécurisées sont les polices qui sont généralement préinstallées sur n'importe quel appareil - ordinateurs, mobiles, consoles de jeux, tablettes et téléviseurs intelligents.

Recommandé pour vous : 20 superbes polices de conception de logo dont tout grand designer a besoin.

Pourquoi les polices sécurisées pour le Web sont-elles importantes ?

logo-design-police-croquis

Dans un monde parfait, vous pouvez choisir la police de votre choix pour votre site Web. Cependant, en fonction du système d'exploitation, les appareils sont livrés avec leurs propres sélections de polices préinstallées. Le problème réside dans le fait que leurs conceptions diffèrent généralement selon le système que vous utilisez. Les appareils fonctionnant sous Windows peuvent avoir un groupe, MacOS peut en avoir un autre, puis Android de Google a une autre version différente.

Lorsque vous accédez à un site Web, la police que vous voyez dans la fenêtre d'affichage n'est pas nécessairement la police prévue par le concepteur. Signification : supposons que le concepteur utilise une police relativement obscure. Si vous n'avez pas installé cette police, votre site Web reviendrait à la police générique définie par le système et vous ne le sauriez peut-être même pas, pour vous, cela aurait simplement l'air désagréable.

Les polices sécurisées pour le Web sont un ensemble de polices qui existent sur tous les systèmes et vous permettent, en tant que concepteur, de spécifier la police sur laquelle se rabattre au cas où l'appareil ne disposerait pas de la police nécessaire. Il vous permet de donner la même apparence au site Web sur une gamme d'appareils.

Quelles sont les cinq familles de polices ?

Polices Photoshop GRATUITES ! Mis en exergue

En typographie, toutes les polices sont classées dans l'une des cinq familles de polices en fonction de leurs similitudes de conception. Ceux-ci sont les suivants :

1. Cursif (par exemple, Zapf-Chancellerie)

Polices sécurisées pour le Web - Point 1

La famille de polices Cursive imite l'écriture humaine avec les lettres généralement jointes de manière fluide. Il est souvent associé aux personnes calligraphiées et à l'écriture plus rapide.

2. Fantaisie (par exemple, Star Wars)

Polices sécurisées pour le Web - Point 2

Les polices de la famille de polices Fantasy ont généralement des éléments décoratifs dans chaque lettre mais représentent toujours le personnage. Les titres de nombreux livres et films de fiction utilisent des polices de cette famille pour renforcer la nuance du contenu.

3. Serif (par exemple, Times New Roman)

Polices sécurisées pour le Web - Point 3

La caractéristique la plus notable de la famille de polices Serif est une petite ligne à la fin d'un gros trait dans une lettre ou un symbole. Il crée un sentiment d'élégance et de formalité. Il est largement utilisé pour le corps du texte par une foule de sites Web.

4. Sans empattement (par exemple, Helvetica)

Polices sécurisées pour le Web - Point 4

Contrairement aux polices de la famille Serif, les polices de la famille Sans-serif n'ont pas la petite ligne attachée à chaque lettre. La plupart des polices appartenant à cette famille ont une largeur de trait similaire, ce qui la rend minimaliste et moderne.

5. Monospace (par exemple, Courier)

Polices sécurisées pour le Web - Point 5

Dans la famille de polices Monospace, chaque lettre et symbole occupe exactement le même espace horizontalement. Les rendant ainsi cohérents et faciles à distinguer, c'est pourquoi ils sont souvent utilisés avec des machines à écrire et plus récemment avec des terminaux informatiques.

Vous aimerez peut-être : 11 superbes polices Photoshop que vous devez essayer (GRATUITEMENT !).

Polices Web populaires :

web-design-blog-wordpress-font-typography-customizer

Maintenant que nous avons un aperçu des polices, vous trouverez ci-dessous 5 polices Web sécurisées populaires à ajouter à votre site Web :

1. Arial

Police Arial

L'une des polices sans empattement les plus utilisées dans les médias en ligne et imprimés. C'est la norme de facto. La version 3.0 d'OpenType le décrit comme :

"Un design contemporain sans empattement, Arial contient plus de caractéristiques humanistes que beaucoup de ses prédécesseurs et, en tant que tel, est plus en phase avec l'ambiance des dernières décennies du XXe siècle. Le traitement global des courbes est plus doux et plus complet que dans la plupart des visages sans empattement de style industriel. Les traits terminaux sont coupés en diagonale ce qui contribue à donner au visage un aspect moins mécanique. Arial est une famille de polices de caractères extrêmement polyvalente qui peut être utilisée avec le même succès pour la composition de texte dans des rapports, des présentations, des magazines, etc., et pour l'affichage dans les journaux, la publicité et les promotions.

C'est également la police par défaut dans Google docs.

2. Times New Roman

Police Times-New-Roman

Times New Roman est une variante de l'ancienne police Times de la famille de polices Serif. Commandé par le journal britannique "The Times" en 1931 et conçu par Stanley Morison, le conseiller artistique de Monotype, la société d'équipements d'impression et collaborant avec Victor Lardent, du département de lettrage de la branche publicitaire du Time. Elle est devenue l'une des polices les plus populaires de tous les temps et est préinstallée sur la plupart des appareils.

Le nom de Roman in Times New Roman fait référence au style roman, la première partie de la famille de polices Times New Roman à être conçue. Il a ses origines dans l'imprimerie italienne de la fin du XVe et du début du XVIe siècle, le dessin n'a aucun lien avec Rome ou les Romains.

3. Helvétique

Police Helvetica

Helvetica ou Neue Haas Grotesk est une police largement utilisée de la famille Sans-serif Font. Développé en 1957 par le concepteur de polices suisse Max Miedinger avec la contribution d'Eduard Hoffmann. Il est conçu dans un design néo-grotesque avec une hauteur x élevée, une terminaison des traits sur des lignes horizontales ou verticales et un espacement serré très inhabituel entre les lettres, cela se combine pour lui donner un aspect solide et dense. Conçu à l'origine pour être utilisé comme une police neutre qui avait une grande clarté, aucune signification intrinsèque dans la forme, et pouvait être utilisé dans une variété de signalisation et nommé Neue Haas Grotesk (New Haas Grotesque), il a été rapidement autorisé par Linotype et renommé Helvetica en 1960 , latin pour suisse. La police est appréciée des designers pour sa neutralité et préférée par de nombreuses marques célèbres comme Jeep, Kawasaki, Motorola et BMW.

4. Courrier

Courier-police

La police Courier est une police appartenant à la famille de polices Serif. Conçu par Howard "Bud" Kettler à l'origine pour les machines à écrire d'IBM, il a été adapté pour être utilisé comme police informatique et presque tous les ordinateurs sont installés avec. En raison de sa composition Monospace, dans les années 1990, il a trouvé une utilisation renouvelée dans l'industrie électronique et informatique où les colonnes de caractères doivent être alignées de manière cohérente, par exemple, dans le codage où c'est la police par défaut pour écrire ou représenter tout type de code.

Selon la norme de l'industrie, tous les scénarios devaient être écrits en 12 points Courier. Le département d'État américain l'a utilisée comme police standard pour tous les documents jusqu'en janvier 2004. Avec l'utilisation croissante dans les industries numériques, Courier a développé des variantes avec des fonctionnalités telles que des signes de ponctuation plus grands, des distinctions plus fortes entre des caractères similaires (comme le chiffre 0 / O majuscule et chiffre 1 / L minuscule), etc. pour plus de lisibilité à l'écran.

5. Calibri

Police Calibri

La police Calibri fait partie de la famille de polices Sans-serif conçue par Lucas de Groot en 2002-2004. Il a été rendu public en 2007, fourni avec Microsoft Office 2007 et Windows Vista. À partir d'Office 2007, il a remplacé Times New Roman comme police par défaut dans MS Word et Arial comme police par défaut pour MS Powerpoint, MS Excel, Microsoft Outlook et WordPad. Il fait partie de la collection de polices ClearType conçue pour fonctionner avec le système de rendu de texte ClearType de Microsoft afin de rendre le texte plus clair à lire sur les écrans à cristaux liquides (LCD).

Outils de police à vérifier

outils-configuration-paramètres-pièces-requises

Il existe un certain nombre d'outils en ligne que vous pouvez utiliser pour tester les différentes polices avant de les utiliser sur votre site Web. Si vous souhaitez explorer les types de polices disponibles ou si vous avez des difficultés à choisir la police à utiliser, ces outils sont d'une grande aide.

Paire de polices

Polices sécurisées pour le Web - Point 1

Font Pair est un site Web de niche qui contient de nombreuses ressources liées à la typographie. Il existe divers livres électroniques, guides, critiques, vidéos et recommandations de plugins pour les polices. Ils ont une section dédiée aux polices les plus populaires disponibles sur Google et une comparaison approfondie des meilleures polices ensemble.

Wordmark.it

Polices sécurisées pour le Web - Point 2

Wordmark.it vous donne un aperçu rapide de ce à quoi ressemblerait votre texte avec une police particulière ou même plusieurs polices ensemble. Entrez simplement le texte dans la barre et le tour est joué, il vous montrera à quoi il ressemble avec différentes polices.

WhatTheFont

Polices sécurisées pour le Web - Point 3

WhatTheFont est au texte ce que la recherche d'image inversée est aux images. Il vous aide à identifier une police que vous avez vue. Téléchargez simplement l'image de la police et elle la fera correspondre à leur base de données et vous donnera ce qu'elle pense être la correspondance la plus proche. Vous pouvez également vous rendre sur leurs forums actifs pour obtenir de l'aide dans l'identification des polices ou même des requêtes typographiques générales.

Vous pourriez également aimer : 3 façons différentes d'ajouter des polices personnalisées au thème de votre site WordPress.

Comment ajouter des polices Web Safe à mon site Web ?

Posez-vous trois questions pour évaluer les résultats

Maintenant que vous avez choisi une police sécurisée pour le Web, il est temps de l'appliquer. Si vous avez peu d'expérience en programmation, suivez ces étapes pour ajouter une police Web sécurisée à votre page Web :

1. Ouvrez votre fichier header.php.

2. Copiez le code source/standard de la police. Vous pouvez généralement le trouver via Google.

code-1

3. Collez le code en haut de votre fichier d'en-tête.

4. Chargez votre style.css, mettez le code de la police pour changer la police du texte de votre choix.

code-2

À la fin, votre feuille de style devrait ressembler à ceci :

code-3
Auteur-Image-Abhyank-Srinet
Cet article est écrit par Abhyank Srinet. Abhyank est titulaire d'un Master en Management de l'ESCP Europe et d'un diplôme d'ingénieur avec une spécialisation en Instrumentation & Contrôle. Son intérêt pour le paysage numérique l'a motivé à créer une startup en ligne de conseil en candidature (MiM-Essay), axée sur la diffusion d'informations de qualité sur le début de carrière du master.