material-components_material-components-ios/components/Typography

Typography

The Typography component provides methods for displaying text using the type sizes and opacities from the Material Design specifications.

Design & API Documentation

• Material Design guidelines: Typography
• API: MDCTypography
• API: MDCTypographyFontLoading

Installation

Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/Typography'

Then, run the following command:

pod install

Usage

Importing

Before using Typography, you'll need to import it:

Swift

import MaterialComponents.MaterialTypography

Objective-C

#import "MaterialTypography.h"

Font

Select a font most appropriate to its usage and set it as your label's font. All fonts are returned from class methods beginning with the font's Material Design type style and ending with 'Font'. Material Typography should be used consistently throughout the entire UI.

Opacity

Each font has a respective opacity (alpha) value returned by class methods beginning with the font's Material Design type style and ending with 'FontOpacity'. These CGFloats should be set on the label's alpha property. If animating alpha, it should be the maximum value reached.

Type Sizes and Opacities

MDCTypography provides a UIFont font and a CGFloat opacity for each of the standard type settings in the Material Design specifications.

Material Design type styles and their respective MDCTypography methods

Material Design Type	MDCTypography Font	MDCTypography Opacity
Display 4	display4Font	display4FontOpacity
Display 3	display3Font	display3FontOpacity
Display 2	display2Font	display2FontOpacity
Display 1	display1Font	display1FontOpacity
Headline	headlineFont	headlineFontOpacity
Subheading	subheadFont	subheadFontOpacity
Body 2	body2Font	body2FontOpacity
Body 1	body1Font	body1FontOpacity
Caption	captionFont	captionFontOpacity
Button	buttonFont	buttonFontOpacity

Font size reference

Font opacity reference

Examples

Create a Title Label

Swift

let label = UILabel()
label.text = "This is a title"
label.font = MDCTypography.titleFont()
label.alpha = MDCTypography.titleFontOpacity()

// If using autolayout, the following line is unnecessary as long
// as all constraints are valid.
label.sizeToFit()
self.view.addSubview(label)

Objective C

UILabel *label = [[UILabel alloc] init];
label.text = @"This is a title";
label.font = [MDCTypography titleFont];
label.alpha = [MDCTypography titleFontOpacity];

// If using autolayout, the following line is unnecessary as long
// as all constraints are valid.
[label sizeToFit];
[self.view addSubview:label];

Create a Display 1 Label

Swift

let label = UILabel()
label.text = "Display 1"
label.font = MDCTypography.display1Font()
label.alpha = MDCTypography.display1FontOpacity()

// If using autolayout, the following line is unnecessary as long
// as all constraints are valid.
label.sizeToFit()
self.view.addSubview(label)

Objective

UILabel *label = [[UILabel alloc] init];
label.text = @"Display 1";
label.font = [MDCTypography display1Font];
label.alpha = [MDCTypography display1FontOpacity];

// If using autolayout, the following line is unnecessary as long
// as all constraints are valid.
[label sizeToFit];
[self.view addSubview:label];

Set an Existing Label as a Caption Label

Swift

label.font = MDCTypography.captionFont()
label.alpha = MDCTypography.captionFontOpacity()

// If using autolayout, the following line is unnecessary as long
// as all constraints are valid.
label.sizeToFit()

Objective C

self.label.font = [MDCTypography captionFont];
self.label.alpha = [MDCTypography captionFontOpacity];

// If using autolayout, the following line is unnecessary as long
// as all constraints are valid.
[self.label sizeToFit];

Advanced Usage

Custom Fonts

Material Components for iOS allows you to set your own font for all of the components. Use the class method setFontLoader: on MDCTypography to specify a loader that conforms to the MDCTypographyFontLoading protocol.

If you want to use the system font use MDCSystemFontLoader which already conforms to the MDCTypographyFontLoading protocol. It is used if no font loader is set.

Swift

class CustomFontLoader: NSObject, MDCTypographyFontLoading {
  func regularFont(ofSize fontSize: CGFloat) -> UIFont {
    // Consider using MDFFontDiskLoader to register your font.
    return UIFont.init(name: "yourCustomRegularFont", size: fontSize)!
  }
  func mediumFont(ofSize fontSize: CGFloat) -> UIFont {
    // Consider using MDFFontDiskLoader to register your font.
    return UIFont.init(name: "yourCustomMediumFont", size: fontSize)!
  }
  func lightFont(ofSize fontSize: CGFloat) -> UIFont {
    // Consider using MDFFontDiskLoader to register your font.
    return UIFont.init(name: "yourCustomLightFont", size: fontSize)!
  }
}

...

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

  // Before any UI is called
  MDCTypography.setFontLoader(CustomFontLoader())

}

Objective-C

@interface CustomFontLoader : NSObject <MDCTypographyFontLoading>
@end

@implementation CustomFontLoader

- (UIFont *)regularFontOfSize:(CGFloat)fontSize {
  // Consider using MDFFontDiskLoader to register your font.
  return [UIFont fontWithName:@"yourCustomRegularFont" size:fontSize];
}

- (UIFont *)mediumFontOfSize:(CGFloat)fontSize {
  // Consider using MDFFontDiskLoader to register your font.
  return [UIFont fontWithName:@"yourCustomMediumFont" size:fontSize];
}

- (UIFont *)lightFontOfSize:(CGFloat)fontSize {
  // Consider using MDFFontDiskLoader to register your font.
  return [UIFont fontWithName:@"yourCustomLightFont" size:fontSize];
}

@end

...

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Before any UI is called
  [MDCTypography setFontLoader:[[CustomFontLoader alloc] init]];
}