Share
Marre avec Arial? Fatigué de Times New Roman? Les méthodes de remplacement de polices se sont considérablement améliorées au cours des deux dernières années, mais il peut souvent être difficile de les distinguer si vous ne les lisez pas constamment. Cet article traitera de différentes techniques de remplacement de polices actuellement disponibles..
Tutoriel republiéToutes les quelques semaines, nous revoyons certains des articles préférés de nos lecteurs tout au long de l'histoire du site. Ce tutoriel a été publié pour la première fois en novembre 2010.
Nous allons examiner les avantages et les inconvénients de chacun, le problème des licences de polices et les meilleures ressources de polices sur le Web, afin que vous puissiez commencer à les utiliser dans vos propres conceptions Web..
"Depuis le début du Web, les concepteurs ont été limités à un nombre limité de polices"
Les possibilités de conception sur le Web semblent augmenter de jour en jour. L’application de technologies telles que HTML5, CSS3 et Javascript a permis la création de nombreux sites Web passionnants et novateurs. Le Web semble avoir parcouru un long chemin depuis l'époque du navigateur en mode texte uniquement. Malgré cela, un aspect de la conception de sites Web est resté relativement stagnant..
La typographie et la sélection des polices font partie intégrante de tout arsenal de concepteurs afin de créer l'aspect et la convivialité d'un site Web. Malheureusement, depuis le début du Web, les concepteurs ont été limités à un nombre limité de polices. Helvetica, Arial et Georgia sont trois des rares polices attrayantes (sans oublier Comic Sans) sur lesquelles les concepteurs peuvent compter en toute sécurité pour s'afficher correctement pour la majorité des utilisateurs Web..
La méthode traditionnelle permettant aux concepteurs de contourner ces limitations et d'exprimer leur créativité avec des polices consiste à incorporer du texte dans des images - cette méthode présente toutefois de nombreux inconvénients. Plusieurs problèmes d'accessibilité se posent et les performances du site Web sont également affectées par l'augmentation des temps de chargement..
Cet article présente différentes méthodes intéressantes d’incorporation de polices non standard dans vos pages Web sans utiliser d’images. Nous examinerons les avantages et les inconvénients de chaque méthode, les problèmes liés à l’utilisation des polices de caractères et ce que cette technologie représente réellement pour les concepteurs Web..
Cuf? N est une méthode extrêmement simple et efficace pour incorporer des polices non standard dans une page Web et dans laquelle sa fonctionnalité ne dépend pas des langages ou des plug-ins côté serveur. Cuf? N fonctionne uniquement sur quelques lignes de code Javascript et utilise une combinaison de VML (langage de marquage vectoriel) pour Internet Explorer et de la fonctionnalité Canvas de HTML5 pour restituer les polices..
Cuf? N fournit un outil de conversion de polices sur leur page d’accueil qui vous permettra de convertir la police choisie en SVG et créera un fichier Javascript que vous pourrez référencer dans votre code HTML. Jeffrey Way, éditeur de Nettuts +, a déjà écrit un excellent tutoriel étape par étape sur la manière d’intégrer Cuf? N à votre page Web..
Cuf? N est un choix populaire pour de nombreux concepteurs Web en raison de ses nombreux avantages et de son nombre relativement limité de points négatifs. Sa non-dépendance à d'autres langages de script ou plug-ins signifie qu'il est accessible à un très large public et qu'il est également pris en charge par les versions récentes de tous les principaux navigateurs, y compris IE 9. Vous pouvez également appliquer directement un style CSS à Cuf? N remplacé texte, y compris les nouvelles fonctionnalités CSS 3 telles que les dégradés. En termes de rapidité, il est beaucoup plus rapide que sIFR et moins intensif, mais il ne doit toujours pas être utilisé pour les gros corps de texte..
Il y a cependant quelques inconvénients à Cuf? N. Il dépend toujours de Javascript pour fonctionner, ce que certains internautes ont peut-être désactivé. De manière décevante, le texte remplacé par Cuf? N ne peut pas non plus être sélectionné et donc copié et collé.
Avantages:
Les inconvénients:
"@ font-face est essentiellement la solution ultime pour les polices sur le Web."
@ font-face a probablement reçu le plus d'attention parmi les méthodes de remplacement de police, mais il y a une très bonne raison à cela. @ font-face est essentiellement la solution ultime pour les polices sur le Web et une solution dans laquelle tous les autres espéraient se répliquer avant d’être entièrement réalisée. @ font-face était en fait inclus dans la spécification CSS2 mais il a fallu jusqu'à présent pour une adoption généralisée.
@ font-face n'utilise aucune technologie Web autre que CSS pour implémenter des polices personnalisées sur une page Web - cela signifie qu'il n'est plus possible de se fier à Flash, PHP ou même à Javascript. Le type réel est rendu lors de l'utilisation de @ font-face, à la place d'un objet vectoriel ou d'images, et par conséquent le texte peut être sélectionné, mis à l'échelle et stylé à l'aide de CSS.
Malheureusement, à l'instar de nombreux autres problèmes liés au Web, ce sont principalement les navigateurs (ainsi que les problèmes de licence dont nous parlerons plus loin) qui ont entravé les progrès de @ font-face. Chacun des navigateurs dominants prend en charge différents formats de police. Internet Explorer utilise .EOT (Embedded Open Type) tandis que les versions récentes de Firefox, Chrome, Safari et Opera prennent en charge .ttf (True Type Format). Open Type Format est également supporté par une combinaison de navigateurs et SVG (Scalable Vector Graphics) est nécessaire pour iPhone et iPad. Cela peut être assez déroutant et parfois, cela peut décourager de nombreuses personnes d'essayer de l'utiliser. Heureusement cependant, il y a de la lumière à l'horizon. Le format de police ouvert sur le Web, ou .WOFF, est en passe de devenir le format standard pour les polices Web et est en cours de normalisation par le W3C. Firefox prend en charge le format depuis la version 3.6, Chrome depuis la version 5.0 et il a été annoncé récemment qu'Internet Explorer 9 prend également en charge le format. Espérons qu'Opera et Safari rejoindront bientôt la fête.
Le seul autre problème mineur avec @ font-face est que, parce qu'il est présenté comme un type réel, les navigateurs et les systèmes d'exploitation individuels le rendront légèrement différemment. Certains services de polices Web, dont nous parlerons plus loin, visent à corriger ces légères variations en utilisant des repères de polices qui lissent les contours des caractères dans les navigateurs, créant ainsi des caractères plus esthétiques..
Si vous souhaitez plus d'informations sur la mise en œuvre de @ font-face sur votre site Web, Jeffrey Way a à nouveau fourni un didacticiel utile expliquant comment procéder..
Avantages:
Les inconvénients:
La prochaine série de solutions s'appuie sur @ font-face pour livrer les produits - chacun d'entre eux est un "service", ce qui signifie: ils utilisent tous la même technologie de base, mais ils offrent des bibliothèques de polices différentes, des options de licence et plans de paiement; Oui, la plupart d’entre elles vous obligent à payer pour les utiliser, mais il est probable que ce sera la voie de l’avenir pour toutes les polices sur le Web..
Font Squirrel est peut-être la ressource de remplacement de polices la plus populaire à l'heure actuelle. Font Squirrel vous évite de vous inquiéter à propos des licences de polices, car toutes les polices fournies sont librement disponibles à des fins commerciales. Le site propose des centaines de polices, allant des polices sans empattement aux polices de style nouveauté..
Comme indiqué ci-dessus, afin de vous assurer que @ font-face fonctionne sur tous les navigateurs, vous aurez besoin de plusieurs formats de police différents. Pour cette police, Squirrel propose une solution. Le site propose des kits @ font-face qui vous fournissent tous les formats dont vous avez besoin, ainsi que le code HTML et CSS nécessaires. Si vous ne trouvez pas le kit @ font-face pour la police que vous souhaitez utiliser, ils fournissent également un générateur qui convertira votre fichier de police dans les multiples formats dont vous aurez besoin gratuitement. Lorsque vous utilisez le générateur, vous devez vous assurer que vous disposez de la licence appropriée vous permettant d’utiliser la police sur votre site Web..
Avantages:
Les inconvénients:
L'API de police de Google est utilisée avec son propre répertoire de polices dans lequel toutes les polices sont à code source ouvert et disponibles pour tous. Le répertoire est en expansion et en croissance constante, abritant actuellement plus de 200 exemples..
Il ne pourrait vraiment pas être plus facile d’incorporer les polices du répertoire à votre site Web. Vous devez simplement sélectionner la police que vous souhaitez utiliser, sélectionner les variantes de la police dont vous avez besoin et Google vous fournira la ligne de code Javascript dont vous avez besoin. Ajustez votre CSS pour répertorier la police utilisée et vous êtes prêt à partir. C'est aussi simple que ça!
Avantages:
Les inconvénients:
Typekit a été l’un des premiers services de polices Web par abonnement et reste toujours très populaire. Typekit et d’autres services similaires traitent le problème de la licence de polices en donnant aux utilisateurs l’accès à une vaste gamme de polices personnalisées en échange d’un abonnement annuel. Cette méthode permet aux fondeurs de polices de recevoir quelque chose en retour de leur dur labeur et évite également le piratage des polices car toutes les polices sont hébergées de manière centralisée sur des serveurs protégés par Typekit. Les utilisateurs du service n'hébergent pas les polices sur leur propre espace Web, mais se connectent simplement à celles-ci..
Typekit s'est associé à certaines des plus grandes fonderies de polices du monde pour vous proposer une gamme de polices variée et variée. Typekit vous donne beaucoup d'options et de contrôle sur les polices que vous utilisez. Sélectionnez différentes variantes de police, poids et glyphes à utiliser. Vous pouvez également créer des piles CSS et sélectionner des polices de secours à utiliser lorsque @ font-face n'est pas pris en charge. Vous devrez également sélectionner les balises HTML spécifiques ou les classes CSS auxquelles appliquer la police personnalisée. Une fois que vous êtes satisfait des sélections que vous avez effectuées, un morceau de code Javascript est généré pour que vous puissiez l'utiliser sur votre site..
Un autre avantage de Typekit est qu’il vise à contrôler les différences dans la manière dont les différents navigateurs traitent le texte et les polices à.
Typekit propose différents forfaits pour répondre aux différents besoins. Un package gratuit est disponible qui vous fournit deux polices à utiliser à partir de leur bibliothèque d’essai sur un site Web. Le site Web est autorisé à consulter jusqu'à 25 000 pages par mois. Vous devez également afficher le badge Typekit sur le site, qui contient des informations sur les polices que vous utilisez. À l'autre bout de l'échelle se trouve le package Performance, qui vous donne accès à la gamme complète de polices pouvant être utilisées sur un nombre illimité de sites Web, sans limitation du nombre de pages vues. The Performance fournit toutes ces fonctionnalités pour un abonnement annuel de 99,99 €..
Avantages:
Les inconvénients:
La ressource de police populaire fonts.com a également lancé un service de polices Web spécialisé, qui propose plus de 8 000 polices à utiliser sur vos sites Web. De la même manière que Typekit, il s’agit d’un service par abonnement, sauf que son prix est calculé sur une base mensuelle. En comparaison avec Typekit, cela coûte plus cher, mais il y a beaucoup moins de restrictions sur les polices. Le package gratuit se compare très favorablement, offrant un accès illimité à 8 000 polices que vous pouvez utiliser sur autant de sites Web que vous le souhaitez. Le package professionnel vous permet également de télécharger et d'installer jusqu'à 50 polices sur votre ordinateur pour les utiliser dans vos conceptions..
Fonts.com Web Fonts propose dans sa collection des polices de caractères de grande qualité, telles que Helvetica, Univers et Franklin Gothic..
Avantages:
Les inconvénients:
La société de conception Web réputée Clear Left, qui a travaillé pour certaines des plus grandes entreprises du monde, s'est associée à OmniTI et a publié Font Deck. Font Deck est un autre service basé sur un abonnement, sauf que vous ne payez que des frais annuels pour chaque police que vous utilisez, ce qui est parfait pour ceux qui souhaitent uniquement utiliser une ou deux polices pour leur blog personnel..
Le prix des polices commence à 2,50 USD par an et par domaine. Les pages illimitées sont autorisées. Toute la sélection de polices est également disponible et peut être essayée gratuitement pour une durée indéterminée, bien que seules vingt adresses IP uniques puissent la visualiser. Ce package gratuit vise à compenser le fait que vous ne pouvez pas télécharger de polices sur votre ordinateur local et les utiliser pendant la phase de conception. Comme Font Deck n’est que relativement nouveau dans la scène, la sélection de polices à choisir n’est pas très grande pour le moment..
Avantages:
Les inconvénients:
Font Spring adopte une approche légèrement différente de celle des services par abonnement et revient à la méthode traditionnelle d’achat de polices. Les polices sont achetées individuellement et vous devez les télécharger et les héberger sur votre propre serveur Web. Font Spring suggère que 99,9% des polices disponibles peuvent être utilisées avec @ font-face.
Le prix de chaque police peut varier et vous devez payer des frais supplémentaires pour la licence d'utilisation de la police avec @ font-face. La licence @ font-face inclut la version OpenType de bureau de la police et les divers formats dont vous aurez besoin pour l'utiliser sur le Web..
L'utilisation de cette méthode présente de nombreux avantages. Si votre cœur est vraiment déterminé à n'utiliser qu'une police en particulier, cela peut constituer une alternative moins coûteuse aux services d'abonnement. Vous pouvez utiliser la police sur autant de domaines que vous le souhaitez, tant que vous en avez le contrôle direct et que le nombre de pages vues est illimité..
En guise d’avertissement supplémentaire, il vous est interdit de convertir ou d’intégrer la police à d’autres technologies telles que sIFR ou Cuf? N..
Avantages:
Les inconvénients:
Ce ne sont là que quelques-uns des services de polices disponibles. Il en existe beaucoup d'autres, tels que Typotheque et Webtype. Chacun a ses propres aspects positifs et négatifs et votre choix doit être fondé sur vos besoins personnels. Certains peuvent profiter de la facilité d'utilisation d'un service d'abonnement, alors que d'autres peuvent ne pas aimer l'idée de céder le contrôle de leur site à un tiers. Si tel est le cas, mieux vaut peut-être télécharger et héberger vos propres polices Web à l'aide de sites comme Font Squirrel..
Les deux suivants (SIFR et FLIR) sont généralement considérés comme une "vieille école" car ils ont leur lot de problèmes, mais ils méritent d’être discutés et connus..
sIFR existe depuis un certain temps déjà. À ses débuts, cette solution offrait un moyen efficace d’incorporer des polices non standard alors qu’il n’y avait pas d’autre option que les images. sIFR ou Scalable Inman Flash Replacement utilise une combinaison de Flash et Javascript pour modifier le texte des pages Web en un élément Flash. sIFR présente de nombreux avantages, notamment que le texte reste accessible aux lecteurs d'écran et qu'il peut toujours être sélectionné.
Le terme "évolutif" dans le nom, cependant, a le potentiel de créer une confusion. sIFR est évolutif en ce sens que l'élément Flash est redimensionné à la taille du texte d'origine du navigateur. Cela lui permet d'afficher tout le texte à la plus grande taille possible dans toutes les dimensions. Toutefois, tout texte remplacé par un élément flash ne peut pas être ajusté lorsqu'un utilisateur redimensionne le texte d'une page. ce qui cause évidemment un problème d'accessibilité. sIFR nécessite également l'activation de Flash et de Javascript sur l'ordinateur d'un utilisateur pour fonctionner.
Mike Davidson, l’un des créateurs de sIFR, reconnaît également les limites de la technologie.. Mike a ouvertement déclaré que sIFR ne devrait pas être utilisé pour des corps de texte volumineux car cela aurait un effet notable sur la performance du site Web. Mike reconnaît également que sa technologie n'est pas la solution finale à la typographie sur le Web et se réfère simplement à un "palliatif"..
Avantages:
Les inconvénients:
FLIR ou Facelift Image Replacement est similaire à sIFR, à la différence qu’il utilise Javascript et PHP pour générer des images au lieu de Flash afin de remplacer du texte. Cette méthode présente l'avantage évident de ne pas perdre de temps à créer des images individuelles pour chaque texte pour lequel vous souhaitez utiliser une police personnalisée. Si vous décidez d'utiliser une police ou une couleur différente pour votre texte, il est également beaucoup plus facile de mettre à jour le texte sur votre site Web..
Malheureusement, outre la facilité d’utilisation et le gain de temps de FLIR, il n’offre guère d’amélioration par rapport à la méthode traditionnelle d’enregistrement de texte sous forme d’images. Le résultat final reste toujours sous la forme d'un texte rendu sous la forme d'une image dans laquelle le texte n'est pas sélectionnable ni redimensionnable.
Avantages:
Les inconvénients:
Le problème des licences de polices est permanent et a contribué à la lenteur des progrès et à l’adoption de méthodes de remplacement des polices. Comme pour les images, vous devez obtenir la permission de l'auteur, sous la forme d'un CLUF (Contrat de licence utilisateur final), pour utiliser une police sur votre site Web. Certaines licences permettent une utilisation gratuite de la police, même à des fins commerciales, tandis que d'autres n'autorisent une utilisation personnelle que sur un ordinateur local..
Lorsque vous utilisez l'une des méthodes de remplacement de police décrites ci-dessus, vous incorporez effectivement une police dans votre site Web ou créez un lien vers une autre qui a été téléchargée sur votre serveur Web. De nombreuses licences de polices, même gratuites, ne le permettent pas. La plupart des créateurs de polices et des fonderies ne le permettent pas, car les utilisateurs du site ont un accès direct au fichier de polices et craignent que leur police ne soit téléchargée et distribuée illégalement. Ce problème a empêché de nombreux créateurs de polices de rendre leurs polices disponibles pour une utilisation avec des méthodes telles que @ font-face.
Il est donc primordial que, lors de l’utilisation de l’une des méthodes décrites ci-dessus, vous vous assuriez absolument que la licence de polices le permet..
Heureusement, ce problème n’a pas complètement empêché le développement de méthodes de remplacement de polices et de nombreuses ressources sont disponibles pour vous permettre d’utiliser des polices personnalisées sur votre site Web..
"La perfection ne vaut pas la peine d'attendre, sinon vous risquez de rater de nouvelles opportunités excitantes"
Nous avons beaucoup discuté ci-dessus, et il est clair qu'il existe de nombreuses options pour ceux qui souhaitent utiliser des polices personnalisées dans la conception de leurs sites. La bonne nouvelle est que toutes ces méthodes sont disponibles à l’utilisation actuelle. C'est vrai; aucune des méthodes n'est parfaite, chacune ayant ses points forts et ses points faibles. @ font-face est évidemment le plus prometteur, mais il faudra probablement attendre quelques années avant qu'il ne soit absolument à l'épreuve des balles. La vérité est que même si la situation est rarement parfaite dans le monde de la conception Web, des compromis et des solutions de contournement seront toujours nécessaires pour mettre en œuvre les nouvelles technologies. La perfection ne vaut pas la peine d'attendre, sinon vous risquez de rater de nouvelles opportunités excitantes.
C'est vraiment une période passionnante pour la conception Web, et il semble y avoir une appréciation et une compréhension croissantes de la typographie sur le Web. Les méthodes de remplacement des polices offrent une excellente occasion de créer de nouveaux modèles innovants et je crois que la clé est de ne pas abuser de cette technologie. Fournissez toujours des solutions de rechange en cas de problème et utilisez chaque méthode avec discernement (ne modifiez pas tout le texte de votre site en conséquence). Prenez le temps d'apprécier et d'apprendre sur le bon type et le Web sera un meilleur endroit pour cela.
Avez-vous vos propres idées à ce sujet? tu as une question? Si nous avons manqué l'une de vos méthodes préférées, postez-les ci-dessous dans la section commentaires et nous nous assurerons de l'inclure dans cet article.!
Accentsconagua