Type Quest: l'OpenType en CSS

Outil par (Designer Web & Mobile spécialisée en UI and UX design, Partout dans le monde :))
Créé le , mis à jour le (18182 lectures)
Tags : typographie, font, font-feature

Avec les avancées en CSS, il est possible d'utiliser de plus en plus de fonctionnalités typographiques du format OpenType en CSS, de quoi ravir les amateurs de jolies typographies. À la KiwiParty de 2012 déjà, Vincent De Oliveira nous donnait un avant-goût de ces propriétés.

Pour les graphistes habitués à Photoshop par exemple, les fonctionnalités OpenType sont disponibles dans le panneau des caractères :

Panneau polices de caractère dans Photoshop

Aujourd'hui je vous propose donc de découvrir le site Type Quest, une ressource en ligne qui vous permettra de transposer toutes les capacités des polices Open Type directement en CSS avec la propriété font-feature : ligatures, fractions, nombres, petites capitales, exposant, indice...

Type Quest

La partie Open Type Features est une démonstration des fonctionnalités, ainsi que le code CSS avec les préfixes navigateurs nécessaire pour le mettre en place sur votre site.

type quest ligatures

Quelques polices pour s'amuser avec l'Open Type

Calendas Plus est une très belle police Serif avec de magnifiques ligatures

Calendas Plus

(d'ailleurs pour la voir en ligne vous pouvez aller faire un tour chez Raphaël)

MEgalopolis Extra est une police gratuite avec plusieurs ligatures

megalopolis extra

Si vous avez un abonnement Adobe Typekit vous pouvez jouer avec Adobe Caslon Pro

Adobe Caslon Pro

Depuis peu existe la Libre Caslon Display, variante gratuite de la Caslon Pro

La Valentina est une jolie Didone qui vous offre de belles alternatives avec de superbes ligatures.

Vous voilà désormais prêts à jouer avec de la jolie typographie sur votre site, plus d'excuses !

Commentaires

Ten a dit le

Super site, merci :)

Un autre outil pour se mettre à jour sur les fonctionnalités opentype en CSS : http://kennethormandy.com/journal/normalize-o... . C’est une ressource passionnante :)

Victor BRITO a dit le

Merci, Stéphanie, pour cette ressource intéressante.

J'ai quelques remarques à propos de la propriété font-feature-settings, qui fait partie du module CSS 3 fonts, actuellement à l'état de candidature à recommandation. Les préfixes -o- et -ms- sont inutiles, puisque, d'une part, Presto, le moteur qu'Opera et Opera Mobile utilisaient et qu'Opera Mini utilise encore, n'a jamais pris en charge cette propriété et que, d'autre part, IE l'a implémentée directement sans préfixe, et ce, à partir de la version 10 (y compris IE Mobile 10). En outre, Firefox reconnaît (moyennant préfixe) la syntaxe prévue par le module CSS 3 mentionné depuis la version 15.

Source : http://caniuse.com/#feat=font-feature

QuentinC a dit le

Est-ce que quelqu'un sait si ce genre de choses a un impact négatif sur l'accessibilité, ou si c'est totalement transparent ?

Je demande ça parce que, par exemple, les ligatures dans un document PDF généré par LaTeX, c'est juste un cauchemar insoluble en terme d'accessibilité... les lecteurs d'écran sont totalement perdus. Donc si ce n'était pas transparent et si ça venait à être utilisé couramment, vouloir réintroduire ça en HTML/CSS signerait tout bonnement la fin de l'accessibilité aux lecteurs d'écran pour ce si beau format.

LE plus simple est sans doute d'avoir une page de test et de dire avec quel navigateur tester ?

Stéphanie W. a dit le

@QuentinC : Tu peux tester cette page http://typequest.org/features/ le paragraphe css font-feature-settings " est écrit avec une font à ligature. En théorie je vois pas trop pourquoi ça poserait un souci puisque c'est "écrit" normalement dans le HTML, et c'est le CSS qui modifie le visuel donc ça ne devrait rien impacter sur un lecteur d'écran

Ten a dit le

@QuentinC et @Stéphanie : je me sers des ligatures sur mon blog depuis longtemps et n’ai jamais rencontré de cas gênant, mais je n’ai pas testé tous les types de ligatures (notamment pour les formules mathématiques).

Cependant par extension je ne pense pas non plus que ce soit différent, du moins pour le navigateur : ça devrait en toute logique être totalement transparent.

QuentinC a dit le

@Stéphanie: 404

Stéphanie W. a dit le

@QuentinC : désolée le reste du texte est passé dans l'url, j'ai édité

QuentinC a dit le

JE viens de tester avec firefox 30. A priori c'est bon signe, rien ne se passe pour moi quand je clique sur les boutons on/off.

Par contre, c'est amusant de voir le nom de la police rapportée par jaws avec Insert+F: c'est un nom encodé en base64 qui a l'air de changer à chaque rechargement. Pendant mon test, c'était par exemple ufFPJaovSw10K1Ze+vov521Q== 45 point