Typographie & CSS

Ces dernières années, il y a eu énormément de progrès concernant la typographie web. Mais si vous souhaitez sublimer votre expérience de lecture il existe certains points que vous pouvez améliorer.

Avant de commencer

Voici quelques règles de base à mettre en place dès maintenant pour faciliter la lecture du contenu de vos pages web. Si tout le monde appliquait ces simples conseils, la lecture sur internet en serait meilleure.

• Aujourd’hui tous les navigateur sur le marché ont une taille de police par défaut de 16px.

• Largeur des paragraphes : actuellement le gros problème sur les sites concerne la largeur des paragraphes. Il sont beaucoup trop longs. max-width: 40em est une excellente base pour rendre le texte plus lisible.

• -webkit-font-smoothing: subpixel-antialiased peut parfois obstruer les lettres en particulier sur OSX.

• -webkit-font-smoothing: antialiased et -moz-osx-font-smoothing: grayscale peuvent fonctionner, mais attention à ne pas les utiliser sur des polices de petite taille.

• text-rendering: optimizeLegibility avec cette seule ligne vous pouvez corriger instantanément les 2 problèmes précédemment cités et améliorer la typographie sur le web.

NB : Tout ces conseils sont donnés par le typographe Erik Spiekermann, j’ai simplement adapté ses propos au monde de l’intégration CSS.

Ne JAMAIS utiliser de majuscules pour accentuer les mots dans une phrase.

Elles ressortent beaucoup trop et gâchent le rythme de la colonne ou de la page. Utilisez l’italique en remplacement. Si vous devez définir des mots en majuscules, utilisez les petites capitalisations appropriés avec ou sans majuscule, avec la balise abbr.

Il existe 3 façons de connecter des mots distincts : le trait d'union -, le tiret demi-cadratin – – et le tiret cadratin —, qui est plus large —. Le trait d'union est facilement accessible sur n'importe quel clavier Mac ou PC, alors que le cadratin est une combinaison des touches options + tiret sur Mac. Le demi-cadratin est accessible en utilisant les touches option + shift + tiret.

L'utilisation de ces 3 symboles différents dépends du pays d'origine ou de la tradition d'écriture. Le cadratin est utilisé —pour séparer les pensées commme ceci— mais visuellement je pense que c'est mieux de séparer avec un espace — comme cela —.

Le demi-cadratin sans espace est souvent utilisé pour combiner des chiffres comme des horaires : le magasin est ouvert entre 10h–19h, ou vous pouvez aussi pendre le train Paris–Lille seulement entre 6h–22h.

La principale régression, apportée par l’informatique en typographie, concerne la mauvaise utilisation des citations et apostrophes. Les citations peuvent avoir différentes formes. Généralement elles ressemblent à “ceci”, et sont facilement mémorisable par leur début “66” et leur fin “99”. Sur Mac option + apostrophe et option + shift + apostrophe.

En typographie une bonne gestion des espaces est indispensable. Ce travail est extrèmement long car il doit être réalisé à la main, caractère par caractère. Heureusement il existe des solutions pour améliorer la gestion des espaces entre deux lettres.

Le crénage peut être utilisé pour serrer ou desserrer l'espaces entre les caractères. kerningjs est une solution qui allie CSS et JavaScript afin de permettre une gestion automatisée de l'espacement.

Une ligature est une combinaison visuelle de 2 ou 3 lettres en un seul caractère comme ff, fi, fl, ffi. Les ligatures concervent les lettres de chevauchements, améliorent la lisibilité et sont facilement modifiables en CSS.

  h1 { letter-spacing: -3px; }

Évitez les réglages de chasse ! La plupart des applications créent un texte hideusement justifié par étirement en créant de nombreux espaces entre les mots. Notez qu’il faut de nombreuses heures de travail fastidieux, pour composer un texte justifié qui soit vraiment bien proportionné et lisible.

Pour cette raison, les professionnels préfèrent utiliser des compositions alignées sur la gauche, avec ou sans césure, en fonction de variation à la propriété line-height. Cela donne au texte une apparence plus harmonieuse et le rend plus facile à lire, puisque tous les espaces entre les mots ont la même largeur.

Utilisez des puces • ou des points centrés ⋅ au lieu des traits d'union - lorsque vous listez des éléments. Ils appartiennent au jeu de caractères standard et s'utilisent facilement :

• option + dièse (mac), alt + 0149 (windows)

· option + shift + 9 (mac), alt + 0183 (windows)

Pour aller plus loin :

spiekermann.com