Accueil › Fondations › Typographie

Typographie

Système typographique de Swellr : quatre familles de polices, échelle de taille, poids et règles d'usage.

1

Les familles typographiques

Swellr utilise quatre polices complémentaires, chacune assignée à un rôle précis dans l'interface.

Manrope Affichage & Titres — Police principale
H1 – H4 Boutons Labels Navigation Google Fonts
Surf smarter,
live better.
Manrope ExtraBold 800 · 48px · line-height 1.2 · letter-spacing -0.8px
Alphabet complet
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Chiffres
0  1  2  3  4  5  6  7  8  9
Caractères spéciaux
!  ?  &  @  #  %  €  ( )  [ ]  — · …
Poids disponibles
300 Light Swellr — Surf smarter, live better.
400 Regular Swellr — Surf smarter, live better.
500 Medium Swellr — Surf smarter, live better.
600 SemiBold Swellr — Surf smarter, live better.
700 Bold Swellr — Surf smarter, live better.
800 ExtraBold Swellr — Surf smarter, live better.
Inter Corps de texte — Police d'interface
Interface Descriptions Métadonnées Google Fonts
Retrouve les meilleurs spots de surf près de chez toi.
Prévisions en temps réel, carte des spots, sessions communautaires.
Inter Regular 400 · 18px · line-height 1.625
Alphabet complet
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Chiffres
0  1  2  3  4  5  6  7  8  9
Caractères spéciaux
!  ?  &  @  #  %  €  ( )  [ ]  — · …
Poids disponibles
300 Light Retrouve les meilleurs spots de surf près de chez toi.
400 Regular Retrouve les meilleurs spots de surf près de chez toi.
500 Medium Retrouve les meilleurs spots de surf près de chez toi.
600 SemiBold Retrouve les meilleurs spots de surf près de chez toi.
700 Bold Retrouve les meilleurs spots de surf près de chez toi.
Inclusive Sans Accessibilité — Haute lisibilité
Accessibilité Formulaires Poids 400 uniquement Google Fonts
♿ Police optimisée pour la lisibilité maximale — WCAG AA compatible
Les lettres de cette police ont été conçues pour être clairement distinctes les unes des autres, réduisant les confusions visuelles fréquentes entre b/d, p/q, n/u ou i/l.
Inclusive Sans Regular 400 · 20px · line-height 1.625
Alphabet — distinguer les formes similaires
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Paires facilement confondables — maintenant distinctes
b d  |  p q  |  i l 1  |  n u  |  0 O
Chiffres
0  1  2  3  4  5  6  7  8  9
Usage recommandé : Sections accessibilité, formulaires complexes, CGU et mentions légales, contenus destinés aux utilisateurs dyslexiques ou malvoyants. Ne pas utiliser comme police principale d'affichage — réservée aux blocs texte à haute lisibilité.
DIN Alternate Bold Données numériques — Dashboard & Météo
Températures Hauteur houle Vitesse vent Scores Poids 700 uniquement
Données surf en temps réel — Hossegor Nord
28° Température eau
1.5m Hauteur houle
35 km/h vent
8s Période houle
87/100 Score surf
Chiffres (usage principal)
0 1 2 3 4 5 6 7 8 9
Unités courantes
°  m  km/h  s  %  /  ·  ft
Alphabet (usage limité)
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Attention : DIN Alternate Bold est une police système (macOS / iOS). Elle n'est pas disponible sur Google Fonts. En production React Native, utiliser le mapping natif fontFamily: 'DINAlternate-Bold' sur iOS et prévoir une police de substitution (Arial Black) sur Android.
2

Échelle typographique

13 niveaux de taille, de 10px à 48px. Chaque taille correspond à un token CSS et un usage précis.

