Typography or Type scale generator - Android Material UI/UX

Use typography to make writing legible and beautiful. Material's default type scale includes contrasting and flexible styles to support a wide range of use cases.

The type system 

Use typography to present your design and content as clearly and efficiently as possible.

Typography or Type scale generator - Android Material UI/UX

  • Variable fonts are a new technology offering more typographic control
  • There are five key type styles: Display, headline, title, body, and label
  • Design tokens help scale typography decisions across devices, including font, line height, size, tracking, and weight


In the layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.core.widget.NestedScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="6dp"
            android:clipToPadding="false">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Headline1"
                android:text="Head 1"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>


            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Headline2"
                android:text="Headline 2"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Headline3"
                android:text="Headline 3"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Headline4"
                android:text="Headline 4"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Headline5"
                android:text="Headline 5"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Headline6"
                android:text="Headline 6"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>


            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Subtitle1"
                android:text="Subtitle 1"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Subtitle2"
                android:text="Subtitle 2"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>



            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Body1"
                android:text="Body 1"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Body2"
                android:text="Body 2"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>


            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Button"
                android:text="BUTTON"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Caption"
                android:text="Caption"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                style="@style/TextAppearance.MdcTypographyStyles.Overline"
                android:text="OVERLINE"/>
            <com.google.android.material.divider.MaterialDivider
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dividerColor="@color/md_theme_light_surfaceVariant"
                app:dividerThickness="3dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                app:dividerInsetStart="6dp"
                app:dividerInsetEnd="6dp"/>




        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

..

In the theme.xml

  <!--Type scale generator : https://material.io/design/typography/the-type-system.html#type-scale-->
    <style name="TextAppearance.MdcTypographyStyles.Headline1" parent="TextAppearance.MaterialComponents.Headline1">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">96sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Headline2" parent="TextAppearance.MaterialComponents.Headline2">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">60sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Headline3" parent="TextAppearance.MaterialComponents.Headline3">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">48sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Headline4" parent="TextAppearance.MaterialComponents.Headline4">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">34sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Headline5" parent="TextAppearance.MaterialComponents.Headline5">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">24sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Headline6" parent="TextAppearance.MaterialComponents.Headline6">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">20sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">16sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Subtitle2" parent="TextAppearance.MaterialComponents.Subtitle2">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">14sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Body1" parent="TextAppearance.MaterialComponents.Body1">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">16sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Body2" parent="TextAppearance.MaterialComponents.Body2">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">14sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Button" parent="TextAppearance.MaterialComponents.Button">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">14sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Caption" parent="TextAppearance.MaterialComponents.Caption">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">12sp</item>
    </style>
    <style name="TextAppearance.MdcTypographyStyles.Overline" parent="TextAppearance.MaterialComponents.Overline">
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
        <item name="android:textSize">10sp</item>
    </style>

..

This tool is for creating type scales and corresponding code. Any font you choose is automatically resized and optimized based on Material typography guidance for readability.


Online Google Tool for typo scale generator:

 https://material.io/inline-tools/typography/

Comments

Post a Comment