8 façons simples d’améliorer la typographie dans vos designs

Par Antonio Carusone

Cet article a été écrit pour publication dans Smashing Magazine le 3 avril 2009. Je le reproduis ici pour vous être agréable.

Beaucoup de gens, y compris les designers, pensent que la typographie consiste à choisir une police, sa taille et si elle doit être grasse ou pas. Pour la plupart des gens, ça s'arrête là. Obtenir une bonne typographie demande tellement plus, notamment de s'attarder sur les détails que les designers négligent souvent.

Ces détails donnent au designer le contrôle total, leur permettant d'apporter une typographie belle et cohérente à leurs designs. Bien que ces subtilités puissent être appliquées à différents types de médias, dans cet article nous nous concentrerons sur leur application au design web à travers l'utilisation des CSS.

Voici donc 8 façons simples d'améliorer la typographie, et donc l'ergonomie, de vos designs.

Justification

La justification est la longueur d'une ligne de texte. Pour l'œil d'un lecteur, des lignes trop longues ou trop courtes peuvent être fatigantes et gênantes. Une justification longue perturbe le rythme de lecture car le lecteur a du mal à localiser la prochaine ligne de texte. Une justification étroite n'est acceptable que pour de petites quantités de texte. Pour une lisibilité optimale, vous devriez avoir une justification de 40 à 80 caractères, espaces inclus. Pour un design à une seule colonne, une justification de 65 caractères est considérée comme idéale.

Comparaison de texte bien et mal justifié

Une manière simple pour calculer la justification est d'utiliser la méthode de Robert Bringhurst, qui multiplie la taille de la police par 30. Si la taille de la police est de 10px, la multiplier par 30 vous donne une justification de 300px ou environ 65 caractères par ligne. Le code ressemblerait à quelque chose comme :

p {
  font-size: 10px;
  max-width: 300px;
}

Interlignage

L'interlignage est l'espace entre les lignes du corps de texte qui joue un rôle important dans sa lisibilité. Des lignes correctement espacées permettent au lecteur de mieux cerner la fonte et améliorent l'apparence globale du texte. L'interlignage altère aussi la couleur typographique, qui est la densité ou la tonalité d'une composition.

Plusieurs facteurs impactent l'interlignage : police, taille, graisse, casse, justification, intermot de la fonte, etc. Plus la justification est longue, plus l'interlignage devient nécessaire. À l'inverse, plus la taille de la fonte augmente, plus l'interlignage peut être réduit. Une bonne règle est de déterminer un interlignage de 2 à 5 points plus grand que la taille de la fonte, selon la police. Si vous avez une fonte de 12pt, un interlignage de 15 à 16pt devrait bien fonctionner sur le Web.

Comparaison de texte avec bonne et mauvaise hauteur d'interligne

Obtenir le bon espacement demande un peu de finesse, mais voici un exemple de ce à quoi le code pourrait ressembler :

