J’ai plein de bonne raisons. Mon apocalyptique emploi du temps est le pire responsable. À ceci, il faut ajouter que je préfère me servir de Twitter, Dribbble, Gimme Bar, Svpply, Rhooo, et (presque pas beaucoup plus) le blog de stéréosuper pour partager mes découvertes de l’interweb et cracher mes humeurs.

Moralité, dès que j’ai le temps, je transformerais ce site en une jolie carte d’identité. Avec des liens vers tous ces trucs d’uber-connecté.

Si des articles vous intéressent, je vous conseille de les archiver. Parce qu’un jour ou l’autre, j’en aurais suffisamment marre pour faire table rase.

Allez hop, en bonus, mon dernier travail en impression typographique, pour mes copains de chez Nowhen…

Faut dire qu’il y a l'autre, de blog, celui où je suis un gérant de société (et le travail qui va avec). Lisez-le d’ailleurs, il est moins vide.

Heureusement, il y a ces petits projets perso qui me donnent une bonne excuse pour poster. L’excuse aujourd’hui, c’est donc une invitation faite pour un copain, que je n’ai pu poster avant, surprise oblige. Ambiance marin d’eau douce, photo vintage et bricolage typographique. : tout ce que j’aime.

Et pour ceux qui veulent plus de nouvelles, plus souvent, j’alimente toujours mon twitter (en anglais), un peu celui de Stéréosuper (en français).

Et pour ceux qui veulent plus de réalisations, plus souvent, j’alimente toujours aussi beaucoup mon Dribbble.

Vous l’aurez remarqué au passage, j’ai supprimé la partie portfolio de ce site. Elles étaient trop vieilles, trop inutiles, trop DDB, et surtout… pas assez Stéréosuper.

J’ai choisi pour ce premier projet de travailler sur un poster typographique & humoristique, qui présente une sorte de pseudo schéma de soirée-type avec mon ami Julien. Il vous rappellera peut-être certaines de vos soirées.

Voici le résultat :


Vous pourrez retrouver les étapes de création sur Dribbble (captures d’écran localisées), Twitter (mes pensées en cours de projet), emberApp (captures d’écran globales) et Flickr (résultat final et ressources).

Et pour chacun de ces projets, je mettrais à disposition gratuitement, le cas échéant, les outils et ressources produites. Pour ce projet, il s’agît d’une photo de texture HD de trace de fond de verre sur une nappe, à télécharger ici.

Faut dire que je commence à en entasser quelques uns, des jeux de cartes typographiques. L’espèce est rare, se situe entre l’objet d’art, la collection, l’apprentissage et le ludique d’aficionados prétentieux. Rien que ça.

L’occasion de vous en présenter quelques uns, et de vous faire un petit retour d’expérience. Et surtout, puisque tout le monde se pose la question, de vous dire si ça sert vraiment à quelque chose de posséder ou de jouer ces cartes.

Type Trumps 1 & 2

Le principe

Sur la base d’un jeu de bataille, le but est de voler toutes les cartes de ses adversaires. Lors d’une manche, tous les joueurs montrent leur carte, sur laquelle est présente une police. Le premier joueur énonce la caractéristique typographique de sa carte qu’il pense être plus forte que les autres (nombre de graisses, lisibilité, prix, année, etc…). Sur la base de cette caractéristique, le joueur qui a la police la plus forte remporte la manche.

Difficulté

Il faut quand même une certain niveau de connaissance de la typographie pour jouer à ce jeu, et c’est sans doute le plus érudit qui gagnera. On peut dire que c’est de la pure masturbation de typographe :)

Esthétique

Si l’étui en carton est un peu moyen, les cartes sont en revanche magnifiques, avec une mise en situation des polices concernées brillamment exécutée.

Pédagogie

On apprend beaucoup avec ce jeu. Ce que je trouve intéressant, c’est de traiter des aspects des polices trop souvent ignorées par les graphistes. Pourtant, au delà de l’esthétique pure, ces caractéristiques sont souvent cruciales lorsqu’il s’agit de trouver la police la plus adaptée à un projet (histoire, année, etc…). C’est donc une très bonne idée.

En revanche, à force de jouer, on finit par faire le tour des cartes et tout connaître par coeur (tant mieux pour nos métiers !), ce qui vient affecter le fun des parties. C’est sans doute pour ça qu’il y a eu deux éditions de ce jeu, chacune avec ses propres polices.

Conclusion

Si vous êtes un vrai fanatique de typographie, et que vous arrivez à en trouver d’autres pour vous affronter, ce jeu est un vrai bonheur. Les puristes reprocheront le système de rang des polices, qui est tout subjectif à son créateur, Rick Banks. Au delà de son aspect pédagogique, le collectionneur appréciera le design des cartes, un régal.

