J’ai eu la chance d’être invitée à faire une présentation à l’occasion du Kikk Festival organisé à Namur par l’agence Dogstudio les 24 et 25 novembre 2011. Réunissant des intervenants issus de différents domaines du numérique – beaucoup de designers Web, bien sûr, mais aussi des artistes de l’image et du son, des étudiants, des journalistes, etc. – le festival proposait des conférences, des ateliers, des installations, une grosse soirée beuverie cocktail, et un concours sur le mode du marathon de création, les participants ayant 24h sur les deux jours pour produire un site, une appli ou une œuvre numérique. Le tout servi dans une identité graphique très réussie.

En typographie, il existe tout un tas de règles sur la gestion des espaces entre les mots et les caractères. Malheureusement, le Web est extrêmement fruste de ce point de vue là, à ce qu’il paraît. Mais qu’en est-il réellement ? Précédemment, Je vous ai parlé des ligatures qui sont une des réponses (parmi bien d’autres) à la question des espaces entre les lettres. Cette fois-ci, nous allons nous pencher sur la question des espaces entre les mots. Est-ce qu’il se pourrait qu’on puisse utiliser l’espace fine insécable… en vrai ?

La semaine dernière, à la faveur de l’Ampersand Conference, j’ai pris un week-end prolongé du côté de la perfide Albion pour m’aérer le neurone, voir la mer, écouter des gens intelligents et boire beaucoup de café et de bière en bonne compagnie – notamment des petits camarades de Paris-Web, Sophie, Aurélien, Raphaëlle [aidez-moi à retrouver son URL s’il-vous-plaît] et Francis. Au programme : une pre-party la veille, une journée de conférence sous caféine avec huit intervenants-de-qualité, une autre youpi-party le soir et pour conclure, le samedi matin, une visite de Brighton guidée par l’excellent Phil Baines à qui je voue un culte en toute simplicité (en matière de graphisme, je suis polythéiste mais sélective).

L’Ampersand Conference, organisée par Clearleft, s’est déroulée à Brighton le vendredi 17 juin 2011.

Je ne vais pas vous faire un rapport détaillé, plutôt vous donner un peu en vrac les choses intéressantes que j’ai relevées pendant cette longue journée.

On sait tous que les navigateurs ne sont pas les champions du monde de la gestion typographique. Ceci étant, ils s’améliorent tous les jours et parmi toutes les chipoteries typographiques il y en a une qui commence timidement à faire son apparition dans les navigateurs : la gestion des ligatures. C’est loin d’être parfait, mais il y a déjà moyen de faire quelques petites choses.

La ligature traditionnelle des lettres “f” et “t” de la police Garamond.

Je suis un peu triste de constater que le format de police SVG est très mal compris. J’ai lu beaucoup d’articles et de récriminations à propos de ce format de police, le dernier d’entre eux étant l’article d’Alexander Limi où il explique pourquoi il n’est pas prévu que Firefox passe le test Acid3, essentiellement à cause d’une absence de support des fontes SVG.

De bien des façons, toutes ces critiques sont déplacées tout simplement parce que ce format de police est incompris. Vraiment ? Mais dans ce cas, à quoi sert-il ? Voyons ça.

Les lecteurs nous demandent souvent comment faire pour avoir une chevelure aussi souple et brillante que nous [1], mais ils nous interrogent aussi régulièrement sur un parti pris du design de notre site qui contrevient aux principes qu’ils connaissent : la justification au pavé du texte courant.

Gustave Courbet découvrant du texte justifié sur un site prétendument ami de la typographie.

Avez-vous remarqué que lorsque vous utilisez une déclaration @font-face avec un navigateur qui utilise le moteur de rendu Webkit (Safari, Chrome) ou bien avec Internet Explorer votre texte n’est affiché qu’une fois que la police est téléchargée ? En surfant confortablement assis avec une connexion ADSL, on ne s’en rend pas bien compte. Par contre, lorsqu’on utilise un téléphone ou une tablette qui tourne sous iOS ou Androïd, ce n’est pas rare.

De leur côtés, Firefox et Opera ont une autre approche : ils affichent le texte à l’aide des fontes de substitution déclarées dans les feuilles de style et modifient le rendu des polices une fois que celles-ci ont été chargées. Cela peut provoquer un clignotement un peu disgracieux mais au moins, si votre réseau est lent (ce qui est souvent le cas avec les réseau de téléphonie mobile) vous pouvez toujours commencer à lire le texte.

