Typographie

Fonderies numériques

Libre et open-source

Les fontes distribuées sous licence libres sont nombreuses et leur qualité augmente constamment.

★ Velvetyne Type Foundry, ⚡ OpenSourcePublishing Foundry, Open Font Library, The League of Moveable Type, Omnibus Type, Open Foundry, Noir Blanc Rouge, ❤️ Badass Libre Fonts By Womxn.

Franck Adebiaye maintient un annuaire de la scène typographique française

☞ Raphaël Bastide a initié et développé un outil (libre) pour lister et sélectionner des fontes numériques. Il contient une liste importante de polices libres ou open source : use & modify.

Raphaël Bastide maintient également une liste de fonderies libres : gitlab.com/raphaelbastide/libre-foundries

Google est également devenu un distributeur de fontes ayant à son catalogue de nombreuses polices de qualité (pas toutes…) : Google Web Fonts. On se rappellera néanmoins qu’avec Google, rien n’est vraiment gratuit. Google se sert en effet des liens d’intégration des fontes comme de trackers lui permettant d’accumuler des données sur les visiteurs de votre page web.

Font Squirrel propose de nombreuses polices libres et/ou gratuites et dispose d’un excellent générateur de « packs » @font-face.

Services et fonderies commerciales

La plupart des fonderies de caractères a aujourd’hui pris le virage de la typographie pour le web. Les conditions d’accès aux webfonts sont cependant très différentes d’une fonderie à l’autre. La plupart des sites spécialisés offrent la mise à disposition de webfonts contre un abonnement annuel ; c’est le cas des gros diffuseurs cités ci-dessous. Ils ne doivent cependant pas éclipser la multiplicité des possibilités offertes par les diffuseurs et fonderies indépendantes.

Gros diffuseurs

Quelques indépendants à connaître

Twitter

Fontes variables

Jeter un œil aux ressources dédiées pour savoir comment les intégrer, les manipuler…

variablefonts.io

Une introduction complète (en anglais) aux fontes variables par Jason Pamental, Caren Litherland et Paula Ashton

v-fonts.com

Un site pour tester et trouver des fontes variables (commerciales et opensource), par Nick Sherman.

Typographie numérique

Ressources

A Curated list about digital typography. ; de nombreux outils, ressources et références pour tout ce qui touche à la manipulation numérique de la typographie. Attention, ça pique un peu les yeux.

Typographie à l’écran

Fondamentaux

The Elements of Typographic Style Applied to the Web

Publié en 2005 par Richard Rutter, ce site offre une lecture accélérée du classique de Robert Bringhurst, The Elements of Typographic Style (1992, Hartley & Marks), et décrit les solutions techniques envisageables en CSS – à l’époque… – pour satisfaire les principes énoncés dans le livre.

Thinking with type, d’Ellen Lupton

Guide pratique de la typographie par une grande dame du graphisme. Un peu d’histoire des formes typographiques, et beaucoup de conseils sur leur usage. Ce site est le compagnon du livre Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students, paru en français chez Pyramid.

Professional Web Typography

Un “livre web” très complet sur la typo pour le web, par Donny Truong.

Newsletters

Blogs

Pratique

Practical Typography est un livre web en anglais écrit par l’avocat Matthew Butterick, abordant l’ensemble des aspects de la typographie par la pratique.

En jouant

KernType, a kerning game est un petit jeu en ligne pour expérimenter les questions de l’approche (kerning) entre les caractères.

The Equilateral Triangle of a Perfect Paragraph est un autre jeu typographique en ligne permettant d’expérimenter les relations entre interligne, corps de caractère et largeur du paragraphe.

Réflexions et articles sur la typographie pour le web

Web Design is 95% Typography + The 100% Easy-2-Read Standard

Deux articles issus du blog de informationarchitects, studio helvetico-nippon (ça se dit ?). L’un sur le caractère fondamental de la dimension typographique du webdesign, l’autre sur quelques règles simples et importantes autour de la lisibilité (questionnables du point de vue d’un designer qui ne serait pas seulement un webdesigner).

READ ME!

Un article (en anglais) à la mise en page audacieuse sur les questions de lisibilité à l’écran. Lire aussi Designer as writer.

Techniques web

CSS : propriétés typographiques

Sur sitepoint.com, la références des propriétés typographiques CSS.

Gérer la taille du texte avec les « em »

Un article de Florent Vershelde chez Alsacréations, qui va un peu au delà de cette simple question de gestion de la taille du texte (corps).

Detail in web typography (pdf)

Aller plus loin avec @font-face, par Richard Rutter (@clagnut) : explorations des propriétés CSS avancées liées à l’utilisation de la typo sur le web (ligatures, graisses, chasses, etc.).

Archives

Vieux articles, sans doute moins pertinents en 2020.

Typography antialiasing + Real Web Type in Real Web Context

Comment le texte est il « rendu » à l’écran. Principes, qualités et problèmes de l’anti-crénelage (smashing magazine), et variations entre navigateurs et systèmes d’exploitation (A List Apart), traduit en français par Frédéric Chotard chez Pompage.net.

The essential guide to @font-face

Tel que son nom l’indique, un guide de référence pour l’utilisation de @font-face. Une version francophone et mise à jour d’un tel guide devrait être publiée bientôt sur Alsacréations pour faire suite à cet article : Comment utiliser une fonte « non-standard » sur un site Web ?

On Web Typography (2009)

Viel article de Jason Santa-Maria sur la typographie pour le web publié sur A List Apart.

Typographisme.net (2013…)

Site francophone qui propose de bons articles, fouillés, voire très fouillés (lire le très bon la typographie asymétrique de Jan Tschichold), sur la typographie au sens large et ses applications au web.