Aperçu Token CSS Rem Px Usage recommandé
Swellr — Surf smarter --text-xs 0.625rem 10px Labels très petits, badges discrets, footnotes
Swellr — Surf smarter --text-sm 0.75rem 12px Captions, métadonnées, horodatages
Swellr — Surf smarter --text-caption 0.8125rem 13px Labels de formulaires, helper text
Swellr — Surf smarter --text-base 0.875rem 14px Corps de texte app, descriptions courtes
Swellr — Surf smarter --text-md 0.9375rem 15px Corps légèrement agrandi, items de liste
Swellr — Surf smarter --text-lg 1rem 16px Corps standard web, boutons principaux
Swellr — Surf smarter --text-xl 1.125rem 18px Sous-titres, body large landing page
Swellr — Surf smarter --text-2xl 1.25rem 20px H4, titre de carte, section header app
Swellr — Surf smarter --text-3xl 1.75rem 28px H3, App Titre (Manrope Bold mobile)
Swellr — Surf smarter --text-4xl 1.875rem 30px H2 mobile, titres section landing
Swellr — Surf smarter --text-5xl 2rem 32px H1 Section (H2 desktop), hero sous-titre
Swellr — Surf smarter --text-6xl 2.5rem 40px H1 mobile, page title charte graphique
Swellr — Surf smarter --text-7xl 3rem 48px H1 Display desktop, hero principal

Interlignage (line-height)

--leading-none 1 Titres très compacts
--leading-tight 1.2 H1 Display, gros titres
--leading-snug 1.3 H2, H3, sous-titres
--leading-normal 1.5 Corps, boutons, labels
--leading-relaxed 1.625 Paragraphes, descriptions

Letter-spacing

--tracking-tighter -0.8px H1 Display
--tracking-tight -0.4px H1 Section
--tracking-normal 0 Corps de texte standard
--tracking-wide 0.6px Caps sections
--tracking-wider 1.2px Nav sub, sidebar
--tracking-widest 2.4px LABEL / TAG
3

Styles prédéfinis

12 combinaisons typographiques prêtes à l'emploi, couvrant tous les cas d'usage de l'interface Swellr.

Surf smarter.
H1 Display
Manrope 48px / 3rem ExtraBold 800 line-height 1.2 tracking -0.8px
Hero principal, titre de landing page, écrans d'onboarding
Nos fonctionnalités
H1 Section
Manrope 32px / 2rem Bold 700 line-height 1.2 tracking -0.4px
Titre de section principale, page header de la charte graphique
Spots recommandés
H2
Manrope 28px / 1.75rem SemiBold 600 line-height 1.3
Titre de section secondaire, landing page features, dashboard
Prévisions du week-end
H3
Manrope 24px / 1.5rem SemiBold 600 line-height 1.3
Titres de cartes, sections de formulaire, groupes de liste
Hossegor Nord — Plage
H4
Manrope 20px / 1.25rem SemiBold 600 line-height 1.3
Nom de spot, titre de carte compacte, items mis en avant
Retrouve les meilleurs spots de surf près de chez toi. Prévisions simplifiées, carte communautaire.
Body Large
Inter 16px / 1rem Regular 400 line-height 1.625
Paragraphes landing page, descriptions de fonctionnalités
Session surf enregistrée le 12 mars à 7h30. Vagues 1.2m, vent offshore 15 km/h, score de session : 78/100.
Body
Inter 14px / 0.875rem Regular 400 line-height 1.5
Corps de texte app, descriptions de spots, feed d'activité
Mis à jour il y a 5 minutes · Source : Surfline Label de formulaire — obligatoire
Caption
Inter 12–13px Regular / Medium line-height 1.5
Métadonnées, horodatages, mentions, labels de champ
Voir les spots En savoir plus
Button
Inter 14–16px SemiBold 600 line-height 1.5
Tous les boutons d'action, CTA, liens d'action importants
SPOTS SESSION ÉCO SHOP
Label / Tag
Inter 11–12px SemiBold 600 tracking 2.4px UPPERCASE
Tags de catégorie, badges de statut, labels sémantiques, nav labels
Mes sessions
App Titre
Manrope 24px / 1.5rem Bold 700 line-height 1.2
Titre principal des écrans de l'app mobile (header nav)
28° Eau
1.5m Houle
Data Display
DIN Alternate 24–48px Bold 700 tracking -1px
Températures, hauteur de houle, vitesse vent, scores, stats dashboard
4

