0Pricing
Jetpack Compose Academy · Lektion

Typografie- und Form-Tokens

Bündeln Sie Schriftarten und Eckstile zentral.

Typografie- und Form-Tokens ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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. 🎉

Häufig gestellte Fragen

Ist die Lektion „Typografie- und Form-Tokens“ kostenlos?

Ja — der vollständige Text von „Typografie- und Form-Tokens“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Typografie- und Form-Tokens“?

Bündeln Sie Schriftarten und Eckstile zentral. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Typografie- und Form-Tokens“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. MaterialTheme und Farbschemata
  2. Typografie- und Form-Tokens
  3. Dark Mode und dynamische Farben
  4. Ein benutzerdefiniertes Designsystem erstellen
← Zurück zu Jetpack Compose Academy