Typographie & CSS

Améliorer l’accessibilité & lisibilité des caractères

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.

6 Conseils pour une meilleure typographie


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.

1

L’ERREUR DE LA MAJUSCULE

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.

Merci de ne pas faire

Lorem ipsum dolor sit amet, consectetur HTML adipisicing elit. CSS Laboriosam voluptatem a beatae accusantium accusamus dolor provident error consectetur quibusdam suscipit neque temporibus.

Bonne solution

Lorem ipsum dolor sit amet, consectetur HTML adipisicing elit. CSS Laboriosam voluptatem a beatae accusantium accusamus dolor provident error consectetur quibusdam suscipit neque temporibus.

Merci de ne pas faire

La simplicité est uniquement simple quand quelqu’un a SUPPRIMÉ TOUTE LA COMPLEXITÉ.

Bonne solution utiliser l'italique

La simplicité est uniquement simple quand quelqu’un a supprimé toute la complexité.

2

Liaisons

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.

Ça c'est non

Ouverture 10h-19h

Bonne solution utiliser le demi-cadratin

Ouverture 10h–19h

Ça c'est non

Il est essentiel -selon moi- de suivre les standards du web.

Bonne solution avec un cadratin

Il est essentiel — selon moi — de suivre les standards du web.

3

“ & ”

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.

Mauvais exemple

"Bonjour"

Mieux une vraie citation

“Bonjour”

4

Unir les forces

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 animation de texte avec le script kerningjs

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; }

Pas de ligature

Affinity
Affluence
Configure

Mieux lisibilité améliorée

Affinity
Affluence
Configure

5

Ne pas justifier

É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.

Rivières disgracieuses

The world at once present and absent which the spectacle makes visible is the world of the commodity dominating all that…

Mieux alignement gauche

The world at once present and absent which the spectacle makes visible is the world of the commodity dominating all that…

6

Sauvez les listes

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)

Merci de ne pas faire

  • - Apperture science
  • - Black mesa

Bonne solution

  • Apperture science
  • Black mesa

Pour aller plus loin :

spiekermann.com