1 · Palette

Charte graphique · Couleurs

Les couleurs de Saint-Michel-en-Grève

Neuf teintes pour trois rôles : structurer, faire lire, mettre en lumière. Les valeurs sont en RVB.

Principales

Bleu Trégor

#155E75 · RVB 21 94 117

Le logo, les titres, les boutons et les bandeaux.

Sable de la baie

#F7F1E6 · RVB 247 241 230

Le fond par défaut : courrier, affiches, site, bulletin.

Noir encre

#1D1D1B · RVB 29 29 27

Le texte courant, sur fond clair.

Blanc

#FFFFFF · RVB 255 255 255

Le texte sur bleu, les formulaires et les tableaux.

Secondaires

Grand Large

#0C3A4A · RVB 12 58 74

Les fonds sombres, les pieds de page, les titres sur Brume.

Brume de baie

#DCE9ED · RVB 220 233 237

Les encarts d’information, les bandeaux, les lignes alternées.

Galet

#C9B89A · RVB 201 184 154

Les filets, les bordures, les séparateurs. Jamais du texte.

Ces trois teintes dérivent du bleu et du sable. Elles nuancent la palette sans l’alourdir et servent surtout de fonds et de séparations.

Accents

Ajonc

#E8A820 · RVB 232 168 32

Un seul point d’attention par page : bouton, date, pastille. Jamais en texte sur fond clair.

Granit rose

#D98C7A · RVB 217 140 122

Culture, jeunesse, événements. En aplat, avec du texte noir.

Choix volontaire : pas de vert. Le jaune de l’ajonc et le rose du granit, deux teintes du paysage breton, réchauffent le bleu sans se confondre avec lui. Bleu et jaune se distinguent aussi par leur luminosité, ce qui aide les personnes qui voient mal les couleurs.

2 · Proportions et contrastes

Charte graphique · Couleurs

Proportions et contrastes

Un support type est surtout sable et bleu. Les accents restent rares pour garder leur effet.

Répartition sur un support

Fonds clairs · 55 %
Sable, blanc, brume

Structure · 30 %
Bleu Trégor, Grand Large

Texte · 10 %
Noir encre

5 %
Accents

Associations validées

Seuil de lecture : 4,5 : 1 (AA). Seuil confortable : 7 : 1 (AAA). Pour les petits textes d’un public âgé, visez les associations AAA.

Mairie de Saint-Michel-en-Grève

Noir encre sur Sable15,0 : 1 · AAA

Mairie de Saint-Michel-en-Grève

Bleu Trégor sur Sable6,5 : 1 · AA

Mairie de Saint-Michel-en-Grève

Blanc sur Bleu Trégor7,3 : 1 · AAA

Mairie de Saint-Michel-en-Grève

Sable sur Bleu Trégor6,5 : 1 · AA

Mairie de Saint-Michel-en-Grève

Blanc sur Grand Large12,2 : 1 · AAA

Mairie de Saint-Michel-en-Grève

Sable sur Grand Large10,9 : 1 · AAA

Mairie de Saint-Michel-en-Grève

Ajonc sur Grand Large5,9 : 1 · AA

Mairie de Saint-Michel-en-Grève

Noir encre sur Brume13,6 : 1 · AAA

Mairie de Saint-Michel-en-Grève

Bleu Trégor sur Brume5,9 : 1 · AA

Mairie de Saint-Michel-en-Grève

Noir encre sur Ajonc8,1 : 1 · AAA

Mairie de Saint-Michel-en-Grève

Grand Large sur Ajonc5,9 : 1 · AA

Mairie de Saint-Michel-en-Grève

Noir encre sur Granit rose6,4 : 1 · AA

À éviter

Saint-Michel-en-Grève

Ajonc sur Sable
1,9 : 1

Saint-Michel-en-Grève

Blanc sur Ajonc
2,1 : 1

Saint-Michel-en-Grève

Granit rose sur Blanc
2,6 : 1

Saint-Michel-en-Grève

Bleu Trégor sur Grand Large
1,7 : 1

Saint-Michel-en-Grève

Galet sur Sable
1,7 : 1

Saint-Michel-en-Grève

Ajonc sur Bleu Trégor
3,5 : 1 · titres de 24 px et plus seulement

3 · Le logo sur les fonds

Charte graphique · Couleurs

Le logo sur les fonds

Logo bleu sur les fonds clairs, blanc sur le bleu et le Grand Large, noir sur l’ajonc et le granit rose. Le logo bleu ne se pose jamais sur le Grand Large.

Le logo

Sable · logo bleu Usage par défaut

Bleu Trégor · logo blanc Bandeaux, couvertures

Grand Large · logo blanc Pieds de page, signalétique

Brume · logo bleu Encarts, documents

Blanc · logo bleu Formulaires, courriers

Ajonc · logo noir Événements, affiches

4 · Les polices

Charte graphique · Typographie

Les polices de Saint-Michel-en-Grève

Deux familles pour deux rôles : poser le ton, faire lire. Toutes deux sont libres de droits et gratuites.

Titres

Newsreader

Titres et intertitres

Mairie de Saint-Michel-en-Grève

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
àâçéèêëîïôùûü œ 0123456789 & « » ? !

RôleTitres de page, de section, intertitres, grands chiffres.

