11 polices de conception Web qui donneront un nouveau visage à votre site Web

Publié: 2023-02-02

Les polices de conception Web semblent être un petit aspect du site Web de votre entreprise, mais, en réalité, elles ont beaucoup d'impact sur les conversions.

Qu'est-ce qui sépare le "super" de l'ordinaire ? Comme un personnage de film bleu à grosse tête s'exclame: "Présentation!"

Lors de la conception d'une page Web, l'apparence joue un rôle important dans le grand schéma des choses. Disons que vous avez peut-être une pièce intéressante que votre public pourrait apprécier. Si votre présentation est meh ou carrément atroce, vous pourriez simplement repousser ce public. Très très loin.

Heureusement, la conception et le développement Web ne doivent pas être difficiles. Vous devez rendre votre page Web attrayante et attirer votre public. C'est ainsi que vous créez une expérience merveilleuse pour vos utilisateurs. En particulier, votre choix de police peut influencer le fait qu'un lecteur reste ou quitte votre page Web.

N'hésitez pas à utiliser ces polices pour la conception de votre page Web et atteignez votre potentiel maximum. J'espère que vous pourrez avoir une idée générale des polices à choisir et pourquoi elles sont si puissantes pour la portée en ligne.

Comment choisir les polices de conception Web

Votre page Web a un look défini et unique. La façon dont les textes sont affichés sur ce look est la clé de votre succès. Gardez à l'esprit, cependant, que vous pouvez améliorer ce succès en fonction de ces six facteurs :

Lisibilité et lisibilité
Cohérence de la marque
Humeur et ton
Consignes d'accessibilité Web
Compatibilité entre navigateurs
Évolutivité

1. Lisibilité et lisibilité

La lisibilité est la facilité avec laquelle vos utilisateurs peuvent distinguer les caractères. Si votre lecteur a du mal à déterminer si un caractère est "S" ou "5", vous devrez peut-être choisir une police différente. Certaines polices proposent des formes différentes pour les caractères similaires (comme "1", "I" majuscule et "l" minuscule) afin de les distinguer les uns des autres.

La lisibilité peut être influencée par d'autres facteurs, tels que les choix de couleur de premier plan et d'arrière-plan, la taille de la police et le poids de la police. Par exemple, certaines lettres peuvent être plus lisibles lorsque vous augmentez la taille de la police, mais est-ce lisible ?

À cet égard, la lisibilité est différente de la lisibilité.

La lisibilité est la mesure dans laquelle un lecteur est à l'aise avec la lecture de blocs de texte. Ce niveau de confort est également influencé par la lisibilité de votre texte. Si un mot est trop petit pour distinguer les lettres les unes des autres, le mot peut ne pas être lisible. C'est également le cas dans un bloc dense de « petits caractères » juridiques où l'on peut lire l'intégralité du texte, mais pas aussi confortablement qu'on l'aurait souhaité.

2. Cohérence de la marque

Vous devez garder votre présentation cohérente. Bien que la voix de votre marque fournisse une base solide à votre page Web, le fait de conserver la même identité tout au long du processus établit le sérieux avec lequel vous faites passer votre message. Votre présentation vise à raconter une histoire particulière et vous invitez les clients à s'identifier à cette histoire et à la reconnaître.

Trouvez des polices qui maintiennent le récit en place. Si vous recherchez un ton professionnel, utilisez des polices d'aspect professionnel. Pour un contenu attrayant et convivial, utilisez des polices agréables à regarder. Vous pouvez en trouver un qui correspond à peu près à la facture si vous regardez assez fort.

3. Humeur et ton

La psychologie des polices est l'étude de l'impact des polices sur la façon dont votre public perçoit votre contenu. Certaines polices ont été traditionnellement utilisées à des fins spécifiques, et les gens s'y sont habitués. D'autres polices évoquent simplement certaines pensées et émotions de leurs lecteurs. Dans tous les cas, vous voudrez peut-être utiliser une police qui aide à mettre votre lecteur dans l'ambiance que vous souhaitez créer.

