#grid est un petit script JS qui permet de superposer une grille à votre travail de manière simple et efficace. La grille est personnalisable à souhait et son affichage contrôlable au clavier.

URL http://hashgrid.com/

960 GS propose un framework CSS basé sur une grille à 16 colonnes (existe aussi avec 12 colonnes), ainsi que des templates dans de nombreux formats (suite Adobe, Omnigraffle, Visio, etc.).

URL http://960.gs/

Le Baseline Rythm Calculator est un outil tout simple qui calcule, à partir du corps de police et de l’interlignage de votre texte courant, les corps et l’interlignage de différents niveaux de titre (et vous fournit la CSS qui va avec).

URL http://topfunky.com/baseline-rhythm-calculator/

Blueprint est une bibliothèque CSS qui promet : une uniformisation des vos styles quelque soit votre navigateur ; une grille verticale et une grille horizontale ; des enrichissement typographiques ; une prise en charge de l’affichage des formulaires ; une impression personnalisée ; et un système de plugins pour en étendre ses possibilités. Le tout étant accompagné de nombreux outils proposés par une communauté relativement importante.

URL http://www.blueprintcss.org/

Golden Grid System est un framework de mise en page réactive à 16 colonnes, conçu non pas pour être utilisé tel quel mais plutôt pour servir de bloc de construction dans l’élaboration d’un design réactif. Il inclut une grille de ligne de base également réactive, tout l’intérêt étant que la taille de police augmente au-delà d’une certaine taille afin de mettre la largeur de l’écran au service du confort de lecture. La chose semble bien fichue (mais non encore testée par nos services) et tout le code (HTML, CSS, LESS et JS) est dispo sur Github.

URL http://goldengridsystem.com/

Gridr Buildrrr est un éditeur visuel de grilles, il sert essentiellement à faciliter les calculs. Contrairement à Variable Grid Systems, il ne propose pas la CSS associée – mais il vous laisse définir les marges latérales de votre choix.

URL http://gridr.atomeye.com/

OOCSS est un framework créé par Nicole Sullivan. Il est très orienté apprentissage plutôt que solution clé en main mais dispose tout de même d’outils assez robustes. Il conviendra tout de même plus à des intégrateurs experts qui connaissent bien les arcanes des CSS car il peut être parfois nécessaire de voir ce qui ce passe sous le capot. Les novices y trouveront cependant une méthodologie d’intégration intéressante.

URL https://github.com/stubbornella/oocss/wiki

Un outil très pratique qui permet de créer une grille en fonction du nombre de colonnes, et de la largeur des colonnes, des gouttières et de la page. La représentation graphique de la grille s’ajuste dynamiquement à vos modifications, et vous pouvez télécharger la CSS correspondante.

URL http://www.spry-soft.com/grids/

FontDeck est un site qui fournit des fontes commerciales d’excellente qualité. Sur un modèle similaire à Typekit, vous payez les droits d’utilisation à l’année. Les prix sont extrêmement raisonnables avec la possibilité de tester les fontes gratuitement afin de vous assurer qu’elles correspondent à vos besoins.

URL http://fontdeck.com
Twitter @fontdeck

FontSquirrel est une très bonne ressource à plusieurs points de vue. Tout d’abord, il propose au téléchargement un grand nombre de polices commerciales à utilisation gratuite, ce qui vous assure un minimum de qualité. Vous pouvez également télécharger directement le kit @font-face (les différents formats requis et CSS qui va bien) des polices de leur catalogue. Et si vous ne trouvez pas votre bonheur, le Générateur de kits @font-face produit très simplement des kits à partir de la police de votre choix. Des options de format, de subsets et de paramétrage fin permettent de personnaliser votre kit.

URL http://www.fontsquirrel.com/
Twitter @FontSquirrel

Fontspring propose des polices web commerciales et gratuites d’excellente qualité. Il se veut une alternative à Typekit en proposant un modèle économique différent (les licences sont achetées à vie mais les fontes doivent être téléchargées et hébergées par l’acquéreur). Les prix sont très raisonnables mais réalistes au vu de la qualité du catalogue.

