Typographie et jetons de forme
Centralisez les polices et les styles d’angles.
Typographie et jetons de forme est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Fonts Get a Theme Too
Just like colors, your text styles live in the theme. The typography slot of MaterialTheme defines every font size, weight, and spacing in one place. 🔤
A Type Scale
Material gives you a ready-made type scale: named roles like headline, title, body, and label that keep your text consistent across screens.
Named Text Styles
You reach a style by name, so a headlineLarge looks the same everywhere and updates app-wide when you tweak the theme once.
Text(
"Welcome",
style = MaterialTheme.typography.headlineLarge
)Body vs Title
Use bodyMedium for paragraphs and titleLarge for headers; picking the right role gives clear hierarchy without hand-tuning every size.
Customize a Style
You override a role with a copy, changing only what you need; here titleLarge keeps its size but gets a bolder weight.
val type = Typography(
titleLarge = TextStyle(fontWeight = FontWeight.Bold)
)Plug In a Font Family
Swap the default font by setting a fontFamily on your styles, so your brand typeface flows through every Text in the app.
TextStyle(fontFamily = brandFont)Shapes Are Tokens Too
Corners are themeable as well. The shapes slot defines how rounded your cards, buttons, and sheets look across the app.
Small, Medium, Large
Material 3 groups shapes into small, medium, and large tokens, and components automatically pick the size that fits them.
Define Your Corners
You set corner radii once in a Shapes object, and every component that uses that token instantly adopts the new roundness.
val shapes = Shapes(
medium = RoundedCornerShape(12.dp)
)Read a Shape Token
Apply a token directly to a Composable so it matches the theme; here a Surface clips itself with MaterialTheme.shapes.medium.
Surface(shape = MaterialTheme.shapes.medium) { /* card */ }Consistency by Default
Centralizing type and shape tokens means new screens look on-brand automatically, and a single edit restyles them all. ✨
Quick Check
You want every card to share the same corner radius app-wide. Where do you set it?
Recap: Type & Shape, Centralized
You styled text through the typography scale and rounded corners through shape tokens, so one theme keeps fonts and shapes consistent. 🎉
Questions Fréquemment Posées
La leçon « Typographie et jetons de forme » est-elle gratuite ?
Oui — le texte complet de « Typographie et jetons de forme » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Typographie et jetons de forme » ?
Centralisez les polices et les styles d’angles. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Typographie et jetons de forme » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- MaterialTheme et schémas de couleurs
- Typographie et jetons de forme
- Mode sombre et couleurs dynamiques
- Créer un système de design personnalisé