Les bonnes combinaisons typographiques : texte de labeur et de titrage

choix de la typo de labeur et titrage

Comment donner du relief à vos publications ?

Cette question, vous vous l’êtes sans doute déjà posée.
Le meilleur moyen de scander au mieux votre texte est sans doute d’utiliser de bonnes combinaisons typographiques entre vos entêtes et vos paragraphes. Les ressources de la typographie moderne sont immenses, mais tout comme Cyrano le résume fort bien, il faut savoir les combiner avec panache et avec style.

Il est donc important de faire une réelle distinction entre deux sortes de texte qui sont des ressources pour votre composition, le texte de labeur et celui de titrage.

  • Le texte de titrage est utilisée dans les titres. Il autorise plus de fantaisie et de liberté. Un caractère de titrage est destiné à composer un titre ou quelques phrases, des textes dans des tailles assez grandes. Ce choix doit être impactant (il l’est naturellement par la différence de corps c’est-à-dire de taille) et doit participer à la signature visuelle de votre ouvrage, publication ou article Web.
  • Le texte de labeur est utilisé  compose les paragraphes et est utilisé pour le texte courant. Le corps du caractère utilisé est le plus souvent compris entre 8pt et 14pt. Le choix de ce caractère va déterminer le confort et le plaisir de lecture de votre texte publié.

Ces deux forces vont participer à la personnalité de votre publication. Il s’agit donc de bien les combiner
Cette combinaison doit s’étudier de manière judicieuse et elle doit être choisie selon le sujet pour lequel vous travaillez, selon la cible que vous recherchez.

Le numérique et le web a démultiplié les usages de la typographie et démocratisant l’emploi de différentes fontes pour le meilleurs, mais parfois pour le pire. Typographe reste tout de même une métier ou à défaut une aptitude à laquelle tout le monde sera plus ou moins sensible mais que peu de professionnels maîtrisent avec bonheur.

Cet article vous propose de démeler ces usages afin d’être plus conscient de vos choix.

Comment choisir la typographie de vos textes et titres ?

Le meilleur moyen d’étudier cette question est sans doute de connaitre les grandes familles typographiques. Je ne me lancerai pas dans la classification Vox-Atypi (regardez ce terme sur le web pour comprendre comment on classe les différentes familles typographiques). Je n’en n’aborderai que trois caractéristiques, dont deux majeures pour nous que comprenions mieux comment faire un choix.

colonne trajane

Source photo Aulldemolins

TYPOGRAPHIES AVEC EMPATTEMENT

Évoque : haut de gamme, traditionnel, chic, mais peut manquer de modernité selon les cas.

Une police avec empattement ou police serif présente de petites terminaisons angulaires sur la base et l’extrémité des lettres. On les remarque tout particulièrement sur la fonte Trajan par exemple, laquelle est directement inspirée de l’inscription sur le piédestal colonne Trajane à Rome (sise à quelques centaines de mètres du Colisée).

Fontes serifs

L’empattement serait naturellement dû à l’utilisation de l’outil (ici un ciseau de tailleur pierre). Ce « défaut » inhérent de l’outil provoque néanmoins une meilleure lisibilité en accrochant mieux la lumière dans le cas d’une gravure lapidaire, et en servant de ‘rampe visuelle’ sur laquelle l’oeil s’appuie et glisse pour identifier les caractères pour le texte courant d’un paragraphe imprimé (consulter d’ailleurs vos livres de bibliothèque : la plupart utilisent une fonte sérif).

La quasi-totalité des polices utilisées en imprimerie était à empattement avant la première guerre mondiale.

fonte din

Source photo: jjay69, Flickr

TYPOGRAPHIES SANS EMPATTEMENT

Évoque : esprit entreprise, modernité, rationnel, simplicité, mais peut manquer de chaleur dans certains cas

Avec l’avènement de mouvement comme le Bauhaus et la banalisation de l’objet écrit est né le caractère sans empattement (ou sans sérif). En rupture avec la forme classique, le sans sérif apporte un aspect plus contemporain et épuré. Dû à sa simplicité, le caractère sans empattement peut proposer plus de variété typographique.sans serif

Certains avancent que la police sans empattement est un peu moins lisible et que ce défaut peut servir à attirer d’avantage l’attention et la tension du lecteur.

