Images bitmap et vectorielles.Communication visuelle. Design graphique.Identité visuelle.
Typographie.
Photoshop.Illustrator.Indesign.Acrobat.Processing.Drawbot.Nodebox.
Our typeest le site d'une fonderie belge
créée autour du créateur hollandais Fred Smeijers.
Our type est à la fois
un portfolio, un magasin online
et un exercice typographique
très enthousiasmant,
doté d'une navigation résolument
époustouflante conçue en Flash
par les gantois Group 94.
Linetoest une autre très bonne adresse, à la fois en raison de leurs fameuses créations, mais aussi de leurs projets spéciaux et de leur site bien conçu.
La consultation d'une page web conditionne le comportement de la typo: lors d'une requête, le serveur envoie le texte avec les instructions de mise en page à votre navigateur, et c'est à votre navigateur qu'il incombe d'afficher le texte selon les polices fournies par votre système d'exploitation.
Une série de polices de base sont supposées être installées: Courrier, Times, Arial, Helvetica, Verdana...
Le code HTML possède des balises dédiées au contrôle de la typo: police, taille, couleur, etc.
Exemple: <font color="#CC3300" size="-3" face="Verdana, Arial, Helvetica, sans-serif">
Cependant, lors de la restitution d'une page, votre navigateur, via les choix définis dans ses préférences, peut interpréter les polices d'une manière différente de celle prévue par le webdesigner... Énervant, non ?
La meilleure solution est de joindre une feuille de styles à votre page HTML ou XML, qui va se charger des comportements graphiques du texte (et des images). Les instructions qu'elles contiennent vont forcer votre navigateur à s'y conformer. De plus, l'ajout d'une feuille de style externe allège considérablement le code, et donc la tâche de votre navigateur : les pages se chargent plus vite.
Il est évidemment possible de créer du texte sous forme d'image (ex: le titre de ce chapitre) ou de
travailler avec Flash, qui utilise votre navigateur pour diffuser des séquences .swf "verrouillées".
Notez cependant que ces deux dernières solutions présentent l'inconvénient de réduire l'accessibilité au texte :
celui-ci étant une image, il ne peut ni être recherché par un moteur, ni vraiment partagé avec vos visiteurs.
Ce PDF, évoquant des personnalités majeures dans le domaine du design graphique, contient pas mal de références à la typo :
Télécharger le dossier .zip des documents examinés au cours (9,9 Mo).
Thinking with type. Ce site dédié au livre de Ellen Lupton contient de très bons documents !
Voir aussi les interviews publiées sur son blog.
L'aventure des écritures: naissance. Un dossier de la Bibliothèque Nationale de France.
L'aventure des écritures: matières et formes. Un dossier de la Bibliothèque Nationale de France.
L'aventure des écritures: la page. Un dossier de la Bibliothèque Nationale de France.
SuitCase. Gestionnaire de polices pour Mac produit par Extensis.
X-Fonter. Gestionnaire de polices gratuit (PC only) produit par BlackSun Software.
TransType. Outil de conversion de polices Mac vers PC produit par FontLab.
ASCII Generator. ASCII art.
La typographie du web. Un dossier du CERIG.
Affaire-Esperluette. Ressources historiques & infos.
Planète Typographie. L'essentiel de la typo en ligne.
D-tours. Promenade audio dans Bruxelles, par Base Design et Ten Twelve.
Ariel Malka. Designer et programmeur surtout porté sur la manipulation e typo. Voir Chronotext.
Digital typograhy principles. Exercices du cours de John Maeda (automne 1997).
Typeractive. Paysages de lettres. Création de Peter Cho.
Pierre Bézier. La courbe de Bézier, base des principaux rendus graphiques. Voir aussi ici.
Malgré l'incapacité des navigateurs à interpréter des polices "rares" (et pour cause, si elles ne sont pas installées sur la machine de l'utilisateur...), certains concepteurs en herbe s'obstinent à envisager cette solution. En réponse à certains étudiants, je pense que cette obstination résulte d'une mauvaise appréhension du fonctionnement même du réseau. Une telle mise en œuvre dépend en effet d'un déploiement technique "en rupture" avec les conventions du web: un logiciel ou des fichiers propriétaires doivent être installés sur le serveur (éventuellement sous condition d'une licence) et le navigateur doit être capable d'interpréter ces données propriétaires. L'usage illicite et la copie pirate des polices est empêchée par un système d'appel en cascade: la police possède elle-même sa propre URL verrouillée par laquelle "transite" les pages qui sont sensées les afficher. Pour un test de la technologie Bitstream (qui vous fera réfléchir sur les compatibilités de telles approches), voir ici.
Bon ! Alors tant qu'à faire, pourquoi pas travailler avec Flash ???
Fonts. Un dossier qui aborde notamment le problème des embedded fonts sur Webmonkey.
WEFT 3 (Web Embedding Fonts Tool). Logiciel sensé résoudre ce problème sur Microsoft Typography.
Microsoft WEFT users community. Communauté des utilisateurs de WEFT.
TrueDoc. Technologie de polices dynamiques nécessitant le plugin Web Font Player de Bistream.
WebFont Support. Une page d'aide chez Bitstream
WebFont Maker. Un article à propos de ce logiciel sur Graphic Design.
Licenses for Font Embedding, Streaming and Web Servers. Infos sur Fonts.
Polices à télécharger. Un article sur SelfHTML.
La typographie du web. Quelques infos dans cet article sur le site du CERIG.
Une série de polices de base sont supposées être installées: Courrier, Times, Arial, Helvetica, Verdana...
Le code HTML possède des balises dédiées au contrôle de la typo: police, taille, couleur, etc.
Exemple: <font color="#CC3300" size="-3" face="Verdana, Arial, Helvetica, sans-serif">
Cependant, lors de la restitution d'une page, votre navigateur, via les choix définis dans ses préférences, peut interpréter les polices d'une manière différente de celle prévue par le webdesigner... Énervant, non ?
La meilleure solution est de joindre une feuille de styles à votre page HTML ou XML, qui va se charger des comportements graphiques du texte (et des images). Les instructions qu'elles contiennent vont forcer votre navigateur à s'y conformer. De plus, l'ajout d'une feuille de style externe allège considérablement le code, et donc la tâche de votre navigateur : les pages se chargent plus vite.
Il est évidemment possible de créer du texte sous forme d'image (ex: le titre de ce chapitre) ou de
travailler avec Flash, qui utilise votre navigateur pour diffuser des séquences .swf "verrouillées".
Notez cependant que ces deux dernières solutions présentent l'inconvénient de réduire l'accessibilité au texte :
celui-ci étant une image, il ne peut ni être recherché par un moteur, ni vraiment partagé avec vos visiteurs.
Ce PDF, évoquant des personnalités majeures dans le domaine du design graphique, contient pas mal de références à la typo :
|
Design graphique. Une chronologie du design graphique. |
Télécharger (.zip/PDF - 6,7 Mo).
Télécharger le dossier .zip des documents examinés au cours (9,9 Mo).
|
Parmi les pionniers de la création de typo numérique :
|
|
 |