Paires recommandées

Exemples de compositions typographiques titre + corps, appliquées aux contextes réels de Swellr.

Manrope Bold H2 + Inter Regular Body Landing Page

Les meilleures prévisions surf,
directement sur ton téléphone.

Swellr agrège les données de houle, vent et marée de plusieurs sources pour te donner une prévision claire et actionnable. Plus besoin de jongler entre différents sites — tout est dans une seule application pensée pour les surfeurs.

Disponible sur iOS et Android · Gratuit · Sans publicité

Titre : Manrope Bold 700 28px · lh 1.3 · ls -0.4px + Corps : Inter Regular 400 16px · lh 1.625 Contraste AAA ✓
Manrope SemiBold H3 + Inter Regular Caption App Mobile
SPOT PROCHE
Hossegor — La Nord
Vagues creuses 1.2m · Vent offshore · Affluence faible · Mis à jour à 06h30
1.2m hauteur houle
Titre : Manrope SemiBold 600 24px · lh 1.3 + Caption : Inter Regular 400 13px · lh 1.5 fond sombre ✓
DIN Alternate Bold 28px + Inter Regular 14px Écran Météo / Dashboard
Température
28°C
Eau de surface
Houle
1.5m
Période : 8s
Vent
35
km/h · Offshore
Score surf
87
Sur 100 · Excellent
Données : DIN Alternate Bold 700 28px · ls -0.5px + Labels : Inter SemiBold 600 11px · UPPERCASE · ls 2px + Desc : Inter Regular 400 14px · lh 1.5
5

Règles d'usage

Principes fondamentaux pour maintenir la cohérence typographique sur toutes les surfaces Swellr.

✓
Maximum 2 familles typographiques par interface
Sur une même page ou écran, utiliser au maximum Manrope + Inter. DIN Alternate est une exception ponctuelle pour les données numériques, et Inclusive Sans pour les blocs d'accessibilité spécifiques.
✓
Hiérarchie stricte : Manrope pour les titres, Inter pour le texte
Manrope est la voix forte et identitaire de Swellr. Inter assure la lisibilité du contenu long. Cette distinction crée une hiérarchie visuelle claire et cohérente à travers toutes les surfaces.
!
DIN Alternate Bold : réservé aux données numériques uniquement
Ne pas utiliser DIN Alternate pour des titres ou des corps de texte. Son usage est strictement limité aux chiffres de dashboard (températures, scores, mesures de houle, vitesses). Ne jamais l'utiliser sur fond blanc avec texte noir — préférer les fonds foncés.
✓
Inclusive Sans : uniquement pour les sections d'accessibilité
Cette police ne remplace pas Inter pour le corps de texte courant. Elle est dédiée aux contenus légaux, aux formulaires complexes, aux sections ciblant des utilisateurs avec des besoins spécifiques en lisibilité.
✓
Respecter les tokens CSS — ne jamais utiliser de valeurs arbitraires
Toutes les tailles, poids et espacements sont définis dans style.css. Utiliser systématiquement les variables CSS (var(--text-xl)) plutôt que des valeurs hardcodées.
✗
Ne pas mélanger les poids de façon excessive
Dans un même bloc de texte, limiter à 2 niveaux de poids maximum. Éviter de mélanger Light + ExtraBold sans niveau intermédiaire. La progression de poids doit être logique et guidée par la hiérarchie sémantique.
✗
Ne pas utiliser Manrope ExtraBold 800 pour du texte long
Le poids 800 est réservé aux courts titres d'impact (H1 Display, héros). Au-delà de 4-5 mots, préférer Bold 700 ou SemiBold 600 pour maintenir la lisibilité et l'équilibre visuel.

Tableau de référence : élément → règle typographique

