Ce 2e article de la série "typo & web" est consacré à la mise en œuvre graphique de la typographie, au plan théorique mais aussi pratique. Tour d'horizon non-exhaustif de ce qui se passe sur le web, au travers d'une sélection d'articles (souvent en anglais) et de "how to" (tutos).
Savoir de quoi on parle!
La typo, c'est bien, c'est beau, et c'est très simple à manier avec les logiciels d'éditions (Photoshop, Illustrator et autres InDesign et X-Press). Mais comme on dit, il faut apprendre avant de pouvoir désapprendre. Autrement dit, il faut connaitre les règles pour les transgresser; il faut savoir ce que l'on fait quand on distord un caractère, quand on compose un texte, quand on choisit une police de caractère. Quelques ressources à cet effet:
L'anatomie des caractères.
De quoi est constitué la lettre, quels sont les termes spécifiques à utiliser.
Sur le site Typographie et civilisation, à l'interface vieillote mais au contenu riche, se trouve l'essentiel de ce qu'il faut savoir :
- "préliminaires typographique" : qu'est-ce qu'un caractère, une police ou une famille de caractères, etc.
- "glossaire typo et anatomie de la lettre" : qu'est-ce qu'une hauteur d'x, un plein, un délié, etc.
Pour ceux qui préfère le papier, de nombreux ouvrages dédiés au sujet existent, dont :
- Comprendre la typographie, par Ellen Lupton chez Pyramyd éditions (guide et essai);
- TYPOGRAPHIE guide pratique, par Damien Gautier chez Pyramyd éditions (guide pratique).
Les familles de caractères.
Les polices sont regroupées et classées selon leurs formes et leur type d'empattement, qui ont évolué au fil du temps. Ainsi une police est datée, et sa période d'apparition et de production donne du sens à son utilisation.
La première classification fut celle de Francis Thibaudeau (la classification Thibaudeau), qui a été abandonnée au profit de la classification Vox-AtypI et de ses 11 groupes de caractères (Humanes, Garaldes, Réales, Didonnes, etc.).
La "typographie", au sens propre du terme.
De nombreux sites existent qui exposent les règles typographiques (ponctuation, espaces, abréviation...). Celui que je choisis est la version web d'un ouvrage papier, exhaustif, précis, clair.
Petit guide de typographie
Articles et conseils
Voici une sélection d'articles (mise à jour régulièrement) traitant des bonnes pratiques en matière de typo, donnant des conseils...
- 15 tips to choose a good text type
- Color and Typography in Good Design
- Improve your typography with "typographic contrast"
En pratique : les how to (ou tutoriels)
Sélection (drastique!) de tutoriels et de focus sur des points particuliers concernant la typo (création, manipulation, effets, etc.). L'essentiel de cette sélection est en anglais, cependant les non-anglophones s'y retrouveront grâce aux images généralement proposées et parfois aux screencast.
Sélection drastique de tuto donc, car il en existe des quantités phénoménales sur le web. Or de mon point de vue, l'intérêt ne réside pas tant dans le résultat obtenu avec l'application stricte des étapes de création, mais bien dans l'approche et la démarche suivie, la logique, la manipulation des outils utilisés. C'est pourquoi ma sélection se fonde sur des tutoriels permettant d'apprendre plus que le simple postulat de départ ("je veux un effet de texte", "je veux du texte en 3D, etc).
Super coll frilly bits typography
Combiner du texte et des ornements.
3D typographic effects in Photoshop
Nik Ainley, le graphiste derrière les magnifiques illustrations du site shinybinary.com nous donne ses trucs pour réaliser à notre tour de la typo en 3D texturée.
A Comprehensive Introduction to the Type Tool
Sur l'excellent blog/site PsdTuts+, cet article explore l'outil typographique de Photoshop de façon exhaustive...
3 ways to apply a line pattern effect on text in Illustrator
Tout est dans le titre: 3 façon d'appliquer un motif linéaire sur un texte avec Illustrator.
How to: Make a Hand-Drawn Font
Tuto sur la création d'une police manuscrite puis scannée, traitée dans Illustrator et enfin importée dans un logiciel d'édition typographique.
Logo Design Project Step by Step Walkthrough
Tuto sur la création d'un logo typo, et techniques de manipulation des caractères sur Illustrator. Excellent blog par ailleurs!
Wrapping Text Around an Image in Illustrator
Comment défoncer du texte autour d'une image dans Illustrator.
Vector drawing mistakes
Bonnes pratiques pour obtenir des illustrations et textes vectoriels fluides.
How to Create a Trendy Retro Type Treatment
En prenant pour point de départ la police "Museo" (évoquée dans un article précedent), l'auteur créé pas-à-pas, dans Illustrator, une illustration plus ou moins rétro mais terriblement contemporaine. Il est question de typo bien sûr, mais aussi d'application de dégradés, de manipulation de formes via le pathfinder, d'effets de lumière, de dégradés de formes, etc...
Preparing Multiple Instances of a Bumper Sticker for Print
Excellent article technique sur l'imposition dans Illustrator. L'imposition est le fait de créer une "planche" au format du support d'impression, et d'y faire rentrer le plus d'occurrences possible de l'élément à imprimer, avec calage au millimètre, traits de coupe, fond perdus, etc...
Où l'on approfondira ses connaissances sur la création rapide des traits de coupe, sur la palette Transformation et ses talents cachés (!).
L'intérêt d'imposer directement dans Illustrator réside dans la possibilité de créer le visuel à imposer de façon dynamique ; une modification sur un élément est répercutée automatiquement sur ses "frère".
Create a Layered Glowing Text Effect
Création d'effets de lumière bien à la mode en ce moment (notamment pour le web design), dans Photoshop.
Cette sélection est mise à jour régulièrement; n'hésitez pas à nous faire partager vos liens dans les commentaires!
Les autres articles de la série "Typo & web":
Typo & web #1 : les polices de caractères
Typo & web #3 : l'inspiration...
