Share
Dans cet article, nous examinerons quelques-uns des services de polices Web les plus populaires, en comparant leurs fonctionnalités et en évoquant les signaux d'alarme associés à l'utilisation de polices réelles sur le Web..
Nous sommes un groupe chanceux, nous les concepteurs Web du présent. Les concepteurs de sites Web d’antan luttent depuis longtemps contre une sélection de polices extrêmement petite et frustrante - les polices système sécurisées pour le Web qui ont fait leurs preuves pour une utilisation sur écran. Vous connaissez leurs noms. Géorgie, Times New Roman, Arial, Verdana - presque tous émettent un léger frisson dans le dos.
Mais plus maintenant. La police web est ici! CSS3 a apporté de vraies polices Web à notre ceinture de service, avec la puissance de @ font-face. Mais avec cette nouvelle technologie, une lourde responsabilité s’impose: le mal de tête lié à l’octroi de licences aux polices pour une utilisation sur le Web. De plus en plus de fonderies fournissent des polices avec licence pour une utilisation en ligne, mais l'hébergement de ces polices vous-même et la compatibilité entre les appareils et les navigateurs sont parfois un autre monde douloureux..
C’est là que les services de polices Web entrent en jeu. Ils gèrent l’essentiel des travaux de gestion de licences et d’hébergement, vous permettant de faire ce que vous faites le mieux: créer des sites Web magnifiques et magnifiques.
Je vais parler de trois des services de polices Web les plus populaires ici. À savoir, Typekit
Fontdeck
et Google Web Fonts.
Tous ces services hébergent vos polices sur leurs propres serveurs et gèrent toutes les bêtises des licences qui vont avec - vous pouvez donc simplement brancher et jouer sans soucis..
Ces services n'utilisent pas tous la même technique pour incorporer des polices. Fontdeck et Google Web Fonts vous permettent d'utiliser une balise pour saisir directement les polices afin de les utiliser sur votre site, alors que Typekit a une approche différente. Typekit vous oblige à inclure un extrait de JavaScript dans votre site, qui récupère les ressources nécessaires à l'exécution..
L'utilisation d'un tag présente quelques avantages évidents. D'une part, cette méthode ne nécessite pas que l'utilisateur active JavaScript. De plus, le script généré par le code de Typekit donnera lieu à au moins 2 demandes http supplémentaires: une pour un autre script et une seconde pour le fichier CSS saisi par ledit script. Fontdeck et Google n’ont pas à subir cela..
Cependant, Typekit a un avantage important en utilisant un script plutôt que tout simplement du vieux CSS - le wf- * Des classes.
Accentsconagua
wf- * Des classesLorsque votre site demande des polices aux serveurs de Typekit via leur code JavaScript, quelque chose d'un peu merveilleux se produit: le script ajoute des classes à l'élément html de votre site, en fonction du statut de la demande de polices..
Les cours sont wf-chargement, wf-active, et wf-inactive. Qu'est ce que cela veut dire pour nous? Eh bien, ces classes peuvent nous aider à éviter FOUT - le flash de texte non-stylé qui apparaît pendant le chargement de nos polices Web. En mettant en forme nos pages de manière appropriée lors du chargement des polices, nous pouvons éviter l'effet de choc que FOUT peut avoir pour notre utilisateur. Consultez cette page pour un exemple - pendant le chargement des polices, une classe de wf-loading est appliquée à la balise html.
En utilisant CSS, nous pouvons masquer tout le contenu et afficher une animation de chargement pour indiquer clairement à l'utilisateur qu'il se passe quelque chose. Une fois le chargement des polices terminé, nous pouvons progressivement ramener notre contenu à la vue. Google Web Fonts vous permet également d'utiliser un script si vous souhaitez bénéficier des avantages de ces classes. En fait, le script derrière ces classes était un effort de collaboration entre Google et Typekit..
Chacun de ces services adopte un modèle de tarification différent. Google Web Fonts est totalement gratuit. Vous pouvez même télécharger les polices pour une utilisation locale sur vos ordinateurs, ce qui est excellent si vous essayez de créer une image de marque cohérente avec la typographie..
Typekit a plusieurs niveaux de prix différents, allant d'un plan gratuit à 99 $ par an. Le plan gratuit comporte un nombre limité de polices, est autorisé sur un seul site Web et vous oblige à afficher un badge Typekit sur votre site Web. Tous les forfaits payants vous permettent de supprimer ce badge et vous permettent de créer davantage de sites Web et d'utiliser plus de polices au fur et à mesure que vous payez. Pour plus d'informations sur leurs tarifs, consultez leur site Web..
Fontdeck adopte une méthode de tarification différente. Ils sont facturés à la police, les polices (au moment de la rédaction) variant de 2,50 dollars par an à la hausse, mais coûtant généralement autour de 7,50 dollars par an..
L'une des principales préoccupations lors de l'utilisation de polices Web est la façon dont elles apparaissent sur la grande variété d'appareils, de navigateurs et de plates-formes. Malheureusement, il n’ya aucun moyen de s’assurer que nos sites Web auront exactement la même apparence sur un appareil qu’ils le sont sur un autre - nous savons que ce n’est pas grave. Nous pourrions néanmoins nous assurer que les polices seront bien rendues..
Heureusement, nos services de polices Web savent que c'est un gros problème. Ils fournissent tous des captures d'écran de la façon dont la police est rendue dans tous les navigateurs populaires, y compris IE6 et les versions ultérieures, Google Chrome, Safari, Firefox et Opera. De manière générale, les polices Web rendent parfaitement bien dans tous les cas. Certaines faces plus claires peuvent sembler en dents de scie dans Windows, mais cela dépend du moteur de rendu des polices de Windows - nous ne pouvons pas en faire beaucoup là-bas..
Une chose à prendre en compte lors de l'utilisation de polices Web sur vos sites est la propriété de rendu de texte CSS. Cette propriété vous permet d’utiliser des fonctionnalités OpenType telles que les ligatures et le crénage, mais à un coût élevé. Dans les navigateurs WebKit sur les distributions Linux et dans Chrome sous Windows avec certaines polices, l'utilisation de cette propriété peut avoir des effets secondaires étranges sur les éléments de texte en ligne..
Dans cet esprit, il est probablement préférable d’éviter cette propriété (actuellement expérimentale). De plus, Firefox implémente non seulement la propriété correctement, mais a également activé les ligatures et le crénage..
Nous connaissons donc les différents services et les différences entre leur fonctionnement, ainsi que les signaux d'alarme liés à l'utilisation de polices Web sur nos sites - mais comment pouvons-nous réellement commencer à les utiliser?
Typecast est un outil particulièrement pratique pour vous salir les mains avec les polices Web..
Typecast vous permet de tester toutes les polices Web disponibles à partir de tous ces services dans un environnement Web réel, où vous pouvez également ajouter du CSS personnalisé, définir des largeurs pour les éléments - le kit complet et caboodle. Les CSS que Typecast produit pour une utilisation sur votre propre site ne sont pas souhaitables - tailles de police, hauteurs de ligne et marges définies en pixels, et non en ems. Mais c’est toujours un outil extrêmement utile pour voir à quoi ressembleront ces polices sur le Web réel..
Si vous manquez d'inspiration pour utiliser des polices Web, le blog Typekit regorge toujours de sites inspirants, ainsi que de quelques informations fascinantes sur la technologie utilisée derrière les polices Web. Il existe également des sites Web tels que Les foires du monde perdu, Just My Type (de votre part) et Good Web Fonts où vous pouvez voir le véritable pouvoir et la beauté des polices réelles sur le Web. Le site Web d'Elliot Jay Stocks est toujours un site Web vraiment inspirant qui présente également les polices Web. (Vous pourriez peut-être dire - j'aime ce genre de choses.)
Pour utiliser réellement les services, ils ne pourraient pas être plus simples. Google Web Fonts est très simple: connectez-vous et trouvez une police qui vous convient, cliquez sur "Utilisation rapide", puis sélectionnez les polices et les variantes souhaitées. Vous obtiendrez un lien que vous pourrez utiliser dans votre site Web ou dans votre fichier CSS via @import, ou un extrait de code javascript que vous pourrez utiliser pour tirer parti des classes "wf- *"..
Fontdeck vous permet de tester la police sur quelques ordinateurs avant de l’acheter pour une utilisation généralisée sur votre site Web. Il suffit de sélectionner la police que vous aimez et ils vous donneront un lien que vous pourrez utiliser sur les sites Web. Testez-le sur quelques ordinateurs en ajoutant leurs adresses IP au site sur Fontdeck. Une fois que vous en serez satisfait, achetez simplement la police pour une utilisation illimitée..
Typekit a un plan gratuit qui vous permet d’utiliser gratuitement une assez vaste bibliothèque de polices, à condition d’afficher un badge sur votre site qui indique que vous utilisez Typekit. Ce n’est pas un mauvais badge, mais si vous voulez le supprimer, vous devrez payer un plan..
Le plan Portfolio est incroyablement étendu, comporte peu de restrictions et son prix est raisonnable, à 49,99 USD par an. Si vous possédez Adobe Creative Cloud, le plan Portfolio est inclus. Pour utiliser Typekit sur votre site, vous créez simplement un "kit" - une collection de polices à utiliser sur les domaines que vous spécifiez. Copiez l'extrait de code javascript sur vos sites Web, ajoutez des polices au kit, sélectionnez les poids et les variations dont vous avez besoin, puis n'oubliez pas d'appuyer sur 'Publier le kit'. Parfois, les serveurs de Typekit peuvent prendre un certain temps pour refléter les modifications, alors laissez-les quelques minutes avant de rafraîchir votre site..
Depuis juillet 2012, Typekit propose une intégration JavaScript améliorée..
Cette nouvelle méthode d'intégration améliore les performances, propose des URL relatives au protocole et un chargement asynchrone facultatif (officiel). Le chargement asynchrone permet d'extraire des polices dans une page sans bloquer la file d'attente pour d'autres actifs en cas de problème..
Avec un peu de chance, vous disposez maintenant de suffisamment d'informations sur les services de polices Web pour plonger et vous faire votre propre idée. Lequel de ces systèmes et fonctionnalités préférez-vous? Avez-vous de l'expérience avec l'un des services? Conseils et astuces que vous souhaitez partager? Faites le nous savoir dans les commentaires!