GraissesNormal 400 pour les titres · Medium 500 pour les intertitres.

PourquoiUne serif de lecture, chaleureuse et posée. Elle donne un air de journal local et de mairie sérieuse, sans raideur.

Auteur · licenceProduction Type · SIL Open Font License

Texte

Atkinson Hyperlegible Next

Texte courant, interface, signalétique

Le conseil municipal se réunit le premier jeudi du mois.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
àâçéèêëîïôùûü œ 0123456789 & « » ? !

RôleParagraphes, listes, tableaux, formulaires, boutons, légendes, menus.

GraissesNormal 400 pour le texte · Semi-bold 600 pour insister et pour les étiquettes.

PourquoiDessinée pour les personnes malvoyantes : chaque lettre se distingue des autres (I, l, 1, O, 0). Le zéro barré est voulu.

Auteur · licenceBraille Institute · SIL Open Font License

Une seule paire, jamais de troisième police. La serif pour ce qui se regarde (titres), la sans-serif pour ce qui se lit (tout le reste). Les deux ont une version complète des accents du français.

5 · Hiérarchie et tailles

Charte graphique · Typographie

Hiérarchie et tailles

Sept niveaux suffisent. Les tailles papier valent pour le bulletin, le courrier et les affiches A4 ; elles sont plus généreuses pour un public âgé.

Les niveaux

Titre de page

Titre de pageNewsreader 400 · Grand Large

Écran60 px · mobile 34 pxPapier32 pt · interligne 1,05

Titre de section

Titre de sectionNewsreader 400 · Grand Large

Écran36 px · mobile 26 pxPapier20 pt · interligne 1,15

Horaires d’ouverture

IntertitreNewsreader 500 · Noir encre

Écran26 px · mobile 22 pxPapier14 pt · interligne 1,2

Le secrétariat vous accueille du lundi au vendredi, de 9 h à 12 h.

Texte courantAtkinson 400 · Noir encre

Écran18 px · mobile 17 pxPapier12 pt · interligne 1,5

Dernière mise à jour le 20 octobre 2026.

Texte secondaireAtkinson 400 · Noir encre

Écran15 px (minimum 15 px)Papier11 pt (minimum) · interligne 1,55

Agenda · Culture

ÉtiquetteAtkinson 600 · Bleu Trégor

Écran13 px · capitales, espacement 0,14 emPapier10 pt · interligne 1,2

Mardi 3 novembre · 18 h 30

Chiffres, datesAtkinson 600 · Noir encre

Écrancomme le texte · chiffres tabulairesPapiercomme le texte · interligne 1,4

Taille minimale : 11 pt sur papier et 15 px à l’écran, y compris pour les mentions légales. Le texte courant ne descend jamais sous 12 pt dans les documents destinés au public.

6 · Règles d’usage

Charte graphique · Typographie

Règles d’usage

Mettre en page avec ces polices : ce qui garde le texte lisible pour tout le monde, et ce qu’il faut éviter.

À faire

Aligner à gaucheTexte aligné à gauche, jamais justifié : les espaces restent réguliers et la lecture est plus facile.

Lignes de 60 à 75 signesAu-delà, l’œil perd sa ligne. Sur le site, limiter la largeur des paragraphes à environ 34 em.

Interligne généreux1,5 pour le texte courant, 1,05 à 1,2 pour les titres. Un espace entre paragraphes plutôt qu’un retrait.

Capitales avec parcimonieRéservées aux étiquettes de quelques mots, avec un espacement élargi. Jamais pour une phrase entière.

Graisses limitées400 et 600 pour Atkinson, 400 et 500 pour Newsreader. Pas de graisse fine (moins de 400) : elle se lit mal en petit.

Couleurs validéesTexte courant en noir encre. Titres en Grand Large ou Bleu Trégor. Voir les associations de la planche 2.

À éviter

Titre en Atkinson

Titre en sans-serifLes rôles sont inversés.

Le conseil municipal se réunit le premier jeudi du mois.

Texte courant en NewsreaderTrop fin et trop ornementé en petit.

Le conseil municipal se réunit le premier jeudi du mois.

Graisse fineIllisible en petit, surtout sur fond coloré.

Le conseil municipal se réunit le premier jeudi

Phrase en capitalesLa forme des mots disparaît.

Le conseil municipal se réunit le premier jeudi du mois à dix-huit heures trente.

Justifié, interligne serréTrous et lignes collées.

Mentions légales et crédits

Petit et clairGalet sur Sable : 1,7 : 1.

Dans un site ou un document

Les deux polices sont téléchargeables gratuitement sur Google Fonts pour les installer sur les ordinateurs de la mairie (Word, Publisher, Canva). Pour le site, voici la mise en place.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;600&family=Newsreader:opsz,wght@6..72,400;500&display=swap" rel="stylesheet">

:root {
  --police-titre: "Newsreader", serif;
  --police-texte: "Atkinson Hyperlegible Next", sans-serif;
}
body { font-family: var(--police-texte); font-size: 18px; line-height: 1.5; color: #1D1D1B; background: #F7F1E6; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; line-height: 1.1; color: #0C3A4A; }
h3 { font-weight: 500; }
strong, .etiquette { font-weight: 600; }
p { max-width: 34em; }