Vous pouvez jouer avec les polices pour créer cette ambiance. Certaines polices, par exemple, sont plus efficaces pour les en-têtes que pour le corps du texte. Mélanger et assortir les polices peut même créer une sensation plus dramatique pour votre contenu et faire ressortir des émotions plus puissantes.

4. Directives d'accessibilité Web

Votre site Web doit être inclusif pour tous les visiteurs. Il garantit que ceux qui rencontrent des difficultés ou des limitations sont toujours les bienvenus sur votre site Web de la même manière que tout le monde. Ce n'est pas simplement un outil pour générer plus de trafic vers votre entreprise, mais cela encourage une communauté parmi tous vos consommateurs.

Pour ce faire, les concepteurs utilisent souvent des lignes directrices pour améliorer l'accessibilité Web de leurs sites. Ces règles et directives rendent le contenu plus convivial et facile à comprendre pour tous les visiteurs. Bien que cela ne soit pas nécessaire à ce stade, l'amélioration de l'accessibilité du Web est un bon moyen d'établir des relations avec votre clientèle et de leur montrer que vous vous souciez d'eux et que vous souhaitez qu'ils fassent partie de ce que vous construisez. Les quatre principales normes sont :

Perceptible. En termes simples, vos consommateurs doivent comprendre votre contenu. Ce n'est pas non plus limité à "voir" le contenu. Gardez à l'esprit que les utilisateurs aveugles ou malvoyants utilisent un logiciel de lecture d'écran alternatif pour les aider à naviguer sur Internet. Tenez compte de ces utilisateurs lorsque vous configurez votre page Web.
Opérable. Cela signifie que tous les utilisateurs peuvent accéder et exploiter toutes les parties de votre page Web (texte, liens, audio, vidéo, autres médias). En règle générale, la plupart des sites Web fonctionnels sont simples et donc faciles à naviguer.
Compréhensible. Vos utilisateurs doivent être capables de digérer toutes les informations que vous dites. Vous pouvez utiliser une langue commune ou proposer des langues alternatives. De même, la navigation de votre site Web doit être organisée de manière intuitive et naturelle pour aider les utilisateurs à vous comprendre, vous et votre produit.
Robuste. Le contenu de votre site Web doit être facilement décomposé et analysé par des programmes d'assistance tels que des lecteurs d'écran. De cette façon, les personnes en difficulté feront toujours partie de l'expérience offerte par votre site Web.

LECTURE RECOMMANDÉE : Concepts de conception Web qui donnent la priorité à l'orientation client

5. Compatibilité entre navigateurs

Vous devez considérer que certains utilisateurs ne veulent tout simplement pas utiliser des navigateurs Web populaires tels que Chrome ou Mozilla (pour une raison ou une autre). Dans certains cas, ces navigateurs alternatifs utilisent des polices de substitution, comme Arial ou Times New Roman, pour afficher votre texte. Utilisez une police qui peut être affichée correctement par la plupart des navigateurs, sinon tous.

Les quatre formats de police pris en charge par les sites Web sont :

Type ouvert intégré (EOT). Pris en charge uniquement par les navigateurs Microsoft (Internet Explorer et Microsoft Edge)
Police True Type/Police Open Type (TTF/OTF). Fondés par Apple et Microsoft dans les années 1980, ces formats sont pris en charge par tous les principaux navigateurs, à savoir Chrome, Firefox, Opera, Microsoft Edge et Internet Explorer.
Format de police Web ouvert (WOFF). Fondé par Mozilla en 2009, ce format est une version compressée du TTF/OTF conçue pour se charger plus rapidement
Format de police Web ouvert (WOFF2). Une révision de l'ancien WOFF, ses principaux acteurs incluent Chrome, Firefox et Opera ; il est conçu pour remplacer WOFF et le fera éventuellement

Sachez que les formats les plus couramment utilisés à ce stade sont TTF/OTF et WOFF. Les polices qui utilisent ces formats peuvent être affichées correctement dans tous les navigateurs pris en charge.

