Les polices “web-safe”

Je vous parlais de ces polices dites “web-safe”, que l’on peut utiliser sans trop de soucis de compatibilité entre les clients et les navigateurs. Je vous avais aussi parlé du tableau que je m'étais construis pour consigner la liste de ces fontes.

Je n'ai pas mis à jour ce tableau. Normal, aucune révolution numérique ne va ajouter une police par défaut à tous les ordinateurs du globe.

Ceci dit, les évolutions des navigateurs ont permis une amélioration du rendu de ces fontes.

text-rendering: optimizeLegibility;

Par exemple, l'instruction CSS précédente va permettre, sous Safari, Chrome & Firefox (où elle est appliquée, par défaut, sur les polices de corps supérieurs à 20px), d'améliorer les ligatures et l'approche typographique.

Un exemple sur le titre du blog de Kyle Meyer, astheria :

Un autre exemple est l'instruction "font-size-adjust”, qui permet de normaliser la hauteur d'x (fonctionne uniquement sur Firefox).

Une autre pratique émerge au niveau des font-stack. Vous le savez certainement, lors de la définition des polices de caractères utilisées dans un site, il est possible de lister les fontes dans leur ordre de préférence d’affichage.

font-family: “Helvetica neue”, Arial, sans-serif

Dans cet exemple, si l’utilisateur possède la fonte “Helvetica Neue” d’installée sur son poste, le texte sera affiché avec cette police. Si il ne la possède pas, on l’affiche en Arial, etc…

Revenons à nos moutons : souvent, ces font-stacks sont constituées d’une liste de polices “web-safe”. De plus en plus, les designers utilisent d’autres polices, pour permettre à ceux qui en sont équipés un affichage plus agréable des pages. Pensez donc bien à votre cible, et prenez garde à choisir des familles de polices qui ont à peu près la même chasse.

All for Design en est un excellent exemple (cocorico) avec son font-stack : font-family:Garamond, Baskerville, “Times New Roman”, serif;. Profitez-en pour lire son article sur le making-of de ce site, passionnant.

Au passage, une excellente ressource quant à la disponibilité des fontes en fonctions des profils d’internaute est visible sur 24ways, appellée font-matrix.

En résumé :

• Continuez à faire attention à bien utiliser des polices répandues;
• Surveillez les nouvelles fonctionnalités CSS, une simple ligne peut parfois grandement améliorer le rendu typographique de l’ensemble de la page;
• Enrichissez vos familles de polices avec des fontes moins répandues de chasse approchante. Ceux qui peuvent en profiter apprécieront, les autres n’y verront que du feu.

les “hacks”

Je vous parlais il y a un an de solution alternatives pour intégrer des polices comme sIFR (dont la version 3 apporte de grandes améliorations), Cufón ou Typeselect.

Sur ce blog, les titres sont affichés en Alternate Gothic grâce à sIFR, à base de technologie Flash. Depuis, il y eu les grands débats sur l’usage de Flash (avec l’iphone puis l’ipad). Je ne me prononcerais pas sur ces débats stériles, mais sachez que pour faire votre choix, il faut prendre en compte les éléments suivants :

• Le site concerné aura-t-il d’autres modules en Flash? Par exemple, je présente des travaux en Flash sur ce book. à priori, les gens auront besoin d’un plug-in Flash installé pour lire ces animations.
• La police de caractère que vous voulez utiliser a t-elle des restrictions de license? Pour certaines polices, il sera possible d’utiliser sIFR, mais pas Cùfon ou @font-face. C’est le cas de l’Alternate Gothic de mes titres (voir la licence ici).
• Si vous avez répondu “non” aux deux questions précédentes, n’utilisez pas sIFR. Ne vous embarrassez pas d’un plug-in Flash, les alternatives s’appliqueront à merveille.

@font-face

Rappel de mon précédent article : la propriété CSS3 @font-face, déjà prise en compte par Safari (>3.1), Opéra (>10a), Firefox (>3.1b) et Chrome, permet de lier un fichier de police (ttf, otf) à une page web.

Il fallait s’y attendre, cette solution a explosé. Font-squirrel a une bibliothèque de polices gratuites de très bonne facture, que vous intègrerez dans vos sites avec une ridicule facilité.

De son côté, Typekit, solution payante, devrait être adoptée par toute agence web qui se respecte. Leur bibliothèque est fournie en fontes de qualité, et ne cesse de s’agrandir. Les fonderies les plus connues s’y sont mises (Hoefler & Frere-Jones, vous nous manquez!) : Veer, Suitcase, The League of Moveable Type, etc… Fontshop a même ouvert de nouvelles perspectives en permettant à ses clients de lier leurs achats de police à leur compte Typekit, rendant ainsi la bibliothèque expansible. Et encore une fois, l’usage de typekit est simple comme bonjour.