body {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

Ponctuation flottante

Placez les guillemets dans la marge du corps de texte. En ignorant cela, un guillemet aligné avec le texte interrompra la marge gauche et perturbera le rythme du lecteur. Placer les guillemets à l'extérieur permet de conserver l'alignement à gauche intact et équilibré, améliorant ainsi la lisibilité.

Comparaison de guillemets alignés à la marge et dans le texte

Ce résultat est obtenu très facilement avec CSS en utilisant l'élément blockquote :

blockquote {
  text-indent: -0.8em;
  font-size: 12px;
}

L'indentation négative dépendra de la police, de la taille de la fonte et des marges utilisées.

Rythme vertical

Une grille de référence est fondamentale pour obtenir un rythme typographique cohérent sur une page. Elle permet au lecteur de suivre facilement le flux du texte, ce qui par la même augmente la lisibilité. Un rythme continu dans la dimension verticale maintient tout le texte sur une grille cohérente, afin que la proportion et l'équilibre soient conservés dans toute la page, quels que soient la taille de la fonte, l'interlignage ou la justification.

Comparaison de texte aligné ou non sur la grille

Pour conserver un rythme vertical en CSS il faut que l'espacement entre les éléments et l'interlignage soient égaux à la taille de la grille de référence. Par exemple, disons que vous utilisez une grille de référence de 15px, ce qui signifie qu'il y a 15px entre chaque ligne de base. L'interlignage serait de 15px et l'espace entre chaque paragraphe serait également de 15px. Voici un exemple :

body {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 15px;
}
p {
  margin-bottom: 15px;
}

Cela permet à chaque paragraphe de s'aligner sur la grille et ainsi de conserver le rythme vertical du texte.

Veuves et Orphelines

Une veuve est une ligne courte ou un mot unique à la fin d'un paragraphe. Un orphelin est un mot ou une ligne courte au début ou à la fin d'une colonne séparée du reste du paragraphe. Les veuves et les orphelines créent des drapeaux inélégants, interrompent l'œil du lecteur et affectent la lisibilité. Ils peuvent être évités en ajustant la taille de la fonte, l'interlignage, la justification, l'intermots, l'interlettrage ou en entrant manuellement des sauts de ligne.

Comparaison de texte sans et avec veuves et orphelines

Malheureusement, il n'existe pas de moyen facile pour empêcher les veuves et orphelines typographiques avec CSS. Une façon de les supprimer a été mentionnée précédemment, mais il existe également un plugin jQuery nommé jQWidon't qui place un espace insécable entre les deux derniers mots d'un élément.

[Ndt : les propriétés CSS widows et orphans permettraient de remédier à ce problème si elles étaient implémentées pour tout type de media]

Emphase

Mettre l'emphase sur un mot sans interrompre le lecteur est important. L'italique est généralement considéré comme étant la forme idéale d'emphase. D'autres formes d'emphase communes sont : gras, les capitales, les petites capitales, la taille de la fonte, la couleur, le soulignement ou une police de caractères différente. Essayez de vous limiter à une emphase unique, quelle qu'elle soit. Les combinaisons comme capitales-gras-italique sont perturbantes et ont l'air gauche.

Comparaison de texte avec emphase simple et combinée

Voici quelques manières différentes de créer une emphase en CSS :

span {
  font-variant: small-caps;
}
h1 {
  font-style: italic;
}
h2 {
  text-transform: uppercase;
}
a {
  text-decoration: underline;
}

Gardez à l'esprit que le style font-variant ne fonctionne que si la police choisie supporte la variante small-caps (petites capitales).

Échelle

Composez toujours à partir d'une échelle, que ce soit l'échelle traditionnelle développée au 16ème siècle de laquelle nous sommes tous familiers, ou une que vous créez vous-même. Une échelle est importante parce qu'elle établit une hiérarchie typographique qui améliore la lisibilité et crée une harmonie et cohérence à l'intérieur du texte.

Caractères dont la taille suit la progression de l'échelle typographique

Voici un exemple d'échelle typographique définie en CSS :

h1 {
  font-size: 48px;
}
h2 {
  font-size: 36px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 21px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}
p {
  font-size: 14px;
}

De beaux drapeaux

Lorsque vous ferrez un bloc de texte, à gauche ou à droite, un texte non justifié, soyez sûr de maintenir le drapeau (le côté inégal) équilibré sans aucuns « trous » inattendus ou formes bizarres. Un mauvais drapeau peut être déstabilisant pour l'œil et distraire le lecteur. Un bon drapeau est plus « doux », sans lignes trop longues ou trop courtes. Il n'existe aucun moyen de contrôler cela en CSS, donc pour obtenir un bon drapeau vous devez faire des ajustements manuels sur le bloc de texte.

Comparaison de texte bien et mal aligné

La césure peut aussi aider à faire des drapeaux propres, mais malheureusement les CSS ne peuvent pas le gérer pour l'instant. Peut-être dans un avenir proche, allons-nous avoir une certaine mesure de contrôle avec CSS 3. Tout n'est pas perdu cela dit. Il existe quelques solutions serveur et côté client pour une césure automatique comme phpHyphenator et Hyphenator ainsi que des générateurs en ligne.

Ressources supplémentaires

Voici une liste d'articles et livres sur le même thème pour vous aider avec les détails :

Fiche technique

À propos de l'auteur

Né dans le Queens, New-York dans une famille italienne très colorée, Antonio Carusone a été dans les arts créatifs depuis sont enfance.
Aujourd’hui, Antonio réside dans la ville de New-York, où il est Directeur artistique à Ogilvy, après avoir suivi la réputée High School of Art and Design dans la ville de New-York, puis le Pratt Institute de Brooklyn et enfin l’Academy of Art College de San Francisco.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

Design

Typographie

© 2001-2014 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site