|
 |
|
 |
|
|
|
Incontournables:
Typographie Mode d'Emploi. Une introduction sur Planète Typographie.
Typographie : Les polices de caractères. Autres infos utiles sur le site de l'EPFL (Lausanne).
Des caractères typographiques. Un document complet. Voir notamment le chapitre Description.
Design et typo. Le blog excellent et très documenté de Peter Gabor.
Typographie Mode d'Emploi. Une introduction sur Planète Typographie.
Typographie : Les polices de caractères. Autres infos utiles sur le site de l'EPFL (Lausanne).Des caractères typographiques. Un document complet. Voir notamment le chapitre Description.
Design et typo. Le blog excellent et très documenté de Peter Gabor.Thinking with type. Ce site dédié au livre de Ellen Lupton contient de très bons documents !Voir aussi les interviews publiées sur son blog.
Des outils en ligne :
BitFontMaker. Réalisez votre BitFont en ligne ! Voir aussi BitFont Museum.
FontStruct. Un outil en ligne de création de fontes construit par Rob Meek.
What the font ? Un impressionnant outil de recherche sur My Fonts.
TypeTester. Comparer les polices à l'écran, avec les codes CSS.
Font Tester. Autre outil similaire.
Compare multple fonts. Encore un.
Lincoln's Gettysburg Address. Un autre.
BitFontMaker. Réalisez votre BitFont en ligne ! Voir aussi BitFont Museum.FontStruct. Un outil en ligne de création de fontes construit par Rob Meek.What the font ? Un impressionnant outil de recherche sur My Fonts. TypeTester. Comparer les polices à l'écran, avec les codes CSS.Font Tester. Autre outil similaire.Compare multple fonts. Encore un.Lincoln's Gettysburg Address. Un autre.L'aventure des écritures: naissance. Un dossier de la Bibliothèque Nationale de France.L'aventure des écritures: matières et formes. Un dossier de la Bibliothèque Nationale de France.L'aventure des écritures: la page. Un dossier de la Bibliothèque Nationale de France.SuitCase. Gestionnaire de polices pour Mac produit par Extensis.X-Fonter. Gestionnaire de polices gratuit (PC only) produit par BlackSun Software.TransType. Outil de conversion de polices Mac vers PC produit par FontLab.ASCII Generator. ASCII art.La typographie du web. Un dossier du CERIG. Affaire-Esperluette. Ressources historiques & infos.Planète Typographie. L'essentiel de la typo en ligne.D-tours. Promenade audio dans Bruxelles, par Base Design et Ten Twelve.Ariel Malka. Designer et programmeur surtout porté sur la manipulation e typo. Voir Chronotext.Digital typograhy principles. Exercices du cours de John Maeda (automne 1997).Typeractive. Paysages de lettres. Création de Peter Cho.Pierre Bézier. La courbe de Bézier, base des principaux rendus graphiques. Voir aussi ici.
Création ou manipulation de fontes:
Font Creator.
Logiciel de création ou d'édition de polices TrueType.
Possibilité de convertir des images scannées ou bitmap (.bmp) en fichiers TrueType, création de polices à partir de recherches manuscrites. Fonctions de répétitions et d'annulation illimitées. PC/Shareware.
TypeTool.
Manipulation de polices. Il peut importer et exporter des fichiers TrueType, Type 1, et OpenType. PC et Mac.
FontLab.
Édition de police. Importer, exporter, créer, et modifier des polices TrueType, OpenType et Type 1 dans leurs formats natifs. Dessin vectoriel. PC et Mac.
Fontographer.
Manipulation de polices existantes (inclure fractions, symboles, logos dans des polices Type 1, Type 3, et TrueType) ou création de polices. PC et Mac.
X-Fonter.
Gestionnaire de polices gratuit par BlackSun Software.
Font Creator. Logiciel de création ou d'édition de polices TrueType.
Possibilité de convertir des images scannées ou bitmap (.bmp) en fichiers TrueType, création de polices à partir de recherches manuscrites. Fonctions de répétitions et d'annulation illimitées. PC/Shareware.
TypeTool. Manipulation de polices. Il peut importer et exporter des fichiers TrueType, Type 1, et OpenType. PC et Mac.
FontLab. Édition de police. Importer, exporter, créer, et modifier des polices TrueType, OpenType et Type 1 dans leurs formats natifs. Dessin vectoriel. PC et Mac.
Fontographer. Manipulation de polices existantes (inclure fractions, symboles, logos dans des polices Type 1, Type 3, et TrueType) ou création de polices. PC et Mac.
X-Fonter. Gestionnaire de polices gratuit par BlackSun Software.
Malgré l'incapacité des navigateurs à interpréter des polices "rares" (et pour cause, si elles ne sont pas installées sur la machine de l'utilisateur...), certains concepteurs en herbe s'obstinent à envisager cette solution. En réponse à certains étudiants, je pense que cette obstination résulte d'une mauvaise appréhension du fonctionnement même du réseau. Une telle mise en œuvre dépend en effet d'un déploiement technique "en rupture" avec les conventions du web: un logiciel ou des fichiers propriétaires doivent être installés sur le serveur (éventuellement sous condition d'une licence) et le navigateur doit être capable d'interpréter ces données propriétaires. L'usage illicite et la copie pirate des polices est empêchée par un système d'appel en cascade: la police possède elle-même sa propre URL verrouillée par laquelle "transite" les pages qui sont sensées les afficher. Pour un test de la technologie Bitstream (qui vous fera réfléchir sur les compatibilités de telles approches), voir ici.
Bon ! Alors tant qu'à faire, pourquoi pas travailler avec Flash ???
Fonts. Un dossier qui aborde notamment le problème des embedded fonts sur Webmonkey.WEFT 3 (Web Embedding Fonts Tool). Logiciel sensé résoudre ce problème sur Microsoft Typography.Microsoft WEFT users community. Communauté des utilisateurs de WEFT.TrueDoc. Technologie de polices dynamiques nécessitant le plugin Web Font Player de Bistream.WebFont Support. Une page d'aide chez BitstreamWebFont Maker. Un article à propos de ce logiciel sur Graphic Design.Licenses for Font Embedding, Streaming and Web Servers. Infos sur Fonts.Polices à télécharger. Un article sur SelfHTML.La typographie du web. Quelques infos dans cet article sur le site du CERIG.
M'écrire - Newsletter - À propos de ce site