Cet article traine depuis belle lurette dans mon escarcelle et je le pensais has-been avec l’arrivée de @font-face. Mais l’usage de cette technique CSS3 étant restreinte aux polices gratuites, je vois encore et toujours fleurir des images textes découpées à la hache.

Et en 2011, va falloir que ça cesse !

Nul n’est censé ignorer la loi de la police

Le tort est de découper du texte comme on découpe des photos, or cela n’a rien à voir. Lorsque l’on découpe une photo, on rogne pour ne plus avoir d’espace blanc ou vide. Pour un caractère typographique l’espace autour de lui-même est indispensable car il fait partie de son anatomie.

L’intégrateur peu soucieux de la typographie, et qui en veut viscéralement à tous ces salauds de designers qui lui balancent quotidiennement des PSD bordéliques de 150Mo, se venge inconsciemment en amputant sauvagement les jambages et en égrugeant le rythme vertical du design.

Lorsque l’on découpe du texte, il est nécessaire de conserver l’espace pour les jambages inférieurs et supérieurs même si ceux-ci ne sont pas utilisés. En effet, si l’on découpe un texte sans jambages à ras (ex: « coucou maman ») les espacements entre les paragraphes précédents et suivants sont faussés. Malheureusement, ces espacements irréguliers sont fréquemment compensés par des marges ajustées au pifomètre.

Par conséquent, si le wording d’une image texte change, les espacements également. Les marges rustines cassent et le rythme vertical explose.

Ma technique du « Ã‰q »

Pour découper proprement mes images textes, je vous partage ma petite routine qui me permet rogner correctement.

Avant de recadrer, j’ajoute les deux lettres « q » et « Ã‰ » (alt + 144). Le « q » prends la place du jambage inférieur et « Ã‰ » le supérieur plus l’accent éventuel. Je rogne une première fois avec ces deux lettres supplémentaires pour obtenir mon espace vertical puis je les supprime et je rogne horizontalement.

Si ce n’est pas clair, voici une petite vidéo explicative :

Grâce à ma petite manipulation, les images textes sont toujours propres et soyeuses. Peu importe que mon wording change, mon rythme vertical est toujours respecté !

Démo de bons et mauvaises découpes d’images textes

La polyvalence de l’intégrateur toujours en question

Ce problème que j’ai souvent constaté révèle une fois de plus l’indispensable curiosité de l’intégrateur. Il doit entre autres s’intéresser un minimum au design et par conséquent à la typographie.

Photoshop ne doit pas être assimilé à sa simple fonctionnalité Image > Rognage, mais c’est souvent le cas.

Si je peux donner un conseil général aux intégrateurs, faites vos propres PSD de découpes et d’images textes. Ça vous fera gagner du temps et de l’énergie.