Le petit journal permanent de la TypOgrApHiE !

La typographie (souvent abrégée «typo») est à la fois l’art de créer des polices de caractère et de s’en servir. Il peut s’agir également de l’ensemble des règles en usage dans l’imprimerie pour la composition des différentes ouvrages imprimés (cf. Code typographique). Sur le Web, la typographie à longtemps été maltraitée. Toutefois, avec les progrès réalisés ces dernières années par les navigateurs grâce aux standards du web, la typo revient sur le devant de la scène. L’étude des polices de caractère devient trendy, et on ne peut que s’en réjouir. Voici quelques 60 ressources à mettre dans vos favoris, bookmarks ou comptes Delicious !

Ressources Typographiques générales

• Orthotypographie — Cet ouvrage extraordinaire de Jean-Pierre Lacroux recense les bonnes règles de l’orthographe et de la typographie en deux volumes librement consultables et téléchargeables sur le Web sous Licence Creative Commons (by-nc-nd). Via @aurelberra.
• Planète typographie — Ce portail de la typographie contemporaine propose un ensemble de sites dédiés à la typo (Les Temps typographiques, Manuale Typographicum, Librairie Livres/Typo) ainsi que l’espace de téléchargement Fontcenter. Voir aussi abc typographie — Collection de caractères typographiques. Polices de caractères (informatique et typographie digitale) — Tout sur les polices de caractères. Ce site se focalise exclusivement sur les considérations techniques de la typographie numérique.
• Le Typographe — Lancé en janvier 2003, Le Typographe dédié à la publication d’informations liées à la scène typographique Française & Francophone c’est arrêté en(2012). Rendez-vous sur Typofonderie.
• Typo — Le Dictionnaire de l’argot des typographes. (cf. l’équivalent en wiki : Dictionnaire de l’argot des typographes 1883)
• Glossaire typographique Adobe — Plus de 72 termes liés aux polices de caractère.
• Typographie & Civilisation — Un site consacré à l’histoire de l’écriture, de l’imprimerie et des caractères typographiques et Alphabet et typographie.
• Design et Typo, le site — Galeries Pédagogiques de Design & Typo par Peter Gabor.
• Design et Typo, le blog — Typographie et valeurs sémantiques, décryptage des courants graphiques et typographiques par Peter Gabor.
• Graphisme & Interactivité — Le blog de Geoffrey Dorne, Designer graphique dans l’édition & le Web et chercheur à l’EnsadLab (Paris), fait la part belle à la typographie, aux logos et aux identités visuelles d’une manière générale.
• Petit guide typographique à l’usage de l’internet — Un guide typographique n’est pas un dictionnaire. Il ne s’agit pas ici d’une liste de règles imposées, validées par une autorité supérieure, mais simplement de règles d’usage auxquelles le plus grand nombre se conforme habituellement.
• Règles typographiques du TLFQ — Les règles typo du site du Trésor de la langue française au Québec : L’emploi des majuscules-minuscules, L’écriture des titres (journaux, volumes, lois), L’emploi des traits d’union, L’emploi des chiffres et des nombres et L’emploi des abréviations.
• Langue sauce piquante — Le blog des correcteurs du journal LeMonde.fr.
• Tutoweb.be/typographie — Les base de la typographie, les règles typographiques, la typographie sur le Web.
• Typographisme — Un site tenu par des amoureux de la typo, sur le Web comme ailleurs car : trop souvent, la typographie est le parent pauvre du Web design. Contrairement à la chaîne graphique du monde de l’impression, qui maîtrise l’art typographique depuis des siècles, la chaîne graphique Web est jeune et la typographie à encore du mal à y trouver sa place.
• Unicode et typographie : un amour impossible — Cet article propose une nouvelle approche aux concepts de glyphe et caractère. Après une discussion étendue de ces deux concepts, L’auteur s’intéresse aux autres ingrédients de base d’Unicode : les glyphes privilégiés, les descriptions, les caractères combinants et les propriétés. Yannis Haralambous « Unicode et typographie : un amour impossible », Document numérique 3/2002 (Vol. 6), p. 105-137. DOI : 10.3166/dn.6.3-4.105-137.
• pointypo– est le reflet de l’actualité typographique : publications de caractères et de livres, annonces de conférences et d’événements sans oublier les liens intéressants dénichés sur le web.