Élément UI Police Poids Taille min Taille max Note
H1 Hero / Landing Manrope ExtraBold 800 --text-6xl (40px) --text-7xl (48px) letter-spacing -0.8px
H1 Section / Page Manrope Bold 700 --text-5xl (32px) --text-6xl (40px) letter-spacing -0.4px
H2 Sous-section Manrope SemiBold 600 --text-4xl (30px) --text-5xl (32px) line-height 1.3
H3 Carte / Feature Manrope SemiBold 600 --text-3xl (28px) --text-4xl (30px) line-height 1.3
H4 Item / Spot Manrope SemiBold 600 --text-2xl (20px) --text-3xl (28px) line-height 1.3
App Header titre Manrope Bold 700 --text-3xl (28px) --text-3xl (28px) mobile uniquement
Corps de texte Inter Regular 400 --text-base (14px) --text-lg (16px) line-height 1.5–1.625
Caption / Meta Inter Regular 400 --text-sm (12px) --text-caption (13px) line-height 1.5
Bouton principal Inter SemiBold 600 --text-base (14px) --text-lg (16px) line-height 1.5
Label / Tag Inter SemiBold 600 11px --text-sm (12px) UPPERCASE · ls 2.4px
Nav Bottom App Manrope Bold 700 11px --text-sm (12px) app mobile
Données numériques DIN Alternate Bold 700 --text-3xl (28px) --text-7xl (48px) dashboard / météo
Texte accessibilité Inclusive Sans Regular 400 --text-base (14px) --text-lg (16px) sections A11y
Input / Formulaire Inter Regular 400 --text-base (14px) --text-md (15px) placeholder: 400, valeur: 500
Rappel de cohérence CSS : Toutes les pages de la charte graphique incluent assets/css/style.css qui contient l'ensemble des tokens typographiques. Ne jamais redéfinir les variables CSS dans une page individuelle — utiliser uniquement les classes utilitaires et les variables existantes.
6

Implémentation technique

Polices réellement chargées sur chaque surface — App mobile Expo et Landing page web.

Expo Mobile Polices chargées (FontAssets)

Les polices sont chargées via Font.loadAsync() (expo-font) dans FontService.ts, qui utilise le barrel assets/fonts/index.ts. Seules 4 polices TTF sont chargées — les autres variantes utilisent la police système en fallback.
Nom de famille (fontFamily) Fichier TTF Variante Usage dans l'app
Inter-Medium Inter-Medium.ttf Weight 500 Titres principaux (Typography.title — 48px)
Manrope-Regular Manrope-Regular.ttf Weight 400 Corps de texte mobile (manrope24, manrope15, manrope14, manrope16)
DINAlternate-Bold DINAlternate-Bold.ttf Weight 700 Données numériques : houle, températures, scores (dinBold24, dinBold15)
InclusiveSans-Regular InclusiveSans-Regular.ttf Weight 400 Textes accessibilité (inclusive24, inclusive15)
Note : Manrope-Bold et Inter-SemiBold sont référencés dans Typography.ts (manropeBold15, interSemiBold16) mais leurs fichiers TTF ne sont pas présents dans assets/fonts/. Ces styles tombent sur la police système. La navigation bas (tab bar) utilise Manrope-Bold — prévoir l'ajout de Manrope-Bold.ttf si ce rendu doit être assuré.

Landing Web Polices auto-hébergées (@font-face)

La landing page auto-héberge les polices depuis public/fonts/ via @font-face déclarés dans src/styles/fonts.css. Format WOFF2 uniquement, avec font-display: swap.
Famille Poids chargés Fichiers WOFF2
Inter 400 · 500 · 600 · 700 Inter-Regular.woff2
Inter-Medium.woff2
Inter-SemiBold.woff2
Inter-Bold.woff2
Manrope 400 · 600 · 700 Manrope-Regular.woff2
Manrope-SemiBold.woff2
Manrope-Bold.woff2
Inclusive Sans 400 InclusiveSans-Regular.woff2
DIN Alternate 700 DINAlternate-Bold.woff2
Attention : La landing n'inclut pas Manrope 500 (Medium) ni Manrope 800 (ExtraBold) en auto-hébergé. Les variantes 300 (Light) non plus. Si l'un de ces poids est utilisé dans un composant, le navigateur appliquera la synthèse de graisse — prévoir l'ajout des fichiers WOFF2 correspondants si nécessaire.