On répertorie globalement cette forme typographique dans la famille des linéales. J’ai beau savoir que cette famille de fonte peut être un peu moins lisible, j’aime tellement les linéales que je confesse les avoir utilisées pour mes textes de labeur et de paragraphe.
La photo d’illustration est composé en caractère Din, développé en 1995 par Albert-Jan Pool ; cette typo est utilisée dans la signalétique allemande (aéroport et autoroute), preuve s’il en est que ce genre de fonte peut offrir une lecture aisée.

La fonte serif Georgia est l’une des plus lisibles. Elle a été conçue par Matthew Carter pour un usage sur l’écran, même à basse définition. Elle est d’ailleurs utilisée lorsque vous composez un article dans le backoffice de WordPress (Georgia 16pt)
Les fontes sans sérif les plus lisibles sont l’Arial, le Courier et la Verdana…Les plus lisibles mais pas nécessairement les plus classieuses. Ne manquez pas d’ouvrir vos horizons typographiques pour découvrir vos propres coups de coeur.
peoni pro

Peoni Pro d’Emily Conners – Myfonts.com

TYPOGRAPHIES SCRIPTES

Évoque : univers fait main, instinctif, personnel, décontracté, mais peut manquer de sérieux dans certains cas

Je ne vous ferai pas l’insulte de mener une explication détaillée sur les typos scriptes. Cette famille de typo peut servir dans le cadre d’un texte de titrage, mais sauf exception, elle demeure assez peu lisible pour du texte de labeur. Lorsqu’elles sont extrêmement bien fondues, certaines de ces typos offrent des variations contextuelles (regarder le A capital de l’illustration ci-dessus, qui varie) : selon la place de la lettre dans le mot, telle lettre n’aura pas le même tracé. C’est le cas de la Peoni Pro de Emily Conners qui comprends 1200 glyphes, ou encore de la Eye catching qui m’a servi pour la charte graphique de Mes ateliers SEO. Une typo scripte peut apporter de la fraîcheur à votre titre ou à votre logo, mais il faut que cela ne soit pas au dépend de sa lisibilité

création de logo mes ateliers seo

Mes 8 règles de pro pour combiner des fontes

1 – Combiner les familles

Comme nous l’avons étudié, les différentes familles de typo ont leurs qualités propres.
Combiner une fonte sérif avec une sans sérif ou inversement, placer une typo scripte en texte de titrage est un bon moyen de dynamiser votre présentation. Veillez toutefois à la qualité de vos combinaisons !

2 – Combiner les couleurs

Sauf exception et pour une meilleure lisibilité, n’utilisez que du noir ou des nuances de gris pour votre texte de labeur. Votre texte de titrage peut comporter une couleur issue de votre charte. Pour plus de sobriété utilisez toujours la même nuance.

3 – N’utilisez que de la qualité

Exit donc les Dafont.com et Cie qui proposent des typos mal fondues et faites pas des débutants. Sur vos typos de titre, n’utilisez que des typos prémiums pour plus de distinction, ou des fontes libres de droit parmi les plus élégantes. Camdon Wilde a réalisé un tableau qui pourra vos donner des exemples de quelques bonnes typos.

4 – Privilégiez les grandes familles

Certaines fontes offrent une grande variété de variations (bold, condensed, extended…) qui peuvent enrichir vos présentations. Certaines typos proposent également une version sérif et sans sérif (comme la Droid) ; un bon moyen de choisir des combinaisons sans faute de goût.

5 – Respectez la hiérarchie visuelle

La typographie joue un rôle clé dans la hiérarchie visuelle d’un design. Assurez-vous que chaque police a un rôle clair : une pour les titres, une autre pour le corps du texte, et éventuellement une troisième pour les sous-titres ou les citations. Limitez-vous à deux ou trois polices maximum pour éviter de surcharger votre design et faciliter la lecture

6 – Tenez compte de l’époque et du style des polices

Évitez de mélanger une police classique comme Times New Roman avec une police moderne et géométrique comme Futura. Les deux polices appartiennent à des époques et des styles très différents, ce qui peut créer un déséquilibre visuel. Préférez des combinaisons qui partagent des caractéristiques similaires tout en apportant du contraste, comme associer une serif élégante (ex. Playfair Display) avec une sans-serif contemporaine (ex. Raleway).

