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 Specifications

• Typography

API Documentation

• MDCTypography
• MDCSystemFontLoader
• MDCTypographyFontLoading

Installation

Requirements

• Xcode 7.0 or higher.
• iOS SDK version 7.0 or higher.

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

import MaterialComponents.MaterialTypography

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

#import "MaterialTypography.h"

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

import MaterialComponents.MaterialTypography

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

#import "MaterialTypography.h"

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

import MaterialComponents.MaterialTypography

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()

Objective C

#import "MaterialTypography.h"

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 instead of Roboto. Since all of the other components in our framework requests fonts through the Typography component, it is possible to switch the font used by all of Material Components for iOS. If you want to use the system font use MDCSystemFontLoader which already conforms to the MDCTypographyFontLoading protocol.

Swift

class CustomFontLoader: NSObject, MDCTypographyFontLoading {
  func regularFontOfSize(fontSize: CGFloat) -> UIFont {
    // Consider using MDCFontDiskLoader to register your font.
    return UIFont.init(name: "yourCustomRegularFont", size: fontSize)!
  }
  func mediumFontOfSize(fontSize: CGFloat) -> UIFont {
    // Consider using MDCFontDiskLoader to register your font.
    return UIFont.init(name: "yourCustomMediumFont", size: fontSize)!
  }
  func lightFontOfSize(fontSize: CGFloat) -> UIFont {
    // Consider using MDCFontDiskLoader to register your font.
    return UIFont.init(name: "yourCustomLightFont", size: fontSize)!
  }
}

...

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
... before any UI is called
  MDCTypography.setFontLoader(CustomFontLoader())
...
}

Objective-C

@interface CustomFontLoader : NSObject <MDCTypographyFontLoading>
@end

@implementation CustomFontLoader

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

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

- (UIFont *)lightFontOfSize:(CGFloat)fontSize {
  // Consider using MDCFontDiskLoader 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];
...
}

The default FontLoader

If no font loader has been set, Typography attempts to use the Material RobotoFontLoader which results in Roboto fonts being used when text styles are requested. If that runtime check fails to find MDCRobotoFontLoader, the Material MDCSystemFontLoader font is used resulting in San Francisco or Helvetica being used.

If your Podfile.lock has:

MaterialComponents/RobotoFontLoader

Then one of your specs depends on RobotoFontLoader and the Roboto will be used if no font loader has been set. If you set your own Font Loader it is recomened that you not pull in the Roboto Font Loader Component because that will add font assets to your app that you will not use.