N’oubliez pas fontdeck, par Clearleft, qui a encore une bibliothèque toute jeune, mais qui est un service très prometteur.

Enfin, même si l’intégration de ces services est extrêmement simple, améliorez-la avec ces quelques recommandations sur l’usage de @font-face consignées ici par Paul Irish.

Conclusion

Le champ des possibles ne cesse de s’agrandir, nous avons de plus en plus de liberté quant au choix des polices que nous pouvons utiliser sur le web.

Attention à ne pas oublier :

• que certaines polices ne sont pas adaptées à un affichage sur écran;
• que ce n’est pas parce que vous mettez plus de polices différentes que votre page sera plus jolie;
• que “typographie” ne veut pas dire “choisir une police”;
• qu’il est possible d’aider automatiquement vos clients à améliorer le rendu typographique de leus contenus grâce à des lignes CSS, des plugins comme wp-typography ou des modules PHP comme php-typography.

On en reparle dans un an?

L’exception à cette règle arrive en ces rares occasions où vie privée et professionnelle se mélangent, ici sous la forme de cartons d’invitation à mon mariage (merci pour vos félicitations).

L’occasion de quitter mes 72dpi habituels, de tripoter du papier, de rencontrer des gens dont le métier est d’appliquer de l’encre sur ledit papier, et surtout, de se faire plaisir sans aucune contrainte client.

La réception sera donnée sur le thème des festivités champêtres 1900. J’ai donc choisi un rendu purement typographique, aux couleurs unies (1 à 2 encres maximum). J’ai joué avec cette superbe police, débordante de ligatures, qu’est la Phaeton, agrémentée d’ampersand de Kyle Jones.

J’avais en tête un mode d’impression bien particulier, qui a rendu la maturation de ces invitations longue et difficile. C’est finalement le musée de l'imprimerie de Nantes qui a eu la gentillesse de me donner les coordonnées d’Hugues Gruet, imprimeur à Bouaye, qui est l’un des rares à travailler à l’ancienne, avec la méthode que je recherchais, dite d’impression typographique.

L’occasion de remercier ce monsieur, qui édite encore ses factures à la machine à écrire, pour m’avoir fait un travail artisanal exceptionnel, que je vous laisse apprécier au travers de ces quelques photos…

Et pour les curieux, le papier utilisé est du Velin d’Arches en 270 grammes (tout doux!)

Je suis tombé ce matin sur ImageOptim, un logiciel gratuit pour Mac OS X qui m’a semblé extrêmement simple d’utilisation, en plus de concentrer plusieurs scripts différents d’optimisation d’image.

J’ai un peu joué avec, voici un rapide retour d’expérience…

J’ai choisi comme exemple le blog de stéréosuper. Après intégration et optimisation des images sous Photoshop (“enregistrer pour le web”), je dispose d’un dossier “LayoutImage” contenant 28 images de formats divers, png, gif et jpg. Ce dossier pèse 392Ko.

L’interface d’ImageOptim est basique. Je glisse tout simplement le contenu du dossier ImageOptism dessus, il traite les fichiers et les remplace automatiquement. Facile.

Ok, c’est simple. Au niveau du poids des fichiers, le dossier pèse à présent 316 Ko. Soit une réduction de 20%, pour des images que j’ai déjà optimisé à l’oeil, dont les propriétés sont très différentes, tant au niveau des dimensions, des transparences que des formats de fichier.

Les images aux dimensions les plus importantes sont aussi celles qui ont le plus gagné, de même que les fichiers png avec couche alpha, même si l’on savait déjà que photoshop n’était pas l’outil le mieux adapté pour ce format d’image.

La vraie question, c’est la qualité visuelle. Voici un comparatif avant/après :

À l’oeil, et en regardant en détail, pas de différence notable. Chapeau, messieurs de chez ImageOptim. Note : je travaille sans profil colorimétrique pour le web, je n’ai pas testé avec des images incluant un profil : prenez garde ! Bien sûr, il faudra encore quelques tests avant de rendre cette opération systématique après intégration.

En attendant, si un simple glisser-déposer me permet de réduire un dossier image d’environ 20% sans différence visible, je ne vois pas pourquoi m’en priver !

Le mieux, c’est que j’y voit non seulement des application pour l’intégration HTML/CSS, mais aussi pour les séquences d’images importés dans Flash. Je vous tiens au courant. D’ici là, je ne cracherais pas sur vos retours d’expéreience…

Du jazz, des hamsters, des instruments miniatures, une réalisation impeccable, des castings en bonus…
Comment trouver quoi que ce soit qui ne soit pas mignon là dedans ?

