0Pricing
Jetpack Compose Academy · Урок

Типографика и токены форм

Централизуйте шрифты и стили углов.

«Типографика и токены форм» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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

Часто задаваемые вопросы

Урок «Типографика и токены форм» бесплатный?

Да — полный текст урока «Типографика и токены форм» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Типографика и токены форм»?

Централизуйте шрифты и стили углов. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Типографика и токены форм»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. MaterialTheme и цветовые схемы
  2. Типографика и токены форм
  3. Тёмная тема и динамический цвет
  4. Создание собственной дизайн-системы
← Назад к Jetpack Compose Academy