URL http://www.fontspring.com/
Twitter @fontspring

Ce service propose une sélection de fontes gratuites et de bonne qualité. La sélection n’est pas encore très étoffée, mais le gros avantage de ce service tient au CDN de Google. En effet, vous pouvez certes télécharger les fontes pour les utiliser sur vos sites, mais vous pouvez aussi les inclure directement depuis les infrastructures de Google à l’aide de simples feuilles de styles gracieusement proposées par Google.

URL http://code.google.com/webfonts

Typekit propose des licences Web pour des polices commerciales d’un large éventail de bonnes fonderies dont FontFont, Prochez Typofonderie et Adobe. Même grille tarifaire pour toutes les polices, prix de l’abonnement en fonction de l’utilisation, version d’essai gratuite (ou site peu fréquenté).

URL http://typekit.com/
Twitter @Typekit

Le service Web Fonts Preview de fonts.com permet de tester des typos web sur le site de votre choix par le biais d’une petite boîte qui se superpose au site et dans laquelle vous choisissez une typo de titraille et une autre pour le texte courant (exemple d’utilisation sur ce site).

Naturellement, cet outil ne permet de tester que les polices de fonts.com, ce qui explique que le catalogue semble très limité. Il comprend néanmoins un certain nombre de polices hintées (wouah c’est moche désolée) à la main qui passent impeccablement à l’écran.

Ce « Guide théorique et pratique pour les graphistes, les auteurs, les éditeurs et les étudiants » va droit au but. En trois parties – la lettre, le texte, la grille – on aborde les notions à savoir autour de la typographie. En vrac : familles, logotypes, fontes pour l’écran, interlignage, hiérarchie, section dorée, grille modulaire, ponctuation, etc.
Abondamment illustré, ce guide est pédagogique et précis. Aux éditions Pyramyd.

Publié dans les années 60 par un très grand designer, Grid Systems in graphic design détaille les méthodes de construction des grilles typographiques et leur utilisation. Il aborde des aspects très importants tels que le positionnement des images et des titres, l’usage de la couleur, le choix des caractères. Bien que ce livre soit entièrement tourné vers le design print, les réflexions qu’il suscite sont très pertinentes pour le designer Web.

Édité par l’Atelier Perrousseaux, le Guide de choix typographique se penche sur chaque famille de la classification Vox pour en dégager l’esprit à travers l’étude approfondie d’un de ses représentants. Richement illustré et très pratique avec ses listes de mots-clés qui synthétisent les connotations des familles de caractères, le Guide éclaire sur les impressions suscitées par les typographies que nous croisons tous les jours, dans la rue comme dans nos lectures.

David nous gratifie régulièrement d’articles tirés de chapitres de son livre : retrouvez-les dans la section Portrait de caractère.

Twitter @davidrault

Publié par Peachpit Press en 2003, ce Manuel complet de typographie n’usurpe pas son titre. Documenté, précis, exigeant, l’ouvrage couvre tous les aspects de la pratique contemporaine de la typographie, décrivant entre autres le problème du hinting dans les polices numériques, l’ajustement fin du paragraphe, le crénage, la composition des tableaux, le placement des images, bref, tous les paramètres de la composition du texte.

Dans ce petit ouvrage paru aux Éditions B42, Jost Hochuli, typographe et graphiste suisse, va droit au but et éclaire en quelques secondes sur l’ensemble des paramètres subtils qui ont une influence sur la qualité de la composition d’un texte.
Lire l’article dédié à ce livre sur Typographisme

N-B : Édité désormais sous le titre « Règles de l’écriture typographique du français » (Atelier Perrousseaux éditeur)

L’ouvrage débute par un historique rapide mais complet de l’écriture. Yves Perrousseaux présente ensuite les usages typographiques. Il réussi à « raconter » les règles, rendant la lecture agréable. Les illustrations permettent autant de mieux comprendre que de mieux retenir.

Bien que très précis et très professionnel, on apprécie aussi de la part de l’auteur la prise du recul et l’esprit pratique.