6. Évolutivité

Avez-vous déjà remarqué que certaines polices sont simplement plus belles et plus fluides que d'autres ? Ces types de polices sont appelées polices évolutives. Ils sont programmés pour se ressembler quelle que soit la taille du texte. Certaines polices ne sont pas programmées de la même manière, et le texte résultant semble simplement moins cher et de moins bonne qualité.

Pourquoi l'évolutivité est-elle importante ? C'est simple. Certaines personnes, principalement des utilisateurs plus âgés, ne peuvent tout simplement pas lire des textes plus petits. Ils doivent zoomer très fort pour pouvoir lire ce que vous voulez qu'ils lisent. Le choix d'une police évolutive enrichit leur expérience avec votre page Web et les fait également se sentir inclus dans votre public.

Polices de conception Web populaires

Maintenant que vous avez couvert les bases du choix des meilleures polices pour votre page Web, voici quelques polices populaires recommandées par les concepteurs.

1. Ouvrez Sans

Open Sans est un type de police "sans fioritures". C'est direct et direct, et cela ne dérange pas votre message. Open Sans est également étonnamment très polyvalent. Il a l'air formel, mais son concepteur lui a également donné une «apparence neutre, mais conviviale».

Il est évolutif, ce qui signifie que vous pouvez le lire en petites et grandes tailles de texte. Il est également optimisé pour les interfaces imprimées, Web et mobiles.

Vous pouvez voir pourquoi Open Sans est couramment utilisé en ligne. En fait, plus de 84 millions de sites Web l'utilisent d'une manière ou d'une autre. Certains de ces sites Web incluent :

Upwork
Vana
Atoll numérique
Magazine Sense

2. Roboto

Roboto est une autre police populaire recommandée par les concepteurs. C'est une police de caractères rigide et géométrique, tout en présentant des "courbes amicales et ouvertes". Les lettres semblent plus serrées les unes par rapport aux autres, rendant la lecture un peu plus rythmée.

La famille de polices Roboto comprend Roboto Condensed et Roboto Slab, ce qui rend toute la famille Roboto flexible. C'est une police qui peut être utilisée pour à peu près n'importe quoi, des titres aux en-têtes en passant par le corps du texte. Dans tous les cas, il semble suffisamment professionnel et convivial pour être mis sur votre page Web.

Il n'est pas étonnant que plus de 630 millions de sites Web, y compris Google et YouTube, utilisent Roboto religieusement.

3. Lato

Lato a été initialement conçu comme une police professionnelle pour un site Web d'entreprise. Parce que le client est allé dans une direction différente, la police a été publiée pour un usage public. Les lettres ont l'air épurées et élégantes, un peu comme une lettre manuscrite à thème rustique.

Il est également agréable à regarder, ce qui fait de Lato un concurrent sérieux pour le corps du texte. Il est également très bon dans les grandes tailles, conservant ses caractéristiques uniques à mesure que le texte devient plus grand.

La familiarité et la chaleur sont également de grands thèmes dans la police. Lato (été en polonais) a également été conçu avec le sentiment d'été à l'esprit. Il est rigide, mais pas trop, dégageant un ton grave mais réconfortant.

Un bon exemple de l'utilisation de Lato peut être trouvé dans Bundl, un site de capital-risque.

4. Helvétique

Celui-ci est un classique. Vous avez peut-être entendu parler de celui-ci, et il a reçu un accueil mitigé selon l'endroit où vous le demandez. Quoi qu'il en soit, Helvetica reste une police solide pour les pages Web. Il s'agit d'une famille de polices très flexible, et vous pouvez l'avoir en gras, condensé ou simplement avoir une police de caractères ordinaire pour votre page Web.

Helvetica a été initialement conçu en 1957 pour être une police neutre, à utiliser à peu près n'importe où. Il a joué ce rôle à merveille, s'imposant rapidement comme l'une des polices les plus populaires d'Internet. La police rend les mots plus faciles à lire à distance et est également parfaite pour les titres. Il reste également lisible et lisible quelle que soit la taille de la police de votre texte.

