$spr-font-size-base
$spr-font-size-base: 16px !default;The base font size that determines the size of 1rem and thus the proportions of everything in Sprout.
Typography Tokens
All text styles including font, weight, and line-height are determined by typography tokens.
$spr-tokens-typography (map)
$spr-tokens-typography: (
font-base: $_font-base,
font-family: $_font,
font-size: (
button-label-sm: rem(14px),
button-label-md: rem(16px),
link-xs: rem(12px),
link-sm: rem(14px),
link-md: rem(16px),
body-xs: rem(12px),
body-sm: rem(14px),
body-md: $spr-font-size-base,
label-xs: rem(12px),
label-sm: rem(14px),
label-md: rem(16px),
display-xs: rem(16px),
display-sm: rem(20px),
display-md: rem(24px),
display-lg: rem(32px),
display-xl: rem(40px)
),
line-height: (
button-label-sm: rem(24px),
button-label-md: rem(24px),
link-xs: rem(16px),
link-sm: rem(20px),
link-md: rem(22px),
body-xs: rem(16px),
body-sm: rem(20px),
body-md: rem(22px),
label-xs: rem(16px),
label-sm: rem(20px),
label-md: rem(22px),
display-xs: rem(22px),
display-sm: rem(28px),
display-md: rem(34px),
display-lg: rem(44px),
display-xl: rem(56px)
),
font-weight: (
normal: 400,
bold: 600
)
) !default;A map containing all typography tokens.
Map Properties
font-family: (string)
The font family used globally in Sprout.
font-size: (map)
Font-size tokens are used to control the size of text.
line-height: (map)
Line-height tokens are used to control the line-height of text.
font-weight: (map)
Font-weight tokens are used to control the boldness of text.
Used By
@mixin spr-config-typography()
@function spr-font-size-tokens()
@function spr-line-height-tokens()
@function spr-font-weight-tokens()
@function spr-font-base()
@function spr-font-family()
Font (coming soon)
Font Preview font-main
Typography Sizes
Size Previews
| Name | Value | |
|---|---|---|
| button-label-sm, link-sm, body-sm, label-sm |
0.875rem
|
Pack my box with five dozen liquor jugs. |
| button-label-md, link-md, label-md, display-xs |
1rem
|
Pack my box with five dozen liquor jugs. |
| link-xs, body-xs, label-xs |
0.75rem
|
Pack my box with five dozen liquor jugs. |
| body-md |
16px
|
Pack my box with five dozen liquor jugs. |
| display-sm |
1.25rem
|
Pack my box with five dozen liquor jugs. |
| display-md |
1.5rem
|
Pack my box with five dozen liquor jugs. |
| display-lg |
2rem
|
Pack my box with five dozen liquor jugs. |
| display-xl |
2.5rem
|
Pack my box with five dozen liquor jugs. |
Configuration
@mixin spr-config-typography()
Configures Sprout typography tokens by recursively merging in the provided map.
Parameters
$custom-config: () (map)
Sprout typography token map that matches the form of $spr-tokens-typography
Used By
@mixin spr-config()
Getter Functions
@function spr-font-size-tokens()
Get the map of font-size tokens.
Requires
$spr-tokens-typography (map)
Used By
@function spr-font-size()
@function spr-line-height-tokens()
Get the map of line-height tokens.
Requires
$spr-tokens-typography (map)
Used By
@function spr-line-height()
@function spr-font-weight-tokens()
Get the map of font-weight tokens.
Requires
$spr-tokens-typography (map)
Used By
@function spr-font-weight()
@function spr-font-base()
Get the font-base value.
Requires
$spr-tokens-typography (map)
@function spr-font-family()
Get the font-family value.
Requires
$spr-tokens-typography (map)
Used By
@mixin spr-text()
@function spr-font-size()
Get a font-size value given a font-size token.
Parameters
$font-size-token: (string)
A Sprout font-size token such as ‘body-sm’ or ‘display-xl’.
Used By
@mixin spr-text()
@function spr-line-height()
Get a line-height value given a line-height token.
Parameters
$line-height-token: (string)
A Sprout line-height token such as ‘body-sm’ or ‘display-xl’.
Used By
@mixin spr-text()
@function spr-font-weight()
Get a font-weight value given a font-weight token.
Parameters
$font-weight-token: (string)
A Sprout font-weight token such as ‘normal’ or ‘display-xl’.