Si quelqu’un peut me donner le nom de l’agence coupable de cette attaque digne d’un bisounours, je serais plus que ravi de découvrir ses autres méfaits et de les créditer ici.

À l’initiative de Herraiz Soto & Co, Ommwriter tente de rendre aux amoureux de l’écriture — concepteurs, rédacteurs, journalistes, écrivains — le rapport intime et calme de la feuille blanche.


L’idée est de passer en arrière plan non seulement vos boîtes email, twitters, chats, calendriers, alertes, mais aussi toutes les fonctionnalités d’interface, de mac OS aux options de mise en forme (visibles uniquement lorsque l’on bouge la souris).

J’adore cette façon d’aborder ce logiciel vieux comme l’informatique qu’est l’éditeur de texte. En revenant à l’essentiel, à ce dont certains ont besoin, et en oubliant les autres.

Une très belle initiative, qui a su garder son essence jusqu’à la version que vous pouvez télécharger, ce qui n’a pas dû être une mince affaire (à grands coups de conseils de la femme du boss “t’es sûr qu’on ne peut pas mettre le titre en fuschia?”)

Leur site est superbe, ce qui ne gâche rien.

Typographie

Découvrir la bibliothèque de fontes de Mota Italic, une nouvelle fonderie bien prometteuse, est plus que recommandée.

Flash

Nouvelle mouture pour le site de Soleil Noir, toujours aussi propre. J’adore cette version, super efficace.

Design

Jolie découverte, Soul Seven a des références sublimes en print, logotypes et design.

Graphic design

Je vous met au défi de ne pas aimer le travail de Mark Weaver.

Divers

Moi qui adore les schémas scientifiques rapportés à la vie quotidienne, je suis servi avec NEW MATH de Craig Damrauer. Super astucieux, dans le même esprit que le travail de Jessica Hagy, en mieux.

Webdesign

J’adore comment a été géré l’espace dans ce site, pour une agence de voyage spécialisée dans la chasse à la poudreuse fraîche, wasabi.

 

Superbe réalisation que ce site communautaire autour de l’art culinaire, Culinary Culture. Je n’arrive pas à trouver qui l’a signé — mais si vous avez des idées, j’aimerais connaître le responsable pour étudier ses autres méfaits.

Et un peu d’auto-promo…

Une nouvelle version de rhooo, le catalogue des bonnes boutiques online où j’interviens, est en ligne. Profitez-en pour trouver vos cadeaux de noël.

Je vais quand même continuer à vous faire partager mes découvertes, la sélection n’en sera que plus drastique. Ce qui ne m’empêche pas d’avoir une hotte pleine de liens depuis mon dernier post.

Photographie

L’excellente nouvelle, c’est la confirmation que les films Polaroïds reviennent pour le milieu de l’année prochaine. Il faut dire que face au buzz impossible project, la société Polaroïd a décidé de se joindre à l’opération. Bingo.

En attendant de pouvoir ressortir du placard mon SX70, je pense bientôt fondre sur le craquant petit Instax mini 7 de Fuji.

iPhone

Adobe a annoncé l’arrivée prochaine d’applications iphone bâties à l’aide Flash. Avant de me réjouir, j’attend de tester les performances, et surtout de vérifier que la qualité des applications de l’iTune Store ne va pas s’effondrer face à cette démocratisation.

Parlant qualité d’application, tweetie pour iPhone vient de sortir une version 2 d’une qualité rare. Les améliorations par rapport à la version 1 sont réelles, pertinentes et démocratiques. Atebits vient d’entrer dans mon rang des sociétés qui ont la classe.

Flash

Réalisation impeccable pour le site de Diego Monetti, dont le ton pédant-décalé a été soigné — appréciez la perle suivante :

Votre configuration doit être à la hauteur de mes oeuvres.

J’adore. Le buzz sera mérité.

Graphic design

Gary Austin — Seven Zero — cherche un stage ou un travail. Une honte.

Et pour continuer sur les portfolio à tomber, voici celui de Janine Rewell.

Illustration

Et pour finir, je ne vais pas vous cacher mon gros coup de coeur pour les illustrations de Lois Van Baarle. Favoris sans réfléchir.

Photographie

À seulement 16 ans, Jacqueline Rivera possède un Flickr sacrément bien rempli en clichés qui valent le détour.

Outil e-commerce

Une solution e-commerce qui sent bon, dont le site présente un design soigné et attirant. À tester…

Graphic Design & typographie

Et enfin, Martin Plonka nous livre une superbe classification de polices sous forme de poster, que je mettrais volontiers sur mes murs.

Un peu maigre sélection cette semaine, je vous l’accorde. Rattrapez-vous donc en lisant le blog de stéréosuper, ainsi que les quelques dernières boutiques que j’ai déniché pour rhooo!

Soyez sages, à la semaine prochaine…