Helvetica évolue également constamment avec son temps en raison de sa flexibilité. Les marques de différents secteurs utilisent Helvetica d'une manière ou d'une autre, à savoir : BMW, Motorola, Nestlé, Microsoft et Apple. Les autorités gouvernementales comme la NASA et l'Union européenne présentent également Helvetica.

5. Proxima Nova

L'ancien responsable du design de Facebook, Cameron Moll, a publié un article sur l'histoire de Proxima Nova. Il décrit la police comme "incroyablement polyvalente pour les interfaces numériques, fonctionne comme un bourreau de travail dans de nombreuses tailles différentes et est remarquable sur les écrans Retina".

Proxima Nova est une police destinée à capturer la rondeur de polices comme Futura et la géométrie de polices comme Helvetica. Ce n'est pas unique à cet égard, cependant, car d'autres polices ont également essayé de faire de même. Gotham était bien plus populaire que Proxima Nova au début des années 2000. Moll soutient que la disponibilité précoce de Proxima Nova sur le Web a catapulté son statut de police de caractères emblématique.

Depuis lors, elle est devenue la police commerciale la plus populaire en ligne.

6. Montserrat

La police Montserrat a été inspirée par le quartier brésilien du même nom. Il tente de capturer l'ambiance de la typographie de Buenos Aires d'autrefois et de l'adapter aux médias d'aujourd'hui. Pour cette raison, Montserrat suscite la nostalgie et la familiarité de ses téléspectateurs. Il donne un ton sérieux, mais amical, à toutes sortes de supports promotionnels.

Sa popularité est due à son évolutivité et, à son tour, à sa lisibilité. Ainsi, son utilisation n'est pas seulement limitée aux médias en ligne, mais également aux médias imprimés tels que les brochures et les livres. Le manuel graphique du gouvernement mexicain a également défini la police comme sa norme pour les médias officiels.

7. Voie ferrée

Raleway est une police open source élégante. Cela signifie qu'il est gratuit et qu'il peut vraiment tenir sa place dans n'importe quelle conception Web, en particulier son "W" unique.

Les concepteurs aiment utiliser Raleway en raison de son accessibilité, et aussi parce qu'il se combine bien avec d'autres polices. La police elle-même est lisible et offre un attrait chaleureux aux lecteurs. Vous pouvez utiliser Raleway pour à peu près n'importe quel projet adapté à un large public.

8. Source Sans Pro

Source Sans Pro est la première famille de polices open source d'Adobe. Il est conçu pour fonctionner particulièrement bien avec les interfaces utilisateur. Ses formes arrondies rendent les lettres faciles à lire, tout en maximisant les espaces entre chaque caractère.

La qualité la plus remarquable de Source Sans Pro est sa lisibilité, et vous pouvez facilement distinguer des caractères similaires grâce à un choix de conception stylistique. À la base, Source Sans Pro est une question d'accessibilité. Il est facile à lire et d'un ton professionnel. L'Université de Stanford et Adobe utilisent la police pour leurs sites Web.

9. Poppins

Si vous recherchez un ton solide et sérieux pour votre page Web, Poppins est peut-être fait pour vous. Les lettres semblent fortes et linéaires, et sont aussi simples que possible avec une police.

En conséquence, vous n'aurez pas à vous soucier de l'évolutivité de votre texte. C'est aussi vraiment élégant et simple. C'est un choix solide pour n'importe quelle page Web.

Le studio d'animation Wonderlust fait partie des 8,1 millions de sites Web utilisant la police.

10. Géorgie

Conçue par Microsoft, Georgia est une police qui se veut lisible au format numérique. Il apparaît élégant et lisible, même sur des écrans à faible résolution.

Son élégance tient en grande partie à son design d'inspiration romaine. Cependant, cela n'empêche pas du tout les caractères d'être lisibles. En conséquence, l'expérience de lecture est équilibrée à la fois sur le numérique et sur le papier.