Aujourd’hui dans sa troisième édition, le Petit Manuel de composition typographique de Muriel Paris – typographe, graphiste, chercheuse et enseignante – est un livre de référence pratique et concis qui aborde les bases essentielles de la typographie : anatomie et classification des caractères, composition et règles essentielles. Le manuel se complète de pistes bibliographiques.

« Blog personnel de Loïc Sander – graphiste et dessinateur de caractères autodidacte – sur lequel il présente le fruit de ses travaux et recherches typographiques, accompagnées de quelques préoccupations linguistiques. Digressions à prévoir. »

URL http://www.akalollip.com/blog/
Twitter @EliasZi

L’indispensable Franck Adebiaye compile un « annuaire de la scène typographique française vivante » qui rassemble des fonderies, des créateurs et des typographes. N’hésitez pas à contribuer en signalant les absents !

URL http://www.fadebiaye.com/type/1554/typo_scene_fr

Notre star typographique nationale Jean-François Porchez ne s’exprime pas uniquement sur Typofonderie, il a aussi son jardin secret, fort joliment mis en page (Le Monde Courier !).

URL Chez Porchez

« Typographie et valeurs sémantiques, décryptage des courants graphiques et typographiques ». Blog tenu par le typographe Peter Gabor. Voir aussi Design & Typo, le site.

URL http://paris.blog.lemonde.fr/

À l’occasion du 450e anniversaire de la mort de Claude Garamont (1510–1561), le ministère de la Culture a ouvert un site grandement fouillé, documenté et illustré en hommage au graveur légendaire, à son époque et au destin de son caractère. Passionnant et fort joli.

URL http://www.garamond.culture.fr

Blog collectif tenus par d’excellents auteurs, dont Jean-François Porchez, David Rault, Jean-Baptiste Levée et Aurélen Foutoyet. Publie régulièrement des nouvelles de l’ATypI et attire l’attention sur des parutions intéressantes et les événements liés à la typographie (entre autres).

URL http://www.typographe.com/
Twitter @Typographe

Blog de Nicolas Taffin, président des Rencontres de Lure et éditeur, papier et numérique. Lecture indispensable à tous ceux qui s’intéressent à l’avenir de l’édition et aux problématiques propres à l’édition numérique, dans une optique d’ouverture et de liberté.

URL ¶Polylogue
Twitter @NT_polylogue

Graveur sur pierre, naturellement grand admirateur d’Eric Gill, John Pitt présente ses travaux sur son blog, mais écrit aussi des articles sur la calligraphie et l’histoire de la lettre. Passionné et passionnant.

URL http://stoneletters.wordpress.com/

Des images et encore des images, Beautiful Type est une très belle source d’inspiration typographique réalisée par Francis Chouquet et Aurélien Foutoyet.

URL http://beautifultype.net/
Twitter @bftype

Ce site d’excellente facture montre et analyse l’usage de la typographie en situation réelle. Chaque fonte analysée a droit à une page dédiée, mais l’accès peut se faire par thème ou par support selon vos centres d’intérêt. Ce site est une source remarquable d’inspiration tout autant que d’information sur la sémantique des dessins typographiques.

URL http://fontsinuse.com
Twitter @FontInUse

Un blog très documenté qui fait souvent intervenir des auteurs de grande qualité.

URL http://ilovetypography.com/
Twitter @ilovetypography

Le site de Tim Brown qui nous gratifie (trop rarement) de ses connaissances en matière de CSS et d’usage des fontes sur le Web.

URL : http://nicewebtype.com

Blog très pointu sur la typographie et le design en général, tenu par Alexander Charchar, un Australien fan de Jan Tschichold.

URL http://retinart.net/
Twitter @Retinart

Site et blog de la revue allemande Slanted dédiée à la typographie. Les contenus sont en allemands mais les non-germanophones y trouveront certainement leur compte (je veux dire qu’il y a plein d’images). La revue papier, elle, présente des contenus en allemand et en anglais.

URL http://slanted.de

