0Pricing
Jetpack Compose Academy · Leçon

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

  1. MaterialTheme et schémas de couleurs
  2. Typographie et jetons de forme
  3. Mode sombre et couleurs dynamiques
  4. Créer un système de design personnalisé
← Retour à Jetpack Compose Academy