• I love Typography — ILT was born on August 7, 2007. It exists because I have a passion for typography, type design, and lettering, and for the words born of those disciplines. This site aims to make the subject more accessible, to bring the study of typography to the masses, if you will. It’s just about impossible to imagine a world without type…
• Webtypography — The Elements of Typographic Style Applied to the Web.
• A List Apart — La rubrique Typography du site de référence dans le Webdesign dont une partie des articles sont traduits sur Pompage (le web puisé à la source).
• Typographica — Types Reviews, Books, Commentary.
• Typography Served — Une dose d’inspiration de Typographie créative.
• Typesites — Typesites is a weekly showcase of websites with interesting typographic design.
• Typographyhistory — Pictures and text collected while studying the history of typography. I’m not as serious as this blog. I’m also having fun on Wanderings and on Twitter (@Mitternacht).
• 8faces — A new print magazine for devotees of typography.
• Typedia — Aim to classify typefaces and educate people about them. Think of it like a mix between IMDb and Wikipedia, but just for type. @typedia
• Beautiful Type — This blog was created by two web designers who share the same passion for typography. The content presented here is a patchwork of photos and illustrations from the Web, discovered overnight and all having a relationship with typography in general.
• Typblography — The Adobe Type Team blog

Outils et techniques

De nombreux outils permettent d’intégrer facilement les polices de caractère qui sortent de l’ordinaire.

• Fontsquirrel — Des polices de caractères de qualité à télécharger. Des kits font-face prêts à être intégrer dans votre site et font-face Generator pour utiliser les polices installées sur votre poste de travail. Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We’ve done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format.
• Google Font Directory — Des polices de caractères à inclure dans votre page web grâce à Google Font API.
• Google Font Previewer for Chrome — Testez les fontes directement sur la page affichée dans votre navigateur avec cette extension pour Google Chrome, puis copiez-collez le code fourni.
• Compare web fonts — Comparez simultanément plusieurs dizaines de polices de caractères en provenance de Google Font Directory et Typekit.
• Typekit — Lire Typekit — la typographie sur le web
• Webfonts (fonts.com) — Solution similaire à Typekit avec une version gratuite après inscription.
• sIFR — Lire sIFR 2.0: Rich Accessible Typography for the Masses
• Facelift — Lire Une alternative à sIFR : Facelift Image Replacement
• Typeface — Lire typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)
• cufon — Lire Cufon, nouvelle alternative pour intégrer des polices TrueType et OpenType au web
• Typechart — visualisez des polices de caractères (une petite dizaine) dans différentes configurations de taille, d’interlignage, de style, de graisse, d’interlettrage, en lettres majuscules ou minuscules et de copier les propriétés CSS associées.
• Typetester — Comparez jusqu’à trois polices de caractère avec leurs attributs en affichant plusieurs versions de textes mis en forme.
• Scale & Rhythm — This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages.
• Wordmark.it — Prévisualisez les polices de caractères installées sur votre ordinateur. Choix du texte, agrandissement de la taille et comparaison facilitée grâce à un filtre.
• Awesome Fontstacks — Mixer plusieurs polices de caractères n’est pas toujours facile. Awesome Fontstacks prévisualise vos choix de fontes pour les titres, le corps du texte, les encadrés et les polices à chasse fixes pour le code. Il suffit ensuite de télécharger les polices choisies (depuis FontSquirrel) et de copier-coller le code CSS.

Conseils, tutoriels et astuces