Organe de l’Institut d’art et de design de l’Université de Birmingham, le Typographic Hub a pour vocation de promouvoir l’histoire, la théorie et la pratique du design typographique, de l’imprimerie et des métiers connexes, et vise, par la variété de ses articles, aussi bien les professionnels que le grand public.

URL http://www.typographichub.org/

Fondé en 2009 et réunissant Bruno Bernard, Stéphane Buellet, Jean-Baptiste Levée et Patrick Paleta, le Bureau des affaires typographiques s’est donné pour mission de « diffuser des créations d’alphabets de haute qualité ». D’ailleurs, le BAT propose des licences pour le Francesco de Jalleau (qui occupe une place de choix dans mon panthéon personnel de légendes vivantes), c’est dire.

URL http://www.batfoundry.com
Twitter @batfoundry

Rosetta est une fonderie indépendante spécialisée dans la création de typos incluant plusieurs alphabets (arabe, grec, cyrillique et latin paneuropéen actuellement) et se donne pour mission de promouvoir la recherche et la connaissance dans ce domaine.

URL http://www.rosettatype.com/
Twitter @rosettatype

SMeltery est une usine de fontes créée en 2002 par Jack Usine, également connu sous le nom de Jules Vernacular. Ses créations sont souvent inspirées d’enseignes, lettrages du quotidien et autres trouvailles.

URL http://www.smeltery.net/

La fonderie typographies.fr propose des alphabets latins et non latins et recherche les échanges autour de la question de la création typographique contemporaine. Vous y trouverez notamment le Joos, superbe caractère récompensé par le TDC.

URL http://typographies.fr

VTF est une jeune fonderie pleine de talent. Sa particularité est de proposer ses fontes sous licence libre : SIL Open Font ou Creative Commons. Un souffle nouveau se répand chez les fondeurs, le monde du « libre » n’est plus l’apanage des développeurs informatiques, même les typographes s’y mettent.

URL http://www.velvetyne.fr
Twitter @vtf1554

Les Éditions 205 distribuent les caractères de Damien Gautier avec la collaboration de Quentin Margat (Bureau 205) mais ne s’interdisent pas de distribuer la progéniture d’autres créateurs. Essentiellement des caractères de titrage, développés suite à des commandes particulières pour certains.

URL http://www.editions205.fr
Twitter @205corp

Réalisé par Carolina de Bartolo et Erik Spiekermann, auteurs du livre éponyme Explorations in Typography, Mastering the art of fine typesetting, ce site permet à l’utilisateur d’expérimenter différentes options de composition d’un texte donné en faisant varier les paramètres typographiques (police, corps, interlignage, justification, séparation des paragraphes, etc.).

Le site propose également un glossaire en anglais, des suggestions de mariage de typos et, bien sûr, une vue assez détaillée du bouquin dont il fait la promotion.

URL Explorations in Typography

Font Finder est une extension créée par Ben Dodson, disponible pour Firefox, Safari et Chrome, qui permet d’obtenir des informations sur la typographie d’une page Web. Assez simplement, elle extrait les petits bouts de CSS qui vont bien pour répondre à la question qui vous torture : mais quel est le nom de cette police qui chatoie sous mes yeux/insulte mon sens inné du bon goût ?

URL Ben Dodson - Browser Extensions (vous trouverez sur cette page les liens de téléchargement pour chaque navigateur)

GrabMyBooks est une extension pour Firefox incroyablement bien fichue qui vous permet de créer un fichier .epub à partir de pages Web. Le principe est simple et flexible : vous ajoutez des articles qui deviennent des chapitres dans un livre électroniques. Vous pouvez éditer, réordonner et renommer ces chapitres, et vous avez le contrôle sur les métadonnées et la couverture du bouquin. Génial pour tous ceux qui, comme moi, préfèrent lire les contenus longs sur liseuse plutôt que sur écran.

URL http://www.grabmybooks.com/

Œuvre de Chengyin Liu et disponible sous la forme d’un bookmarklet et d’une extension pour Chrome et Safari, What Font détecte automatiquement les polices d’une page Web, ainsi que le service de webfont utilisé, le cazéchéant.

URL What Font chez Chengyin Liu