0Pricing
Jetpack Compose Academy · Lesson

Typography & Shape Tokens

Centralize fonts and corner styles.

Typography & Shape Tokens is a free Jetpack Compose Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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

Frequently asked questions

Is the “Typography & Shape Tokens” lesson free?

Yes — the full text of “Typography & Shape Tokens” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.

What will I learn in “Typography & Shape Tokens”?

Centralize fonts and corner styles. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Jetpack Compose Academy?

No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Typography & Shape Tokens” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Jetpack Compose Academy lesson?

Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. MaterialTheme & Color Schemes
  2. Typography & Shape Tokens
  3. Dark Mode & Dynamic Color
  4. Building a Custom Design System
← Back to Jetpack Compose Academy