warning

Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.

logomark

Resources

February 2020 Release

/

Type

keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command + ↑
Scroll to Top
command + ↓
Scroll to Bottom

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 );
View Source

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);
View Source

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);
View Source

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.