La conception Web a fait son apparition le jour où les webfonts sont entrés dans une large diffusion. Avant cela, on peut dire que nous étions moins des concepteurs que des ingénieurs.
Cependant, l'enthousiasme avec lequel nous avons saisi les options de polices de caractères dans la conception de sites Web a conduit à un éventail déconcertant de choix. à tel point que de nombreux concepteurs optent pour la voie de la moindre résistance, permettant le désir d'une mise en œuvre simple pour dicter leur typographie.
Si vous savez ce que vous recherchez, toutes les options sont simples. Dans cet article, nous vous fournirons les connaissances dont vous avez besoin pour prendre des décisions éclairées lors du choix entre les technologies de polices.
Nous allons illustrer ces options en nous concentrant sur la meilleure façon de fournir une police de caractère classique, Garamond.
Après avoir vanté les vertus des webfonts, la première option que nous considérons n’utilise pas de webfontes. L'empilement de polices est une technique CSS dans laquelle vous spécifiez un certain nombre de solutions de secours en commençant par votre premier choix et en terminant par une solution fourre-tout.
Il y a beaucoup de ressources d'empilage de polices en ligne, mais l'un de mes favoris est cssfontstack.com C’est un excellent point de départ pour une pile de polices, mais sachez que vous aurez souvent besoin de faire appel à une certaine expertise.
Selon cssfontstack.com, Garamond est disponible en tant que police système sur 49,91% des Mac et 86,47% des machines Windows. C'est plutôt bien, mais pas assez. Voici la pile de polices suggérée qui couvre toutes les bases:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;La question est: comment pouvons-nous améliorer cela?
Eh bien, nous savons que de nombreuses versions de Garamond sont disponibles, de sorte que nous pouvons ajouter une variante dans le second emplacement en tant que compromis mineur.
Deuxièmement, je ne suis pas d'accord que Baskerville ou Times soient des substituts adéquats pour Garamond, alors laissez-les tomber. Hoefler Text fonctionne bien à la place de Garamond, pour que cela reste. Nous devons ajouter des empattements comme attrape-tout final, mais comme la plupart des systèmes utilisent Times comme serif par défaut, plaçons la Géorgie dans une position bien supérieure pour quiconque traverse les fissures.
Notre pile de polices modifiée finale ressemble à ceci:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;La majorité des téléspectateurs vont voir Garamond, quelques autres verront un compromis raisonnable et une infime minorité ne verra que sa police serif par défaut.
L'empilage des polices est gratuit, de loin la solution la plus rapide et, selon la police choisie, peut être très efficace. dans le cas de Garamond, il y a un bon argument pour appeler ce «travail accompli».
Il y a cependant un problème majeur avec l'empilement de polices, en particulier avec une police de caractères comme Garamond: il y a tellement de versions de pirate en circulation qu'il est impossible de savoir quelle police est nommée "Garamond". le design est conforme à nos attentes, la taille de la police peut être radicalement différente de la version de notre conception. (Techniquement, rien n'empêche que Arial soit renommé "Garamond", auquel cas notre police de caractères l'utilisera.)
L'empilage de polices est donc une sauvegarde superbe et doit être pris en compte avec toutes les solutions ci-dessous, mais il ne s'agit pas d'une solution idéale.
Google Fonts est, pour de nombreux concepteurs, le point auquel ils mettent fin à leur recherche. Pour un total de 0 $, vous pouvez facilement charger des fichiers Web sur votre site à l'aide de CSS.
Le seul inconvénient est que le nombre de polices proposées est extrêmement limité. Des caractères tels que Roboto et PT Sans doivent leur popularité autant à leur disponibilité sur Google Fonts qu’à leurs qualités de conception.
Actuellement, la seule variante de Garamond disponible sur Google Fonts est EB Garamond, une tentative d'ouvrir la police de caractères Garamond. Mais le défaut de cette version est qu’il n’ya qu’un seul poids et style disponible; il n'y a pas de gras ou d'italique. Le designer Georg Duffner a généreusement mis à disposition son travail sur Bitbucket mais ce n'est pas la production prête.
Google Fonts est une solution économique idéale pour les situations où vous payez la facture plutôt que votre client. Être capable de spécifier vos polices en CSS est aussi simple que possible.
Le gros défaut de Google Fonts est que malgré leur marketing, le choix est très limité. Si vous cherchez une webfont d'Open Sans, alors vous êtes au bon endroit, mais si vous voulez une police comme Garamond, qui n'est guère obscure, c'est un délabrement.
Auto-hébergement est une approche très sous-estimée pour les webfonts. Son principal atout est la possibilité de sous-ensemble des polices, une option si attrayante que presque tous les services de streaming tentent de l’émuler.
Si vous avez une copie de bureau de Garamond sur votre système, ouvrez-la et vous verrez un nombre déconcertant de caractères. La création d'une police est le processus de suppression des caractères non essentiels, ce qui réduit la taille du fichier et accélère la livraison.
Bien sûr, les caractères dont vous avez besoin dépendront du site que vous construisez: si vous construisez un guide touristique à Dubrovnik, vous aurez probablement besoin de caractères cyrilliques serbes; Si vous reproduisez les œuvres collectées de Shakespeare, il est peu probable que vous ayez besoin d'un symbole @.
Afin de définir une police, vous aurez besoin d'un logiciel d'édition de polices. Il y a beaucoup d'options disponibles de la libre FontForge à la prime FontLab Studio. Pour produire une version de sous-ensemble de la police, sélectionnez simplement un glyphe que vous ne voulez pas et supprimez-le, puis enregistrez le fichier dans votre dossier de projet. (Veillez à ne pas écraser votre fichier de police d'origine!)
Le fichier .ttf complet pour Adobe Garamond Pro est de 606 Ko. Le réduire à des caractères latins de base et à la ponctuation le réduit à 56 Ko. Multipliez cela par plusieurs poids et styles et vous économiserez quelques téléchargements de Mb in pour vos utilisateurs.
La plupart des fichiers de polices que vous avez installés seront TrueType (.ttf) avec un peu d’OpenType (.otf). Vous pouvez les enregistrer sur votre serveur et les spécifier dans votre CSS.
La prise en charge des formats de fichiers .ttf et .otf est répandue dans tous les navigateurs modernes, à l'exception d'IE (même la dernière version) et de certains navigateurs mobiles (y compris les anciennes versions d'iOS Safari).
Pour augmenter votre couverture, vous aurez besoin de plusieurs formats supplémentaires. .eot fonctionne pour IE, .woff fonctionnera pour la plupart des navigateurs et est le format préféré du W3C, .svg fonctionnera sur les navigateurs existants. Il existe un certain nombre de services Web qui généreront ces formats à partir de votre fichier .ttf, l’un des plus populaires étant Font Squirrel's.
L'inconvénient de la conversion des polices de bureau pour une utilisation en ligne est double: premièrement, vous n'êtes presque certainement pas autorisé à le faire; et deuxièmement, les polices de bureau sont presque toujours optimisées pour l’impression, elles ne sont tout simplement pas bien affichées à l’écran.
Les fonderies de polices de caractères ont enfin pris conscience du fait qu'il existe un marché énorme pour les webfonts. En conséquence, ils ont non seulement renforcé leurs licences, mais ils s’efforcent également d’optimiser leurs back-catalogs pour les écrans.
Les fonderies fournissant des webfonts dédiées fournissent tous les formats requis, vérifiés en qualité et prêts à être téléchargés sur votre serveur. De plus, vous êtes toujours libre de sous-traiter un fichier et vous ne dépendez pas de la disponibilité du serveur tiers.
Il existe de nombreux endroits où vous pouvez acheter des webfonts, deux des principaux acteurs du domaine sont FontShop.com et MyFonts.com .
En revenant à notre dilemme Garamond, nous pouvons voir que MyFonts propose différentes versions de Garamond. Nous pouvons licencier Adobe Garamond dans plusieurs poids, limité à 250 000 pages vues, pour environ 180 $.
FontShop propose également un certain nombre de versions Webfont de Garamond. URW Garamond Web fournit tout le poids et le style que nous pourrions souhaiter, le tout avec un généreux 500 000 pages vues par mois. De plus, FontShop a un dédié sous-ensemble pour optimiser vos nouveaux achats de polices brillantes. Malheureusement, vous payez une prime d'environ 680 $ pour la famille de polices complète.
Auto-hébergement permet de sous-configurer. Cela vous permet de garder le contrôle de la diffusion de vos polices et d'éviter toute dépendance vis-à-vis de serveurs tiers.
De plus, si vous achetez un site Web professionnel, vous pouvez vous attendre à ce que la qualité soit extrêmement élevée.
Auto-hébergement attire également ceux d'entre nous qui préfèrent "posséder" nos polices plutôt que de les louer. Bien sûr, sur le plan juridique, il y a très peu de propriété, mais une redevance unique est plus confortable qu'un abonnement pour beaucoup de gens.
Le seul inconvénient de l'auto-hébergement est le prix substantiel. Non seulement vous devrez payer pour la police, mais vous devrez peut-être intégrer les coûts d’hébergement et de bande passante dans vos chiffres.
Tout comme Google Fonts, les services Webfont fournissent des polices à nos navigateurs via des CSS simples. Contrairement à Google Fonts, vous pouvez choisir parmi une vaste gamme.
Il y a un certain nombre de fournisseurs différents à choisir, et j'aime particulièrement Hoefler & Frere-Jones ' cloud.typographie un service. Cependant, comme avec de nombreux petits fournisseurs, leur utilité dépend entièrement de la disponibilité de la police que vous recherchez. Hoefler Text est la police la plus proche que Hoefler & Frere-Jones peut fournir, mais si nous payons une prime, nous ne devons pas faire de compromis.
Le plus grand acteur du streaming webfont est Adobe Typekit . La qualité de leurs polices est très élevée, l'implémentation est simple et, surtout, leur catalogue est énorme.
Typekit propose une gamme d’abonnements allant de 24,99 dollars par an pour 50 000 vues par mois à 99,99 dollars par an pour 1 000 000 vues par mois. Cependant, si vous êtes membre de Creative Cloud, le plan de portefeuille est inclus dans votre abonnement; ce qui signifie que pour la plupart des concepteurs Web, Typekit est une solution gratuite.
Une recherche rapide nous indique qu'il existe plusieurs versions de Garamond, y compris Adobe est propriétaire, disponible sur Typekit. Et, il existe également une fonctionnalité de sous-ensemble très limitée qui nous permet de réduire légèrement la taille du fichier.
Les services de streaming Webfont offrent une grande variété de polices d'excellente qualité, faciles à ajouter à votre site.
Dans le cas de Typekit, si vous êtes déjà membre de Creative Cloud, l'accès gratuit en fait une option encore plus attrayante. Cependant, si vous n'êtes pas membre, vous avez le choix entre payer un abonnement substantiel et vous lier à Adobe.
Mon principal souci avec tout service de streaming est que vous êtes entièrement dépendant des performances d'un serveur tiers. Si leur serveur tombe en panne, une partie substantielle de votre image de marque fait de même.
Comme pour beaucoup de choses, la réponse est: cela dépend de votre projet. Mais nous pouvons prendre certaines décisions sur la base de notre test Garamond:
L'empilage de polices est une sauvegarde gratuite, il offre une solution sur-marque si et lorsque des fichiers de polices disparaissent ou que les services de diffusion sont lents. Il doit toujours être mis en œuvre sur n'importe quel site, mais le faire même pour quelque chose d'aussi commun que Garamond est potentiellement dangereux.
Si la police que vous recherchez est disponible pour la diffusion gratuite, que ce soit via Google Fonts ou, par exemple, si vous avez un abonnement Creative Cloud, alors c'est un bon choix. Comme je suis abonné à Creative Cloud, je serais tenté par cette voie, même si le manque de sous-ensembles réels serait un problème.
Si vous avez le budget, l'auto-hébergement d'un site Web professionnel est le meilleur choix. Le coût relativement modeste, comparé à la photographie de stock, est facilement justifié par l’énorme accélération de la mise à disposition des sous-ensembles.
Dans un secteur où nous minifions des fichiers JavaScript pour économiser quelques Ko, réduire des centaines de fois ce nombre à partir d’un seul fichier est une évidence.
Image / vignette en vedette, télécharger l'image via Shutterstock.