Please enable JavaScript.
Coggle requires JavaScript to display documents.
UI Design - Aspects typographiques, Carte réalisée par Stéphane Arrami…
UI Design - Aspects typographiques
Outils de conception
Design graphique initial
Adobe Illustrator
Figma (pour courbes SVG)
Sketch
Outils spécifiques à la typographie
Glyphs App (macOS, payant, ergonomique)
RoboFont (macOS, professionnel)
FontLab (Windows/MacOS, puissant)
DrawBot (automatisation avec Python)
FontForge (libre et open source)
Génération de fichiers
FontTools / fontmake (lignes de commande)
woff2-tools (optimisation des formats web)
Création de typographie de base
Dessin des glyphes principaux
Courbes Bézier
Alignement et symétrie
Nomenclature standardisée
Ajout des axes de variation
Masters (exemples : Regular, Bold, Italic)
Axes personnalisés (ex : Width, Slant)
Création d’une version animable
CSS JS
Animation des caractères
Typographie variable
Concept de typographie variable
Axes multiples
Interpolation dynamique
Exemples pratiques
Export en OpenType Variable Font (.otf, .woff2)
Utilisation de Glyphs App ou RoboFont
Validation avec Google Fonts Developer Tools
Implémentation dans le web
font-face
CSS Custom Properties
JavaScript pour animations
Lettering manuel
Techniques de lettering
Calligraphie
Illustration de lettres
Composition artistique
Outils spécifiques
Procreate (tablette numérique)
Affinity Designer
Photoshop
Applications
Identité visuelle
Logotypes
Infographies
Test et optimisation
Vérification de l’accessibilité
Taille minimale lisible
Contraste couleur
WCAG 2.1 / AA
Optimisation des polices web
Subsetting (réduction du fichier)
Compression WOFF2
Lazy loading
Test cross-browser
Chrome DevTools
BrowserStack
Can I Use
Déploiement et intégration
Hébergement des polices
Google Fonts
Self-hosting
CDN
Intégration dans le design system
Tokens de typographie
Styles globaux
Variations adaptatives
Maintenance
Mise à jour des polices
Correction des bugs
Suivi des performances
Carte réalisée par Stéphane Arrami –
stephane-arrami.com
– Licence CC BY-NC-SA