Skip to content

Latest commit

 

History

History
 
 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Typography Scheme

The Material Design typography system can be used to create a type hierarchy that reflects your brand or style. A typography scheme represents your theme's specific fonts, such as its body font or button font.

Design & API documentation

Related documentation

Table of contents


Overview

An implementation of the Material Design typography scheme is provided in the MDCTypographyScheme class. By default, an instance of this class is configured with the Material defaults. While it is possible to use these defaults out of the box, you are encouraged to customize these fonts to better represent your branch.

Most components with text elements support being themed with a typography scheme using a typography themer extension. You can learn more about which extensions are available for a given component by reading the component documentation.

Semantic typography values

A typography scheme includes the following semantic font style values, some of which have multiple numbered variants. The fonts are sized in decreasing size. headline1 is larger than headline2 which is larger than headline3 and so on.

Color name Use
headline The largest text on the screen, reserved for short, important text or numerals.
subtitle Smaller than headline, typically reserved for medium-emphasis text that is shorter in length.
body Typically used for long-form writing.
caption One of the smallest font sizes, may be used sparingly to annotate other visual elements.
button Used in calls to action, such as buttons or tabs.
overline One of the smallest font sizes, might be used to introduce a headline.

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/schemes/Typography'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialTypographyScheme

Objective-C

#import "MaterialTypographyScheme.h"

Usage

Dynamic Type

Overview

Users configure text styles on fonts, such as caption and overline, included in a typography scheme. Then, these scalable fonts can be used for Dynamic Type for components. Some default versions of MDCTypographyScheme include scalable fonts. The inline documentation indicates whether a default version of MDCTypographyScheme consists of scalable fonts or not.

useCurrentContentSizeCategoryWhenApplied

useCurrentContentSizeCategoryWhenApplied is a property on MDCTypographyScheme. This property only has an effect if the fonts stored on the typography scheme are scalable. It indicates whether the scalable font on the scheme should be adjusted with respect to the current content size category when it is applied on a component.