7 – Évitez les polices trop similaires

Associer deux polices qui se ressemblent trop peut nuire à la lisibilité et rendre le design monotone. Par exemple, Helvetica et Univers sont trop proches pour fonctionner ensemble efficacement. Optez plutôt pour des polices qui contrastent suffisamment tout en restant compatibles, comme une serif élégante avec une sans-serif minimalist

8 – Jouez avec les proportions et la hauteur x

Les proportions des caractères (comme la hauteur x, qui correspond à la hauteur du caractère « x ») influencent l’harmonie entre deux polices. Choisissez des polices dont les proportions se complètent : par exemple, associez une police avec une hauteur x élevée à une autre aux proportions plus équilibrées pour créer un contraste subtil mais efficace

Où trouver de belles fontes

Typographie gratuites
www.fontsquirrel.com/
Vous trouverez sur ce site des fontes de qualité, avec un guide d’intégration pour votre site internet
www.google.com/fonts/
Un stock de fontes constamment en augmentation, à télécharger ou à importer
blog.spoongraphics.co.uk/
De belles alternatives aux fontes premiums les plus connus

Typographie prémiums (payantes)
www.fontfont.com/
Un superbe catalogue avec des fontes de grande qualité.
www.myfonts.com/
Une grande boutique sur laquelle je vais souvent. Des typos de qualité à tous les prix

Des collections
www.awwwards.com/the-100-greatest-free-fonts-for-2014.htm
https://designschool.canva.com/blog/best-free-fonts/

des Pdf de Référence
Un document intéressant à télécharger chez Adobe

Une bibliothèque très intéressante
qui donne des combinaisons de fontes, couleur, le tout codé également en CSS
http://typespiration.com/

Un autre article intéressant sur le sujet
https://www.canva.com/fr_fr/decouvrir/comment-associer-des-typos-10-combinaisons-infaillibles-et-gratuites/

La boite à outil

Retrouvez d’autres articles sur le thème de la TYPOGRAPHIE

Doit-on justifier sur  internet ?
Bonnes combinaisons typo
Évitez les fautes communes

Huit combinaisons que j’affectionne

Voici 8 mariages que j’apprécie. Ces combinaisons sont bâties à partir de typo libre de droit ou de typo prémiums. Ne manquez pas de vous les approprier pour mieux créer les vôtres.

5 replies
  1. Marc J.
    Marc J. says:

    Bonjour,

    Votre travail est ludique pour beaucoup de graphistes, qui se posent certainement beaucoup de questions sur l’emploi des typographies à utiliser dans leurs publications. Je suis sûr que cela leur est très utile.
    Les variations sur le thème de Cyrano sont sympas. Néanmoins, il persiste une faute typographique, le h après la lettrine doit être composé en petites capitales. Plus aucun journal ne s’astreint à cette règle, sauf le Canard Enchaîné.

    Amicalement, Marc J. , vieux typographe.

    Répondre
  2. Julien A l'art
    Julien A l'art says:

    Trouver son identité au niveau des fontes n’est pas chose aisée. Le rendu en fonction de l’écran (rétine ou pas) et du navigateur (moteurs de rendu différents) varie très fortement je trouve…
    J’ai essayé de diversifier les familles sur mon blog http://www.julienallart.me (en beta), je ne sais pas si mes choix sont pertinents et si le fait d’utiliser la fonte de « labeur » pour mes H2/H3 est une bonne idée… mais bon…

    Répondre
    • Veronique
      Veronique says:

      Bonjour Julien,

      J’ai visité ton site et je me permets de te faire part de mes impressions.
      Je suis une néophytes dans l’art de la typographie mais suis sans cesse à la recherche de l’élégance…
      Donc voici mon partage sans prétention :
      Je mettrais le texte en noir pour accentuer le confort de lecture.
      Je te rejoins sur la question d’utiliser la fonte de « labeur » pour tes titres. Du coup, si l’ensemble est cohérent, il risque d’être un petit peu lassant à la longue. Hormis la taille qui varie, rien ne capte mon œil.

      Ce serait peut-être intéressant de faire un essai allant dans le sens de ce qu’explique Fabrice. Qu’en penses-tu ?

      Alors, prêt pour le semi-marathon du 8 mars… ;-)

      Bien à toi.

      Répondre

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *