« Typographie » : différence entre les versions

De Wiki des applications
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
{{Infobox
= Guide des Familles Typographiques =
| title = Guide des Familles Typographiques
| subtitle = Un guide professionnel pour comprendre et choisir les bonnes polices selon le contexte
| image = [[File:Typography-families.png|300px]]
| classification = Classification Maximilien Vox (ATypI)
| nb_familles = 10 familles principales
| usage = Professionnel, éditorial, design
}}


Le '''Guide des Familles Typographiques''' est une encyclopédie complète des classifications typographiques professionnelles. Il présente les principales familles de polices selon la nomenclature '''Maximilien Vox''', adoptée par l'Association Typographique Internationale (ATypI).
Le '''Guide des Familles Typographiques''' est un guide professionnel pour comprendre et choisir les bonnes polices selon le contexte.
 
== Sommaire ==
{{TOC limit|3}}


== Introduction ==
== Introduction ==
Ligne 17 : Ligne 7 :
La '''typographie''' est l'art d'organiser les caractères pour rendre le langage visible. Chaque famille de polices possède sa personnalité, ses connotations et ses domaines d'application privilégiés.
La '''typographie''' est l'art d'organiser les caractères pour rendre le langage visible. Chaque famille de polices possède sa personnalité, ses connotations et ses domaines d'application privilégiés.


{{Note|Ce guide présente les principales classifications typographiques selon la nomenclature '''Maximilien Vox''', adoptée par l'Association Typographique Internationale (ATypI). Elle reste la référence pour les professionnels de la typographie et permet une compréhension universelle des familles typographiques.}}
<div style="background: #fffbeb; border: 1px solid #fed7aa; border-left: 5px solid #f59e0b; padding: 15px; margin: 15px 0; border-radius: 5px;">
'''Note importante :''' Ce guide présente les principales classifications typographiques selon la nomenclature '''Maximilien Vox''', adoptée par l'Association Typographique Internationale (ATypI). Elle reste la référence pour les professionnels de la typographie.
</div>


== Les Empattements : Clé de Classification ==
== Les Empattements : Clé de Classification ==


Les '''empattements''' (ou sérifs) sont les petites extensions qui terminent les traits des lettres. Ils constituent le critère principal de classification typographique et influencent la lisibilité, la personnalité et l'usage optimal d'une police.
Les '''empattements''' (ou sérifs) sont les petites extensions qui terminent les traits des lettres. Ils constituent le critère principal de classification typographique.


=== Avec empattements (Serif) ===
=== Avec empattements (Serif) ===
Petites extensions qui terminent les traits des lettres. Ils guident l'œil dans la lecture et créent des lignes visuelles horizontales.
* Petites extensions qui terminent les traits des lettres
 
* Guident l'œil dans la lecture
'''Exemples :''' Times New Roman, Garamond, Georgia
* Créent des lignes visuelles horizontales
* '''Exemples :''' Times New Roman, Garamond, Georgia


=== Sans empattements (Sans-serif) ===
=== Sans empattements (Sans-serif) ===
Lettres aux traits nets sans prolongements. Apparence épurée et moderne, excellente lisibilité sur écran.
* Lettres aux traits nets sans prolongements
* Apparence épurée et moderne
* Excellente lisibilité sur écran
* '''Exemples :''' Arial, Helvetica, Inter


'''Exemples :''' Arial, Helvetica, Inter
<div style="background: #eff6ff; border: 1px solid #bfdbfe; border-left: 5px solid #3b82f6; padding: 15px; margin: 15px 0; border-radius: 5px;">
'''Physiologie de la lecture'''
* '''Avec empattements :''' Les sérifs aident l'œil humain à passer d'une lettre à l'autre et le cerveau interprète le mot très rapidement.
* '''Sans empattements :''' Les caractères "bâtons" peuvent être assimilés à des murs, l'œil s'arrête sur chaque lettre, fatiguant sur les textes longs.
</div>


{{Info|'''Physiologie de la lecture'''
== Classification des Familles ==
* '''Avec empattements :''' Les sérifs aident l'œil humain à passer d'une lettre à l'autre et naturellement le cerveau interprète le mot très rapidement.
* '''Sans empattements :''' Les caractères "bâtons" peuvent être assimilés à des murs, l'œil s'arrête sur chaque lettre et le mot est donc interprété de façon plus lente, fatiguant l'œil humain sur les textes longs.}}


== Classification des Familles Typographiques ==
{| class="wikitable" style="width:100%; border-collapse: collapse;"
 
=== Tableau Récapitulatif ===
 
{| class="wikitable sortable" style="width:100%"
|-
|-
! Famille !! Caractéristiques !! Connotation !! Exemples de polices !! Exemples d'utilisation
! style="background-color: #f0f0f0; padding: 10px;" | Famille
! style="background-color: #f0f0f0; padding: 10px;" | Caractéristiques
! style="background-color: #f0f0f0; padding: 10px;" | Connotation
! style="background-color: #f0f0f0; padding: 10px;" | Exemples
! style="background-color: #f0f0f0; padding: 10px;" | Usage
|-
|-
| '''[[#Humanes|Humanes]]''' || Sérifs épais, faible contraste, inspirées manuscrits Renaissance || Tradition, sérieux, érudition || Centaur, Jenson, Adobe Jenson || Livres d'art, éditions classiques
| style="padding: 8px; font-weight: bold;" | '''Humanes'''
| style="padding: 8px;" | Sérifs épais, faible contraste, inspirées manuscrits Renaissance
| style="padding: 8px;" | Tradition, sérieux, érudition
| style="padding: 8px;" | Centaur, Jenson, Adobe Jenson
| style="padding: 8px;" | Livres d'art, éditions classiques
|-
|-
| '''[[#Garaldes|Garaldes]]''' || Sérifs fins, contraste modéré, élégantes || Raffinement, prestige, culture || Garamond, Bembo, Palatino || Beaux livres, logos culturels
| style="padding: 8px; font-weight: bold;" | '''Garaldes'''
| style="padding: 8px;" | Sérifs fins, contraste modéré, élégantes
| style="padding: 8px;" | Raffinement, prestige, culture
| style="padding: 8px;" | Garamond, Bembo, Palatino
| style="padding: 8px;" | Beaux livres, logos culturels
|-
|-
| '''[[#Réales|Réales]]''' || Sérifs droits, contraste marqué, rationalisation || Modernité classique, sérieux || Times New Roman, Baskerville, Georgia || Presse, édition, documents officiels
| style="padding: 8px; font-weight: bold;" | '''Réales'''
| style="padding: 8px;" | Sérifs droits, contraste marqué, rationalisation
| style="padding: 8px;" | Modernité classique, sérieux
| style="padding: 8px;" | Times New Roman, Baskerville, Georgia
| style="padding: 8px;" | Presse, édition, documents officiels
|-
|-
| '''[[#Didones|Didones]]''' || Contraste extrême, sérifs horizontaux très fins || Luxe, sophistication, élégance froide || Didot, Bodoni, Walbaum || Mode, magazines, affiches prestige
| style="padding: 8px; font-weight: bold;" | '''Didones'''
| style="padding: 8px;" | Contraste extrême, sérifs horizontaux très fins
| style="padding: 8px;" | Luxe, sophistication, élégance froide
| style="padding: 8px;" | Didot, Bodoni, Walbaum
| style="padding: 8px;" | Mode, magazines, affiches prestige
|-
|-
| '''[[#Mécanes|Mécanes]]''' || Sérifs massifs, peu de contraste, robustes || Solidité, puissance, industrie || Rockwell, Clarendon, Courier || Affiches, signalétique, branding rétro
| style="padding: 8px; font-weight: bold;" | '''Mécanes'''
| style="padding: 8px;" | Sérifs massifs, peu de contraste, robustes
| style="padding: 8px;" | Solidité, puissance, industrie
| style="padding: 8px;" | Rockwell, Clarendon, Courier
| style="padding: 8px;" | Affiches, signalétique, branding rétro
|-
|-
| '''[[#Linéales|Linéales]]''' || Sans sérif, dessin simple et géométrique || Modernité, neutralité, efficacité || Helvetica, Arial, Futura, Univers || Identité visuelle, web, UI/UX
| style="padding: 8px; font-weight: bold;" | '''Linéales'''
| style="padding: 8px;" | Sans sérif, dessin simple et géométrique
| style="padding: 8px;" | Modernité, neutralité, efficacité
| style="padding: 8px;" | Helvetica, Arial, Futura, Univers
| style="padding: 8px;" | Identité visuelle, web, UI/UX
|-
|-
| '''[[#Incises|Incises]]''' || Inspirées de la gravure lapidaire, empattements courts || Autorité, monumentalité, institution || Optima, Albertus, Trajan || Logos universitaires, affiches cinéma
| style="padding: 8px; font-weight: bold;" | '''Incises'''
| style="padding: 8px;" | Inspirées de la gravure lapidaire, empattements courts
| style="padding: 8px;" | Autorité, monumentalité, institution
| style="padding: 8px;" | Optima, Albertus, Trajan
| style="padding: 8px;" | Logos universitaires, affiches cinéma
|-
|-
| '''[[#Scriptes|Scriptes]]''' || Écriture cursive, fluide et liée || Élégance, créativité, proximité || Brush Script, Zapfino, Snell Roundhand || Invitations, packaging, logos créatifs
| style="padding: 8px; font-weight: bold;" | '''Scriptes'''
| style="padding: 8px;" | Écriture cursive, fluide et liée
| style="padding: 8px;" | Élégance, créativité, proximité
| style="padding: 8px;" | Brush Script, Zapfino, Snell Roundhand
| style="padding: 8px;" | Invitations, packaging, logos créatifs
|-
|-
| '''[[#Manuaires|Manuaires]]''' || Imite l'écriture manuelle non cursive || Convivialité, naturel, authenticité || Comic Sans, Chalkboard, Mistral || Communication informelle, scolaire
| style="padding: 8px; font-weight: bold;" | '''Manuaires'''
| style="padding: 8px;" | Imite l'écriture manuelle non cursive
| style="padding: 8px;" | Convivialité, naturel, authenticité
| style="padding: 8px;" | Comic Sans, Chalkboard, Mistral
| style="padding: 8px;" | Communication informelle, scolaire
|-
|-
| '''[[#Fractures|Fractures]]''' || Style gothique médiéval, anguleux || Tradition, autorité, rétro || Textura, Old English, Fraktur || Journaux (NYT), brasseries, marques rétro
| style="padding: 8px; font-weight: bold;" | '''Fractures'''
| style="padding: 8px;" | Style gothique médiéval, anguleux
| style="padding: 8px;" | Tradition, autorité, rétro
| style="padding: 8px;" | Textura, Old English, Fraktur
| style="padding: 8px;" | Journaux (NYT), brasseries, marques rétro
|}
|}


== Familles Détaillées ==
== Règles Professionnelles ==


=== Humanes ===
<div style="background: #fef2f2; border: 1px solid #fecaca; border-left: 5px solid #ef4444; padding: 15px; margin: 15px 0; border-radius: 5px;">
{{Main|Humanes (typographie)}}
'''Règle d'or : Maximum 3 polices par projet'''
* '''1 police''' = minimalisme
* '''2 polices''' = optimal (titre + corps de texte)
* '''3 polices''' = maximum absolu
* '''Plus de 3''' = chaos visuel garanti !
</div>


Les '''Humanes''' sont les premières polices inspirées de l'écriture humaniste de la Renaissance. Elles se caractérisent par un contraste modéré entre pleins et déliés, des empattements triangulaires et une légère inclinaison de l'axe des lettres rondes.
=== Lisibilité ===
* Maximum 65-75 caractères par ligne
* Interlignage de 1.4 à 1.6 fois la taille de police
* '''Préférer les serif pour l'imprimé''' - les empattements guident naturellement l'œil
* '''Sans-serif pour l'écran''' - évite la fatigue visuelle sur supports numériques
* Éviter les polices décoratives pour plus de 2 lignes


'''Caractéristiques :'''
=== Hiérarchie ===
* Sérifs épais et triangulaires
* '''H1 :''' 32-48px (2-3x le corps de texte)
* Faible contraste entre pleins et déliés
* '''H2 :''' 24-32px (1.5-2x le corps de texte)
* Axe oblique des lettres rondes
* '''H3 :''' 20-24px (1.25-1.5x le corps de texte)
* Inspiration des manuscrits de la Renaissance
* '''Corps :''' 16-18px (taille de base)
* '''Légendes :''' 12-14px


'''Connotation :''' Tradition, humanisme, lisibilité, chaleur, approche artisanale, élégance classique.
=== Impact Visuel des Styles ===


'''Usage :''' Livres littéraires, publications académiques, magazines culturels, sites web éditoriaux, identités visuelles d'institutions.
{| class="wikitable" style="width:100%;"
|-
! style="background-color: #f0f0f0; padding: 10px;" | Style
! style="background-color: #f0f0f0; padding: 10px;" | Impact psychologique
! style="background-color: #f0f0f0; padding: 10px;" | Usage recommandé
|-
| style="padding: 8px; font-weight: bold; text-transform: uppercase;" | MOT EN CAPITAL
| style="padding: 8px;" | Impression de parler fort
| style="padding: 8px;" | Titres courts, appels à l'action, urgence
|-
| style="padding: 8px;" | Mot en minuscule
| style="padding: 8px;" | Impression de parler normalement
| style="padding: 8px;" | Corps de texte, communication standard
|-
| style="padding: 8px; font-style: italic;" | ''Mot en italique''
| style="padding: 8px;" | Impression de parler tout bas
| style="padding: 8px;" | Emphasis subtile, citations, notes
|}


'''Polices célèbres :''' Adobe Jenson, Centaur, Cloister Old Style
== Le Cas Comic Sans ==


=== Garaldes ===
<div style="background: #fef2f2; border: 1px solid #fecaca; border-left: 5px solid #ef4444; padding: 15px; margin: 15px 0; border-radius: 5px;">
{{Main|Garaldes}}
'''Analyse professionnelle :''' Comic Sans est devenue le symbole du mauvais goût typographique car elle est '''surutilisée dans des contextes inappropriés'''. Son caractère enfantin et décontracté jure avec le sérieux attendu dans certaines situations.
</div>


Évolution des Humanes, les '''Garaldes''' offrent un meilleur contraste et une construction plus géométrique. Elles portent le nom de Claude Garamont et Aldus Manutius, deux grands typographes de la Renaissance.
=== Usage Approprié ===
* Communications informelles
* Contenu pour enfants
* Notes personnelles
* Contexte humoristique assumé
* Accessibilité (certains dyslexiques la trouvent plus lisible)


'''Caractéristiques :'''
=== Usage Inapproprié ===
* Sérifs fins et nets
* Documents professionnels
* Contraste modéré mais visible
* Présentations d'entreprise
* Construction plus géométrique que les Humanes
* Sites web corporate
* Excellent équilibre entre tradition et lisibilité
* Mémoires et thèses
* Signalétique officielle


'''Connotation :''' Raffinement français, excellence littéraire, sophistication, tradition éditoriale, culture.
<div style="background: #fffbeb; border: 1px solid #fed7aa; border-left: 5px solid #f59e0b; padding: 15px; margin: 15px 0; border-radius: 5px;">
'''"Ce n'est pas Comic Sans qui pose problème, c'est son usage dans le mauvais contexte"'''<br>
— Vincent Connare, créateur de Comic Sans
</div>


'''Usage :''' Romans classiques, revues littéraires, éditions de prestige, sites culturels, branding de luxe.
== Guide de Sélection par Contexte ==


'''Polices célèbres :''' Garamond, Sabon, Minion, Adobe Garamond Pro
=== Contenu éditorial long ===
'''Recommandation :''' Humanes ou Garaldes
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 5px solid #10b981; padding: 10px; margin: 10px 0; border-radius: 5px;">
Excellente lisibilité pour les textes longs, confort de lecture optimal, empattements qui guident l'œil.
</div>


=== Réales ===
=== Interfaces numériques ===
{{Main|Réales (typographie)}}
'''Recommandation :''' Linéales
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 5px solid #10b981; padding: 10px; margin: 10px 0; border-radius: 5px;">
Clarté maximale sur écran, neutralité, adaptabilité, lisibilité sur tous supports numériques.
</div>


Les '''Réales''' (ou Transitionnelles) marquent l'évolution vers plus de contraste et de rigueur géométrique. Elles constituent un pont entre les Garaldes et les Didones.
=== Titres impactants ===
'''Recommandation :''' Mécanes ou Didones
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 5px solid #10b981; padding: 10px; margin: 10px 0; border-radius: 5px;">
Impact visuel maximum, personnalité marquée, parfait pour capter l'attention et affirmer un message.
</div>


'''Caractéristiques :'''
=== Touche personnelle ===
* Sérifs plus droits et géométriques
'''Recommandation :''' Scriptes
* Contraste marqué entre pleins et déliés
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 5px solid #10b981; padding: 10px; margin: 10px 0; border-radius: 5px;">
* Construction rationalisée
Humanité et proximité, dimension artisanale, créativité, parfait pour personnaliser la communication.
* Axe vertical des lettres rondes
</div>


'''Connotation :''' Modernité classique, sérieux, autorité, fiabilité.
== Conseils par Support ==


'''Usage :''' Presse quotidienne, édition, documents officiels, sites web institutionnels.
=== Web & Mobile ===
 
'''Polices célèbres :''' Times New Roman, Baskerville, Georgia, Caslon
 
=== Didones ===
{{Main|Didones}}
 
Les '''Didones''' (ou Modernes) poussent le principe du contraste à l'extrême avec des contrastes très marqués entre traits épais et fins.
 
'''Caractéristiques :'''
* Contraste extrême entre pleins et déliés
* Sérifs horizontaux très fins
* Construction géométrique parfaite
* Esthétique froide et rationnelle
 
'''Connotation :''' Luxe, sophistication, élégance froide, prestige, modernité.
 
'''Usage :''' Magazines de mode, affiches prestige, identités de marques haut de gamme, titres impactants.
 
'''Polices célèbres :''' Didot, Bodoni, Walbaum, Moderne
 
=== Mécanes ===
{{Main|Mécanes}}
 
Apparues au XIXe siècle, les '''Mécanes''' (ou Égyptiennes) se distinguent par leurs empattements rectangulaires très épais, presque aussi épais que les fûts. Elles reflètent l'esthétique de l'ère industrielle.
 
'''Caractéristiques :'''
* Empattements rectangulaires très épais
* Peu de contraste entre pleins et déliés
* Construction robuste et géométrique
* Aspect massif et industriel
 
'''Connotation :''' Solidité, industrie, fiabilité, force, simplicité, pragmatisme.
 
'''Usage :''' Titres accrocheurs, interfaces digitales, branding tech, signalétique, supports de communication corporate.
 
'''Polices célèbres :''' Rockwell, Clarendon, Roboto Slab, Archer
 
=== Linéales ===
{{Main|Linéales}}
 
Les '''Linéales''' (sans-serif) abandonnent les empattements pour une approche épurée. Elles incarnent l'esprit du XXe siècle et du modernisme, privilégiant la fonctionnalité et la lisibilité.
 
'''Caractéristiques :'''
* Absence totale d'empattements
* Traits uniformes ou peu contrastés
* Construction géométrique ou humaniste
* Simplicité et clarté
 
'''Connotation :''' Modernité, clarté, neutralité, efficacité, innovation, simplicité.
 
'''Usage :''' Interfaces web et mobile, signalétique moderne, identités tech, supports numériques, communications contemporaines.
 
'''Polices célèbres :''' Helvetica, Arial, Inter, Futura, Gill Sans
 
'''Sous-classifications des Linéales :'''
* '''Géométriques :''' Futura, Avant Garde
* '''Humanistes :''' Gill Sans, Frutiger
* '''Néo-grotesques :''' Helvetica, Univers
* '''Grotesques :''' Akzidenz Grotesk, Franklin Gothic
 
=== Incises ===
{{Main|Incises}}
 
Inspirées des inscriptions gravées dans la pierre de l'Antiquité romaine, les '''Incises''' évoquent la gravure et la sculpture. Elles n'ont pas d'empattements traditionnels mais des terminaisons évasées.
 
'''Caractéristiques :'''
* Inspiration de la gravure lapidaire antique
* Terminaisons évasées mais pas d'empattements
* Construction monumentale
* Contraste modéré
 
'''Connotation :''' Noblesse, antiquité, gravité, permanence, tradition, monumentalité.
 
'''Usage :''' Titres institutionnels, monuments, plaques commémoratives, identités d'établissements prestigieux, packaging de luxe.
 
'''Polices célèbres :''' Trajan, Optima, Albertus, Copperplate Gothic
 
=== Scriptes ===
{{Main|Scriptes}}
 
Les '''Scriptes''' et '''Manuaires''' imitent l'écriture à la main, depuis la calligraphie élégante jusqu'à l'écriture cursive décontractée. Elles apportent une dimension personnelle et humaine au texte.
 
'''Caractéristiques :'''
* Imitation de l'écriture manuscrite
* Liaison entre les lettres (pour les scriptes)
* Variabilité dans l'épaisseur des traits
* Aspect fluide et organique
 
'''Connotation :''' Personnalisation, créativité, spontanéité, élégance, intimité, artisanat.
 
'''Usage :''' Invitations, cartes de vœux, logos créatifs, titres décoratifs, packaging artisanal, communications personnelles.
 
'''Polices célèbres :''' Brush Script, Dancing Script, Pacifico, Lobster
 
=== Manuaires ===
{{Main|Manuaires}}
 
Les '''Manuaires''' imitent l'écriture manuelle non cursive, souvent avec un aspect enfantin ou décontracté.
 
'''Caractéristiques :'''
* Imitation de l'écriture manuscrite non liée
* Aspect souvent enfantin ou décontracté
* Irrégularités volontaires
* Convivialité assumée
 
'''Connotation :''' Convivialité, naturel, authenticité, simplicité, approche humaine.
 
'''Usage :''' Communication informelle, supports scolaires, contextes créatifs spécifiques.
 
'''Polices célèbres :''' Comic Sans MS, Chalkboard, Mistral
 
=== Fractures ===
{{Main|Fractures (typographie)}}
 
Héritières de l'écriture gothique médiévale, les '''Fractures''' (ou Gothiques) se caractérisent par leurs formes angulaires et leur densité. Elles évoquent les manuscrits enluminés du Moyen Âge.
 
'''Caractéristiques :'''
* Formes angulaires et denses
* Inspiration de l'écriture gothique
* Traits épais et contrastés
* Aspect décoratif marqué
 
'''Connotation :''' Histoire, mysticisme, tradition germanique, solennité, spiritualité, ancienneté.
 
'''Usage :''' Certificats, diplômes, contextes historiques, branding traditionnel, événements solennels, décoration thématique.
 
'''Polices célèbres :''' Old English Text, Fraktur, UnifrakturMaguntia
 
== Règles Professionnelles d'Usage ==
 
=== Principes Généraux ===
 
==== Lisibilité ====
{{Info|'''Règle d'or :''' Privilégier la lisibilité avant tout. Une belle police illisible ne sert à rien.}}
 
'''Pour le texte courant :'''
* Maximum 65-75 caractères par ligne
* Interlignage de 1.4 à 1.6 fois la taille de police
* '''Préférer les serif pour l'imprimé''' - les empattements guident naturellement l'œil
* '''Sans-serif pour l'écran''' - évite la fatigue visuelle sur supports numériques
* Éviter les polices décoratives pour plus de 2 lignes
 
==== Hiérarchie ====
'''Organiser l'information :'''
* Maximum 3 polices différentes par projet
* Titre : 2-3x plus grand que le texte courant
* Sous-titres : 1.5-2x plus grands
* Utiliser poids et couleurs pour différencier
 
==== Harmonie ====
'''Association intelligente :'''
* Serif + Sans-serif = combinaison classique
* Éviter deux serif ou deux sans-serif similaires
* Contraster : gras/fin, large/étroit
* Tester la lisibilité à différentes tailles
 
=== Nombre de Polices ===
{{Warning|'''Règle d'or : Maximum 3 polices'''
* '''1 police :''' Documents simples, minimalisme
* '''2 polices :''' Titre + corps de texte (optimal)
* '''3 polices :''' Titre + sous-titre + corps (maximum)
* '''Plus de 3 = chaos visuel'''}}
 
=== Tailles de Police ===
'''Hiérarchie recommandée :'''
* '''H1 :''' 32-48px (2-3x le corps)
* '''H2 :''' 24-32px (1.5-2x le corps) 
* '''H3 :''' 20-24px (1.25-1.5x le corps)
* '''Corps :''' 16-18px (base)
* '''Caption :''' 12-14px (légendes)
 
=== Gestion de la Casse ===
'''Bonnes pratiques :'''
* '''Titres :''' Title Case ou sentence case
* '''Corps :''' Toujours en minuscules
* '''Boutons :''' UPPERCASE court (max 3 mots)
 
{{Warning|'''À éviter :''' TOUT EN MAJUSCULES pour du texte long}}
 
=== Espacement & Alignement ===
'''Mesures optimales :'''
* '''Interlignage :''' 1.4-1.6x la taille de police
* '''Largeur ligne :''' 45-75 caractères
* '''Marges :''' Proportionnelles au contenu
* '''Alignement :''' Gauche pour l'occidental
 
=== Conseils par Support ===
 
==== Web & Mobile ====
* Privilégier les sans-serif
* Privilégier les sans-serif
* Taille minimum : 16px
* Taille minimum : 16px
Ligne 311 : Ligne 209 :
* Tester sur différents écrans
* Tester sur différents écrans


==== Documents Imprimés ====
=== Documents Imprimés ===
* Serif pour le corps de texte
* Serif pour le corps de texte
* Taille minimum : 10pt
* Taille minimum : 10pt
Ligne 318 : Ligne 216 :
* Tester en noir et blanc
* Tester en noir et blanc


==== Supports Marketing ====
=== Supports Marketing ===
* 1 police de titre expressive
* 1 police de titre expressive
* 1 police de texte lisible
* 1 police de texte lisible
* Cohérence avec l'identité de marque
* Cohérence avec l'identité de marque
* Impact visuel prioritaire
* Impact visuel prioritaire
* Décliner sur tous supports


==== Présentations ====
=== Présentations ===
* Sans-serif pour la lisibilité
* Sans-serif pour la lisibilité
* Taille minimum : 24pt
* Taille minimum : 24pt
Ligne 332 : Ligne 229 :
* Éviter les polices décoratives
* Éviter les polices décoratives


=== Impact Visuel des Styles ===
== Tendances 2024-2025 ==
 
{| class="wikitable"
|-
! Style !! Impact !! Usage recommandé
|-
| '''MOT EN CAPITAL''' || Impression de parler fort || Titres courts, appels à l'action, urgence
|-
| Mot en minuscule || Impression de parler normalement || Corps de texte, communication standard
|-
| ''Mot en italique'' || Impression de parler tout bas || Emphasis subtile, citations, notes
|}
 
=== Erreurs Fréquentes à Éviter ===
{{Warning|'''Erreurs courantes :'''
* Trop de variantes (mélanger gras, italique, souligné, couleurs)
* Polices similaires (Arial + Helvetica dans le même document)
* Manque de contraste (texte gris clair sur fond blanc)
* Justification abusive (espaces irréguliers sur web)}}
 
== Tendances Typographiques 2024-2025 ==


=== Variables & Adaptatives ===
=== Variables & Adaptatives ===
'''Polices :''' Inter, Roboto Flex, Source Sans Variable
'''Polices :''' Inter, Roboto Flex, Source Sans Variable


Polices qui s'adaptent automatiquement selon le contexte (taille d'écran, densité). Parfaites pour le responsive design et les interfaces modernes. Les variable fonts révolutionnent le design web.
Polices qui s'adaptent automatiquement selon le contexte (taille d'écran, densité). Parfaites pour le responsive design et les interfaces modernes.


=== Neo-Grotesques ===
=== Neo-Grotesques ===
'''Polices :''' Sohne, Suisse, Grotesk
'''Polices :''' Sohne, Suisse, Grotesk


Retour aux sources du design suisse avec une approche contemporaine. Minimalisme assumé et lisibilité optimale. Les grotesques modernes allient tradition et innovation.
Retour aux sources du design suisse avec une approche contemporaine. Minimalisme assumé et lisibilité optimale.


=== Display Créatives ===
=== Display Créatives ===
'''Polices :''' Clash Display, Cabinet Grotesk, Surt
'''Polices :''' Clash Display, Cabinet Grotesk, Surt


Polices de titre expressives pour marquer les esprits. Géométrie assumée et personnalité forte pour les brands audacieuses. Les display fonts offrent maximum d'impact visuel.
Polices de titre expressives pour marquer les esprits. Géométrie assumée et personnalité forte pour les brands audacieuses.
 
=== Nouveaux Serif ===
'''Polices :''' Tiempos, Lyon Text, GT Sectra
 
Renaissance des serif avec une approche moderne. Excellent pour l'éditorial premium et les expériences de lecture immersives.
 
{{Info|'''Focus : Typographies Inclusives'''
 
Attention croissante sur l'accessibilité et la dyslexia-friendly design. Polices comme '''Atkinson Hyperlegible''' ou '''OpenDyslexic''' gagnent en popularité pour créer des expériences plus inclusives.}}
 
== Le Cas Comic Sans : Analyse Professionnelle ==
{{Main|Comic Sans}}
 
=== L'Histoire ===
Créée en 1994 par Vincent Connare pour Microsoft, Comic Sans était destinée à imiter l'écriture des bulles de bandes dessinées. Elle devait humaniser l'interface de Microsoft Bob, un logiciel destiné aux enfants.
 
=== Usage Approprié ===
* Communications informelles
* Contenu pour enfants
* Notes personnelles
* Contexte humoristique assumé
* Accessibilité (certains dyslexiques la trouvent plus lisible)
 
=== Le Problème ===
'''Usage inapproprié :'''
* Documents professionnels
* Présentations d'entreprise
* Sites web corporate
* Mémoires et thèses
* Signalétique officielle


=== Analyse ===
<div style="background: #eff6ff; border: 1px solid #bfdbfe; border-left: 5px solid #3b82f6; padding: 15px; margin: 15px 0; border-radius: 5px;">
Comic Sans est devenue le symbole du mauvais goût typographique car elle est '''surutilisée dans des contextes inappropriés'''. Son caractère enfantin et décontracté jure avec le sérieux attendu dans certaines situations.
'''Focus : Typographies Inclusives'''


{{Quote|"Ce n'est pas Comic Sans qui pose problème, c'est son usage dans le mauvais contexte"|Vincent Connare|créateur de Comic Sans}}
Attention croissante sur l'accessibilité et la dyslexia-friendly design. Polices comme '''Atkinson Hyperlegible''' ou '''OpenDyslexic''' gagnent en popularité pour créer des expériences plus inclusives.
</div>


=== Verdict Professionnel ===
<div style="background: #eff6ff; border: 1px solid #bfdbfe; border-left: 5px solid #3b82f6; padding: 15px; margin: 15px 0; border-radius: 5px;">
{{Info|Comic Sans n'est ni bonne ni mauvaise en soi. Comme tout outil, elle a sa place quand elle est utilisée à bon escient. Le problème n'est pas la police, mais son usage inadéquat qui a créé sa réputation sulfureuse.}}
'''Conseil d'expert :''' Associez toujours une police expressive (titre) avec une police neutre (texte). Par exemple : Garamond (titre) + Inter (corps) ou Bodoni (titre) + Georgia (corps). Cette combinaison crée une hiérarchie claire tout en préservant la lisibilité.
 
</div>
== Guide de Sélection Professionnelle ==
 
=== Recommandations par Contexte ===
 
==== Contenu éditorial long ====
'''Recommandation :''' [[#Humanes|Humanes]] ou [[#Garaldes|Garaldes]]
 
Excellente lisibilité pour les textes longs, confort de lecture optimal, empattements qui guident l'œil.
 
==== Interfaces numériques ====
'''Recommandation :''' [[#Linéales|Linéales]]
 
Clarté maximale sur écran, neutralité, adaptabilité, lisibilité sur tous supports numériques.
 
==== Titres impactants ====
'''Recommandation :''' [[#Mécanes|Mécanes]] ou [[#Didones|Didones]]
 
Impact visuel maximum, personnalité marquée, parfait pour capter l'attention et affirmer un message.
 
==== Touche personnelle ====
'''Recommandation :''' [[#Scriptes|Scriptes]]
 
Humanité et proximité, dimension artisanale, créativité, parfait pour personnaliser la communication.
 
==== Contextes solennels ====
'''Recommandation :''' [[#Incises|Incises]]
 
Permanence et noblesse, gravité institutionnelle, évoque tradition et monumentalité.
 
==== Publications prestigieuses ====
'''Recommandation :''' [[#Garaldes|Garaldes]]
 
Excellence éditoriale, sophistication culturelle, tradition du livre français et du luxe.
 
=== Conseil d'Expert ===
{{Tip|'''Règle des contrastes :''' Associez toujours une police expressive (titre) avec une police neutre (texte). Par exemple : Garamond (titre) + Inter (corps) ou Bodoni (titre) + Georgia (corps). Cette combinaison crée une hiérarchie claire tout en préservant la lisibilité.}}


== Voir aussi ==
== Voir aussi ==
* [[Typographie]]
* [[Design graphique]]
* [[Design graphique]]
* [[Mise en page]]
* [[Mise en page]]
* [[Lisibilité]]
* [[Communication visuelle]]
* [[Histoire de la typographie]]
* [[Polices de caractères]]
 
== Références ==
* Association Typographique Internationale (ATypI)
* Classification Maximilien Vox
* Guides professionnels de typographie
* Études sur la lisibilité et l'ergonomie typographique
 
== Liens externes ==
* [https://atypi.org/ Association Typographique Internationale]
* [https://fonts.google.com Google Fonts]
* [https://adobe.com/fonts Adobe Fonts]


[[Catégorie:Design]]
[[Catégorie:Typographie]]
[[Catégorie:Typographie]]
[[Catégorie:Design graphique]]
[[Catégorie:Communication]]
[[Catégorie:Communication visuelle]]
[[Catégorie:Guide professionnel]]

Version du 31 août 2025 à 13:32

Guide des Familles Typographiques

Le Guide des Familles Typographiques est un guide professionnel pour comprendre et choisir les bonnes polices selon le contexte.

Introduction

La typographie est l'art d'organiser les caractères pour rendre le langage visible. Chaque famille de polices possède sa personnalité, ses connotations et ses domaines d'application privilégiés.

Note importante : Ce guide présente les principales classifications typographiques selon la nomenclature Maximilien Vox, adoptée par l'Association Typographique Internationale (ATypI). Elle reste la référence pour les professionnels de la typographie.

Les Empattements : Clé de Classification

Les empattements (ou sérifs) sont les petites extensions qui terminent les traits des lettres. Ils constituent le critère principal de classification typographique.

Avec empattements (Serif)

  • Petites extensions qui terminent les traits des lettres
  • Guident l'œil dans la lecture
  • Créent des lignes visuelles horizontales
  • Exemples : Times New Roman, Garamond, Georgia

Sans empattements (Sans-serif)

  • Lettres aux traits nets sans prolongements
  • Apparence épurée et moderne
  • Excellente lisibilité sur écran
  • Exemples : Arial, Helvetica, Inter

Physiologie de la lecture

  • Avec empattements : Les sérifs aident l'œil humain à passer d'une lettre à l'autre et le cerveau interprète le mot très rapidement.
  • Sans empattements : Les caractères "bâtons" peuvent être assimilés à des murs, l'œil s'arrête sur chaque lettre, fatiguant sur les textes longs.

Classification des Familles

Famille Caractéristiques Connotation Exemples Usage
Humanes Sérifs épais, faible contraste, inspirées manuscrits Renaissance Tradition, sérieux, érudition Centaur, Jenson, Adobe Jenson Livres d'art, éditions classiques
Garaldes Sérifs fins, contraste modéré, élégantes Raffinement, prestige, culture Garamond, Bembo, Palatino Beaux livres, logos culturels
Réales Sérifs droits, contraste marqué, rationalisation Modernité classique, sérieux Times New Roman, Baskerville, Georgia Presse, édition, documents officiels
Didones Contraste extrême, sérifs horizontaux très fins Luxe, sophistication, élégance froide Didot, Bodoni, Walbaum Mode, magazines, affiches prestige
Mécanes Sérifs massifs, peu de contraste, robustes Solidité, puissance, industrie Rockwell, Clarendon, Courier Affiches, signalétique, branding rétro
Linéales Sans sérif, dessin simple et géométrique Modernité, neutralité, efficacité Helvetica, Arial, Futura, Univers Identité visuelle, web, UI/UX
Incises Inspirées de la gravure lapidaire, empattements courts Autorité, monumentalité, institution Optima, Albertus, Trajan Logos universitaires, affiches cinéma
Scriptes Écriture cursive, fluide et liée Élégance, créativité, proximité Brush Script, Zapfino, Snell Roundhand Invitations, packaging, logos créatifs
Manuaires Imite l'écriture manuelle non cursive Convivialité, naturel, authenticité Comic Sans, Chalkboard, Mistral Communication informelle, scolaire
Fractures Style gothique médiéval, anguleux Tradition, autorité, rétro Textura, Old English, Fraktur Journaux (NYT), brasseries, marques rétro

Règles Professionnelles

Règle d'or : Maximum 3 polices par projet

  • 1 police = minimalisme
  • 2 polices = optimal (titre + corps de texte)
  • 3 polices = maximum absolu
  • Plus de 3 = chaos visuel garanti !

Lisibilité

  • Maximum 65-75 caractères par ligne
  • Interlignage de 1.4 à 1.6 fois la taille de police
  • Préférer les serif pour l'imprimé - les empattements guident naturellement l'œil
  • Sans-serif pour l'écran - évite la fatigue visuelle sur supports numériques
  • Éviter les polices décoratives pour plus de 2 lignes

Hiérarchie

  • H1 : 32-48px (2-3x le corps de texte)
  • H2 : 24-32px (1.5-2x le corps de texte)
  • H3 : 20-24px (1.25-1.5x le corps de texte)
  • Corps : 16-18px (taille de base)
  • Légendes : 12-14px

Impact Visuel des Styles

Style Impact psychologique Usage recommandé
MOT EN CAPITAL Impression de parler fort Titres courts, appels à l'action, urgence
Mot en minuscule Impression de parler normalement Corps de texte, communication standard
Mot en italique Impression de parler tout bas Emphasis subtile, citations, notes

Le Cas Comic Sans

Analyse professionnelle : Comic Sans est devenue le symbole du mauvais goût typographique car elle est surutilisée dans des contextes inappropriés. Son caractère enfantin et décontracté jure avec le sérieux attendu dans certaines situations.

Usage Approprié

  • Communications informelles
  • Contenu pour enfants
  • Notes personnelles
  • Contexte humoristique assumé
  • Accessibilité (certains dyslexiques la trouvent plus lisible)

Usage Inapproprié

  • Documents professionnels
  • Présentations d'entreprise
  • Sites web corporate
  • Mémoires et thèses
  • Signalétique officielle

"Ce n'est pas Comic Sans qui pose problème, c'est son usage dans le mauvais contexte"
— Vincent Connare, créateur de Comic Sans

Guide de Sélection par Contexte

Contenu éditorial long

Recommandation : Humanes ou Garaldes

Excellente lisibilité pour les textes longs, confort de lecture optimal, empattements qui guident l'œil.

Interfaces numériques

Recommandation : Linéales

Clarté maximale sur écran, neutralité, adaptabilité, lisibilité sur tous supports numériques.

Titres impactants

Recommandation : Mécanes ou Didones

Impact visuel maximum, personnalité marquée, parfait pour capter l'attention et affirmer un message.

Touche personnelle

Recommandation : Scriptes

Humanité et proximité, dimension artisanale, créativité, parfait pour personnaliser la communication.

Conseils par Support

Web & Mobile

  • Privilégier les sans-serif
  • Taille minimum : 16px
  • Contraste minimum : 4.5:1
  • Polices web-safe ou web fonts
  • Tester sur différents écrans

Documents Imprimés

  • Serif pour le corps de texte
  • Taille minimum : 10pt
  • Attention aux polices trop fines
  • Prévoir l'échelle d'impression
  • Tester en noir et blanc

Supports Marketing

  • 1 police de titre expressive
  • 1 police de texte lisible
  • Cohérence avec l'identité de marque
  • Impact visuel prioritaire

Présentations

  • Sans-serif pour la lisibilité
  • Taille minimum : 24pt
  • Maximum 6 lignes par slide
  • Contraste élevé
  • Éviter les polices décoratives

Tendances 2024-2025

Variables & Adaptatives

Polices : Inter, Roboto Flex, Source Sans Variable

Polices qui s'adaptent automatiquement selon le contexte (taille d'écran, densité). Parfaites pour le responsive design et les interfaces modernes.

Neo-Grotesques

Polices : Sohne, Suisse, Grotesk

Retour aux sources du design suisse avec une approche contemporaine. Minimalisme assumé et lisibilité optimale.

Display Créatives

Polices : Clash Display, Cabinet Grotesk, Surt

Polices de titre expressives pour marquer les esprits. Géométrie assumée et personnalité forte pour les brands audacieuses.

Focus : Typographies Inclusives

Attention croissante sur l'accessibilité et la dyslexia-friendly design. Polices comme Atkinson Hyperlegible ou OpenDyslexic gagnent en popularité pour créer des expériences plus inclusives.

Conseil d'expert : Associez toujours une police expressive (titre) avec une police neutre (texte). Par exemple : Garamond (titre) + Inter (corps) ou Bodoni (titre) + Georgia (corps). Cette combinaison crée une hiérarchie claire tout en préservant la lisibilité.

Voir aussi

Récupérée de « https://appli.cerpeg.fr/index.php?title=Typographie&oldid=2833 »