Microsoft met régulièrement à jour la police pour lui donner une apparence plus moderne et flexible. La version mise à jour, Georgia Pro, est disponible à l'achat. Cependant, les utilisateurs de Microsoft peuvent obtenir la police gratuitement sur le Microsoft Store.

11. Affichage Playfair

Playfair Display se lit comme du papier journal du 18ème siècle, pas que ce soit une mauvaise chose. Cette police est très élégante et donne un ton très professionnel à votre page Web. Il permet également une lecture sophistiquée et est étonnamment flexible. Vous pouvez l'associer à d'autres polices pour donner à la maison cette sensation de classe.

Comment utiliser efficacement les polices de conception Web

Vous avez reçu une liste de polices à utiliser et comment identifier les polices selon vos besoins. Les utiliser efficacement est un processus entièrement différent. Voici quelques points à surveiller lors de l'utilisation de polices.

1. Appariement et combinaison de polices.

Il n'est pas rare de voir les concepteurs mélanger et assortir les polices pour un plus grand effet. Pensez-y comme passer par votre garde-robe et faire ressortir un t-shirt blanc uni dans l'une de vos tenues. Ou conduire les yeux des gens vers ces nouveaux coups de pied à vos pieds.

Dans le même ordre d'idées, vous pouvez diriger les lecteurs vers certains points de votre page Web même s'ils ne sont pas accrocheurs par eux-mêmes. Vous n'avez qu'à structurer tout le reste autour de lui pour vous assurer que les gens regardent vraiment cet endroit spécifique.

Cela inclut l'utilisation de différentes polices à des fins différentes sur la même page Web, ou quelque chose d'aussi simple que la définition d'un jeu de couleurs esthétique. Maximiser la psychologie des couleurs peut même améliorer les conversions sur votre page Web.

2. Création de polices personnalisées.

Si vous êtes assez créatif, vous pouvez même créer votre propre police à vos propres fins ! Certains services, comme Calligraphr, vous permettent de transformer votre propre écriture manuscrite en format numérique. Si vous cherchez à créer une police que d'autres peuvent utiliser, sachez simplement qu'il s'agit généralement d'un long processus de conception.

3. Licences et droits d'utilisation.

La plupart des polices sont gratuites et peuvent être utilisées à diverses fins, qu'elles soient personnelles ou commerciales. Cependant, certains concepteurs de polices imposent des limites à l'utilisation de leur création. Par exemple, vous devez payer le concepteur pour utiliser une police à des fins commerciales.

4. Tests et optimisation.

Une étape importante de la pré-version de toute page Web est le test et l'optimisation. Vous devez revérifier si le texte est affiché correctement et avec la bonne police, si la palette de couleurs est agréable à l'œil, etc.

LECTURE RECOMMANDÉE : Comment créer un flux de travail de conception et de développement Web transparent

Configuration des polices à utiliser sur les sites Web

Maintenant que vous avez une idée des polices couramment utilisées en ligne, vous êtes prêt à commencer à les utiliser. Voici comment vous pouvez commencer :

1. Téléchargez et installez les polices.

Certaines suites créatives ont déjà des polices préinstallées prêtes à l'emploi. Cependant, si vous trouvez qu'une police que vous aimez ne fait pas partie de votre catalogue, vous pouvez simplement la rechercher en ligne. Vous pouvez également choisir le format que vous souhaitez télécharger (par exemple, si vous utiliserez TTF/OTF, WOFF ou les deux).

De nombreuses polices open source sont téléchargeables gratuitement, mais certaines polices doivent être achetées avant de les utiliser à certaines fins. Si vous envisagez d'utiliser une police à des fins commerciales, assurez-vous de lire les termes de la licence de la police avant de le faire.

Une fois que vous avez trouvé une police, téléchargez-la simplement sur votre ordinateur. La plupart des polices seront au format .ZIP, vous devez donc les extraire. Faites simplement un clic droit sur le fichier et sélectionnez "Extraire ici" pour le faire. Vous vous retrouverez avec un fichier de police prêt à être installé.