• Macrotypographie — Résumé richement illustré de la conférence d’Anne-Sophie Fradier sur la Macrotypographie. Bonne feuille : Avec une double page, on peut jouer graphiquement de la relation entre les deux pages, avoir une harmonie avec les marges, une symétrie, etc. Sur le web, les marges sont latérales, elles sont là pour faire oublier le navigateur, laisser du confort sur les côtés, de la respiration.
• 7 conseils pour mélanger plusieurs fontes dans votre design web
• Test de font-face sur les différents navigateurs
• Typographie et Web : la solution Typekit
• Typographise — La catégorie de john’s Graphisme réservée à la typographie.
• Polices de caractères sur le Web — Un an après (01/07/2010), où en sommes-nous ?
• Typographie sur le web — Qui a dit que les règles de typographie fine (parfois qualifiée de micro typographie) n’étaient pas applicables dans une page web ? Nous allons ici démontrer que c’est tout à fait possible.
• Typographic Contrast and Flow — Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.
• Five simple steps to better typograph — A simple rule is your lead ing should be wider than your word spacing. This is because when the balance is correct, your eye will move along the line instead of down the lines.
• Modern Life — La rubrique Fonts & Typographie
• Reading Online Text: A Comparison of Four White Space Layouts — In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions.
• Common fonts to all versions of Windows & Mac equivalents.
• Fonts included with each version of Windows.
• NICE WEB TYPE — One place for web typography, following experiments, advancements, and best practices in typesetting web text. By Tim Brown.
• Vertical Rhythm on Covert Prestige — This article explains bits of the design from covertprestige.net, how it adheres to a strict vertical rhythm and what CSS tricks are used to achieve that.
• What Font Should I Use? — Five Principles for Choosing and Using Typefaces.
• Applying a Clean & Imageless Design to an Article — How to use simple CSS to apply an attractive, well-balanced design to an article.

Trouver des polices de caractère

• Dafont — Les 11 388 polices (dont 3 242 avec des accents et 2 495 avec le symbole Euro) présentes sur ce site sont la propriété de leur auteur (freeware, shareware, démo ou domaine public). La licence mentionnée au dessus du bouton Télécharger est juste une indication.
• Typofonderie — Fondée en 1994, Porchez Typofonderie est une fonderie indépendante française. C’est le premier endroit où vous pouvez acquérir nos fontes.
• Fontshop — Founded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 150,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.
• Fontfolio –Adobe Font Folio est une collection de plus de 2 300 fontes au format OpenType.
• Myfonts — Avec sa nouvelle version, Myfonts est encore plus pratique à utiliser. Une très belle collection de fontes pour vos projets.
• Identifiez les polices de caractères avec What The Font ou Identifont.
• Urbanfonts — Plus de 8 000 fontes et dingbats freewares à télécharger.
• @Font-Face Webfonts from Fontspring — Buy webfonts the way you buy desktop fonts: without a subscription. 99% of the families offered on Fontspring can be purchased for unlimited use on websites you control for a small fee.

Bibliothèque ou librairie

Il s’agit surtout de livres relativement anciens. Ils sont toujours vaillants, mais si vous avez des références plus actuelles n’hésitez pas à en faire profiter tout le monde dans les commentaires 😉

• Maquette et mise en page — Pierre Duplan et Roger Jauneau — Editions du Moniteur, 1992 (ISBN 2 281 31051 5),
• Typographie — Emil Ruder — A. Niggli Ltd, 1988 (ISBN : 3 7212 0043 8),
• Le secrétariat de rédaction — Louis Guéry — Editions du CFPJ, 1990 (ISBN 2 85900 045 3),
• Typographie, du plomb au numérique — Jean-Luc Dusong et Fabienne Siegwart — Dessain et Tolra, 1996 (ISBN 2 04 021744 4),
• Grids, the structure of graphic design — André Jute — Rotovision, 1996 (ISBN 2 88046 277 0),
• Tous les numéros d’Etapes Graphiques…