Tipografia e token delle forme
Centralizzi i font e gli stili degli angoli.
Tipografia e token delle forme è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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. 🎉
Domande Frequenti
La lezione «Tipografia e token delle forme» è gratuita?
Sì — il testo completo di «Tipografia e token delle forme» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Tipografia e token delle forme»?
Centralizzi i font e gli stili degli angoli. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Tipografia e token delle forme»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- MaterialTheme e schemi di colori
- Tipografia e token delle forme
- Modalità scura e colore dinamico
- Creare un design system personalizzato