Anne-Sophie présentait en octobre dernier à Paris Web une conférence sur la macro-typographie. Elle y abordait les problématiques des mises en page sur le Web et plus particulièrement de l’utilisation des grilles. Vous pouvez d’ailleurs enfin (re)visionner sa conférence si vous le souhaitez sur le site de Paris Web.

Bien que les solutions pour les mettre en place ne soient pas nouvelles, je constate qu’elles ne sont pas pour autant adoptées facilement. En partageant mon expérience pratique sur le sujet dans ce billet, j’espère faciliter leur adoption.

Ami internaute, développeur, graphiste peut-être, enfin bref, vous, derrière l’écran, vous lisez en ce moment même le premier d’une longue série d’articles consacrés aux caractères typographiques. Ah, ça, la typographie… Vous en avez entendu parler, vous avez certainement déjà lu pas mal de livres à son sujet, et vous pensez sûrement en connaître un bout sur les Garamond et autres Helvetica… Mais en toute honnêteté, entre nous, là, sérieusement… En êtes-vous si sûr que ça ? Savez-vous réellement pourquoi le Gill Sans est plus chaleureux et lisible que le Futura ? Connaissez-vous le nom du type qui a passé sa vie à peaufiner le dessin du Franklin Gothic? Quand vous voyez le logo d’Easyjet, pouvez-vous expliquer du tac au tac la raison pour laquelle il a l’air franchement cheap ? Oui ? Bon, alors effectivement vous n’avez rien à faire ici. Mais si d’aventure vous faites encore partie de la très grande majorité de ceux qui voient les caractères sans les connaître et qui les choisissent encore au petit bonheur, alors, peut-être, ces articles vous intéresseront.

Une page pour tester en profondeur le rendu de vos polices Web à l’écran : ce serait chouette, non ? C’est exactement ce que propose le Web Font Specimen. Et cet outil est aujourd’hui disponible en français, documentation comprise.

Comme les images, les vidéos ou le son, les polices typographiques sur un ordinateur ne sont jamais que des fichiers ayant un format spécifique. Seulement voila, des formats de fichiers pour les polices typographiques il y en a une ribambelle. Tous ont des avantages et parfois des inconvénients. Je vous propose de nous pencher plus en détail sur ceux qui sont, aujourd’hui, exploitables dans un contexte Web, c’est à dire au sein des déclarations @font-face.

Le billet précédent sur @font-face a suscité de réactions nombreuses, vives et intéressantes, et je pense qu’il est utile d’en faire une synthèse, pour éclaircir les points de vue, voire dissiper quelques malentendus, et surtout compléter et enrichir ce que j’avais écrit et qui n’avait nullement la prétention d’être exhaustif, vous vous en doutez bien.

La bonne représentation de la typographie à Paris Web a été l’occasion d’aborder brièvement @font-face, la révolution de 2009 qui devait nous délivrer des polices websafe autant que du sIFR et des scripts PHP douteux, employés pour rendre du texte dans la police de son choix.

La nouvelle de la prise en charge d’@font-face sur les grands navigateurs actuels ne pouvait que susciter l’enthousiasme, mais une fois les brumes du délire dissipées, il reste un certain nombre de problèmes et de questions qui font que papoter @font-face peut, contre toute attente, virer au pugilat. Cet article étant un poil long, la maison fournit gracieusement le sommaire :

1. A-t-on vraiment besoin de @font-face ?
2. Du côté du support et de l’implémentation
3. Faire les choses dans les règles
4. L’angoisse du vilain pirate tipiak

Paris Web 2010, par Thanh

On pourrait difficilement se passer d’un petit retour sur Paris Web 2010, alors que la typographie était représentée par deux conférences, que la majeure partie de l’équipe y était réunie, et que l’événement a été le coup de pied au derrière qui nous manquait pour lancer Typographisme.

Pour toux ceux qui n’étaient pas dans le grand amphi de Paris Web, qui n’ont pas pu suivre les conférences en streaming ou qui ne savaient même pas qu’il était en train de se passer des choses incroyables près de Bécon-les-Bruyères, tentons de résumer un peu tout ce qui s’est dit.