Double-cliquez simplement sur le fichier, puis appuyez sur "Installer" sur l'écran de prévisualisation qui apparaît.

2. Intégrez les polices sur votre site Web.

Si vous envisagez de faire le travail par vous-même, vous pouvez parcourir différents guides tels que celui-ci pour voir comment vous pouvez intégrer les polices à l'aide de différentes plates-formes Web.

Gardez à l'esprit qu'il existe une liste de contrôle de conception Web avant de publier votre page Web au public.

3. Assurez-vous de la compatibilité entre navigateurs.

Les polices les plus populaires et les plus couramment utilisées sont déjà dans les versions TTF/OTF ou WOFF, ce qui signifie qu'elles s'affichent correctement sur tous les principaux navigateurs. Cependant, vous pouvez rencontrer une police personnalisée qui ne ressemble pas tout à fait à ce que vous souhaitiez car elle a un format différent.

Si vous souhaitez vous en tenir à une police, vous pouvez essayer certains guides en ligne et rendre votre texte compatible avec plusieurs navigateurs. Il est cependant recommandé d'utiliser des polices qui ont les formats susmentionnés afin que votre conception Web ne soit pas compromise.

Conseils d'optimisation des polices Web

Vous pouvez rencontrer des problèmes avec les temps de chargement de votre page Web. De nos jours, les longs temps de chargement sont le fléau de toute personne naviguant sur le Web. Vos utilisateurs et clients potentiels ne sont pas différents. Voici comment vous pouvez éviter de longs temps de chargement :

1. N'utilisez pas trop de polices.

Celui-ci est assez simple. En règle générale, plus vous utilisez de polices personnalisées sur votre site Web, plus vous ralentissez votre service d'hébergement Web.

La règle générale d'utilisation des polices est de s'en tenir à deux classes de polices : une pour votre en-tête et vos titres, et une pour votre corps de texte. De cette façon, vous pouvez éviter de surcharger votre service d'hébergement et c'est moins éprouvant pour votre équipe de conception. Vos visionneuses peuvent également être désactivées si vous changez fréquemment de police.

2. Utilisez des polices optimisées pour chaque navigateur.

Malheureusement, aucun format ne fonctionne dans tous les navigateurs. Vous devez utiliser différents formats lors de la création d'une page Web. Avec Google Analytics, vous pouvez vérifier quels navigateurs et appareils sont les plus populaires auprès de vos visiteurs.

Si vous êtes à l'aise avec les anciens navigateurs utilisant des polices alternatives, vous pouvez toujours prendre des raccourcis. Mais encore une fois, ce n'est pas recommandé.

Points clés à retenir

Maintenant que la poussière est retombée, il est temps de mettre votre créativité au travail. Vous êtes libre d'utiliser les polices de cette liste ou d'explorer Internet pour trouver des polices personnalisées mieux adaptées à vos besoins. Dans tous les cas, voici trois principaux points à retenir de cet article :

Utilisez une police cohérente avec la voix de votre marque. Cela améliore les relations avec votre public et donne le ton aux nouveaux clients.
Rendez votre marque centrée sur le client. Un aspect important de la conception Web est que vous créez quelque chose que vos utilisateurs apprécieront. pas seulement toi.
N'ayez pas peur d'expérimenter. C'est à cela que sert le processus de conception. Vous êtes censé explorer ce qui fonctionne et ce qui ne fonctionne pas.

Contactez Propelrr dès aujourd'hui pour en savoir plus sur les concepts de conception Web. Nous sommes plus qu'heureux de vous aider. Si vous avez besoin de plus d'aide ou de plus d'informations, contactez-nous via Facebook, Twitter ou LinkedIn.

Pour plus de conseils sur la création de sites Web et d'applications centrés sur l'utilisateur, assurez-vous de vous inscrire à la newsletter Propelrr pour obtenir un accès instantané.