• Éditeur : Face 37, imprimé par team-impression
• Design : Face 37
• Date de parution : 2008 (Type Trumps) & 2009 (Type Trumps 2)
• Langue : anglais
• Nombre de joueurs : à partir de 2 joueurs
• Prix : 12€ + 3€ de port
• Où le trouver : chez Face 37

Typeface Memory Game

Le principe

Un Memory Game tout ce qu’il y a de plus classique, où l’on pose l’ensemble des cartes retournées sur une table, puis on essaye de retrouver les paires, en retournant 2 cartes à la fois.

Difficulté

Deux niveaux de difficulté, selon que l’on ne regarde que les lettres ou le nom des polices. Dans les deux cas, il ne faut pas être un cador de la typographie pour y arriver (“oh non, il y a un piège, l’Arial ressemble à l’Helvetica !”)

Esthétique

Mention très bien pour le packaging, dont on ferait volontiers un poster. Les cartes sont jolies, mais pas très variées graphiquement. Dans l’ensemble, c’est de la bonne qualité, et un bel objet.

Pédagogie

Pas grand chose à en tirer au niveau de l’apprentissage typographique. La faute au principe de jeu en lui même, et à la reconnaissance des familles qui est basée uniquement sur la lettre A majuscule et minuscule.

Conclusion

Un bel objet avec lequel faire quelques parties histoire de, au cours desquelles vous n’apprendrez pas grand chose. En revanche, ça claque sur l’étagère. Pour les collectionneurs, donc.

• Éditeur : BIS Publishers
• Design : ps.2 arquitectura + design
• Date de parution : Août 2010
• Langue : anglais
• Nombre de joueurs : à partir de 1 joueur
• Prix : 15€ + 9€ de port
• Où le trouver : chez BIS Publishers

Jeu de 9 familles typographiques

Le principe

On part d’une base de jeu de 7 familles classique, pimenté de quelques règles additionnelles, comme des familles nombreuses ou une famille spéciale (sur le principe de la superfamille de Pierre Rœsch). Les familles sont bien évidemment des familles typographiques (Linéales, Mécanes, Didones, etc…), et ses membres des polices de caractères représentatives (Helvetica, Clarendon, Bodoni, etc…)

Difficulté

Si le principe est basique, la règle de la superfamille vient pimenter les choses. Elle permet de “voler” une famille complète d’un autre joueur, à condition d’être capable d’en reconnaître les polices de caractères. Bien vu.

Esthétique

Certainement l’un des jeux les plus réussis graphiquement de cette sélection. Rien à redire : les cartes sont variées & sublimes. Le packaging est efficace et sobre, pour laisser la part belle aux cartes à jouer.

Pédagogie

Agrémenté de fiches explicatives claires, un très bon jeu pour apprendre en s’amusant. Surtout quand il s’agît d’apprendre à reconnaître des polices et à les associer à leurs familles.

Conclusion

Une belle réussite de Bureau 205, qui a su partir d’un principe de jeu abordable et connu, et su s’en éloigner à la fois pour rendre le jeu pédagogue, mais surtout pour respecter astucieusement les théories typographiques . Et pour ne rien gâcher, les cartes sont à tomber. Chapeau bas messieurs.

• Éditeur : Édition 205
• Design : Bureau 205
• Date de parution : Novembre 2010
• Langue : français/anglais
• Nombre de joueurs : à partir de 2 joueurs
• Prix : 10€ + 3,50€ de port
• Où le trouver : chez les Éditions 205

Conclusion

Bien sûr, la plupart de ces jeux ont été fait pas des designers et typographes qui avaient envie d’un exercice de style jubilatoire. Ce qui les prédestine à être avant tout des objets de collection. Pour tout vous dire, j’ai même envisagé plusieurs fois d’en faire des compositions encadrées à accrocher au mur.

Ce qui est plus surprenant, c’est que si vous ne jouerez sans doute pas à ces jeux avec vos enfants, et pour peu que vous fréquentiez d’autres névrosés de la typographie, ces jeux sont finalement ludiques, pédagogues et amusants. Raison de plus pour rendre hommage à leurs créateurs.

Bonus

En nota-bene, même si ce n’est pas un jeu de carte typographique à proprement parler, ne vous privez pas de compléter votre collection avec le sublime Housewives Tarot de chez Headcase Design.

 

Me voici de retour de voyage autour de l’Adriatique, deux pays au programme, Italie et Monténégro. Parfait.

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 Grué, 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.