Typographisme

Un site tenu par des amoureux de la typo, sur le Web comme ailleurs.

Les Ressources

Cette section a pour vocation de s'enrichir régulièrement. N'hésitez pas à donner, même brièvement, votre avis sur les ressources proposées si vous les avez utilisées. Nous n'avons pas nécessairement exploré intégralement toutes ces ressources, mais elles nous ont semblé suffisamment pertinentes pour que nous choisissions de les faire figurer ; nous ne sommes pas à l'abri d'une erreur de jugement, alors n'hésitez pas à nous orienter si vous pensez que nous faisons fausse route (ou si nous n'avons pas remarqué qu'un des blogueurs cités est un nazi, par exemple).

Grilles & Frameworks

Menu des ressources

#grid

#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/

Un avis ?

960 Grid System

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/

Un avis ?

Blueprint

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/

Un avis ?

Golden Grid System

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/

Un avis ?

Gridr buildrrr

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/

Un avis ?

OOCSS

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

2 avis

Variable Grid System

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/

Un avis ?

Services de Webfonts

Menu des ressources

FontDeck

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

Un avis ?

FontSquirrel

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

Un avis ?

Fontspring

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

Un avis ?

Google Font Directory

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

Un avis ?

Typekit

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

Un avis ?

Web Fonts Preview

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.

5 avis

Dans la bibliothèque

Menu des ressources

Comprendre la typographie, par Ellen Lupton

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.

Un avis ?

Grid Systems, par Josef Müller-Brockmann

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.

Un avis ?

Le Guide de choix typographique, par David Rault

É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

Un avis ?

Le Manuel complet de typographie, par James Felici

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.

2 avis

Manuel de typographie française élémentaire, par Yves Perrousseaux

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.

1 avis

Petit Manuel de composition typographique, par Muriel Paris

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.

Un avis ?

Blogs & sites [fr]

Menu des ressources

Akalollip

« 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

Un avis ?

Chez Porchez

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

Un avis ?

Garamond – Célébrations nationales

À 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

Un avis ?

Le Typographe

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

Un avis ?

Polylogue

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

Un avis ?

Blogs & sites [en]

Menu des ressources

All about lettering

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/

Un avis ?

Beautiful Type

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

Un avis ?

Fonts In Use

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 avis ?

Nice Web Type

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

Un avis ?

Slanted

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

Un avis ?

Typographic Hub

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/

Un avis ?

Fonderies & créateurs

Menu des ressources

Bureau des affaires typographiques

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

1 avis

Rosetta

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

Un avis ?

Typographies.fr

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

Un avis ?

VTF : Velvetyne Type Foundry

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

2 avis

Éditions 205

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

2 avis

Outils

Menu des ressources

Explorations in Typography

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

Un avis ?

Font Finder

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)

2 avis

GrabMyBooks

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/

Un avis ?

What Font

Œ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

1 avis