Resources

Type

Use these to apply the right visual hierarchy with text.

Web
React Native
Android
Apple
Other

Uniform Type

This mixin enables you to use Uniform type styles on classes within your own code, if you’re unable to take advantage of the type components.

@include uniform-type( $variant );

Parameters

$variant

list-map value

Default value: none

Pass one of the following values.

  • headline-1
  • headline-2
  • headline-3
  • subhead
  • subhead-small
  • text-large
  • text-text
  • text-small
  • text-micro
  • text-additional
  • item-title
  • text-title-small

Notes

The list map value passed to the mixin sets the following attributes of the type:

  • font-family
  • font-weight
  • font-size
  • line-height
  • color
  • letter-spacing

Type Size

The type-size mixin automatically switches type from a smaller, hand-held appropriate size, to a larger, tablet and up appropriate size.

@include type-size($default-size, $small-size);

Parameters

$default-size

number

Default value: null

This is larger (above 600px) size in the range.

$small-size

number

Default value: null

This is the size for screens 600px and smaller.

Notes

  • The type-size mixin was created for use within the Uniform type system. Specifically, for large, display type. As such, it is written specifically for that use case. The 37.5rem (600px) breakpoint for the size change is hard-coded within the mixin.

Line Height

@include line-height($default-line-height, $small-line-height);

Parameters

$default-line-height

number

Default value: null

This is the line height for the large type size.

$small-line-height

number

Default value: null

The is the line height for the smaller size type.

Notes

  • The line-height mixin was created for use within the Uniform type system. Specifically, for large, display type. As such, it is written specifically for that use case. The 37.5rem (600px) breakpoint for the size change is hard-coded within the mixin.