/*
¶ ↑
¶ ↑
¶ ↑
USWDS 2.10.1
TYPOGRAPHY SETTINGS
Read more about settings and USWDS typography tokens in the documentation: designsystem.digital.gov/design-tokens/typesetting/overview/
*/
/*
Root font size
Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries
$theme-root-font-size only applies when $theme-respect-user-font-size is set to false.
This will set the root font size as a specific px value and use px values for media queries.
Accepts true or false
*/
$theme-respect-user-font-size: true !default;
// $theme-root-font-size only applies when // $theme-respect-user-font-size is set to // false.
// This will set the root font size // as a specific px value and use px values // for media queries.
// Accepts values in px
$theme-root-font-size: 10px !default;
/*
Global styles
Adds basic styling for the following unclassed elements:
-
paragraph: paragraph text
-
link: links
-
content: paragraph text, links, headings, lists, and tables
*/
$theme-global-paragraph-styles: false !default; $theme-global-link-styles: false !default; $theme-global-content-styles: false !default;
/*
Font path
Relative font file path
*/
$theme-font-path: “../fonts” !default;
/*
Custom typeface tokens
Add a new custom typeface token if your project uses a typeface not already defined by USWDS.
USWDS defines the following tokens by default:
'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana'
Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token.
For example:
$theme-font-type-cond: 'example-font-token';
display-name: The display name of your font
cap-height: The height of a 500px `N` in Sketch
You should change `example--token` names to something more descriptive.
*/
$theme-typeface-tokens: (
example-serif-token: ( display-name: "Example Serif Display Name", cap-height: 364px, ), example-sans-token: ( display-name: "Example Sans Display Name", cap-height: 364px, ),
) !default;
/*
Type-based font settings
Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens.
'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana'
*/
// condensed $theme-font-type-cond: false !default;
// icon $theme-font-type-icon: false !default;
// language-specific $theme-font-type-lang: false !default;
// monospace $theme-font-type-mono: “roboto-mono” !default;
// sans-serif $theme-font-type-sans: “source-sans-pro” !default;
// serif $theme-font-type-serif: “merriweather” !default;
/*
Custom font stacks
Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack.
Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack.
Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: “Helvetica Neue”, Helvetica, Arial, sans;
Output: font-family: “Source Sans Pro”, “Helvetica Neue”, Helvetica, Arial, sans;
*/
$theme-font-cond-custom-stack: false !default; $theme-font-icon-custom-stack: false !default; $theme-font-lang-custom-stack: false !default; $theme-font-mono-custom-stack: false !default; $theme-font-sans-custom-stack: false !default; $theme-font-serif-custom-stack: false !default;
/*
Add any custom font source files
If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows.
USWDS automatically generates @font-face decalarations for the following
'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro'
These typefaces not require custom source files.
EXAMPLE
-
dir: Directory relative to $theme-font-path
-
This directory should include fonts saved as .ttf, .woff, and .woff2 ExampleSerif-Normal.ttf ExampleSerif-Normal.woff ExampleSerif-Normal.woff2
$theme-font-serif-custom-src: (
dir: 'custom/example-serif', roman: ( 100: false, 200: false, 300: 'ExampleSerif-Light', 400: 'ExampleSerif-Normal', 500: false, 600: false, 700: 'ExampleSerif-Bold', 800: false, 900: false, ), italic: ( 100: false, 200: false, 300: 'ExampleSerif-LightItalic', 400: 'ExampleSerif-Italic', 500: false, 600: false, 700: 'ExampleSerif-BoldItalic', 800: false, 900: false, ),
);
*/
$theme-font-cond-custom-src: false !default; $theme-font-icon-custom-src: false !default; $theme-font-lang-custom-src: false !default; $theme-font-mono-custom-src: false !default; $theme-font-sans-custom-src: false !default; $theme-font-serif-custom-src: false !default;
/*
Role-based font settings
Set the role-based tokens for your project from the following font-type tokens.
'cond' 'icon' 'lang' 'mono' 'sans' 'serif'
*/
$theme-font-role-ui: “sans” !default; $theme-font-role-heading: “serif” !default; $theme-font-role-body: “sans” !default; $theme-font-role-code: “mono” !default; $theme-font-role-alt: “serif” !default;
/*
Type scale
Define your project's type scale using values from the USWDS system type scale
1-20
*/
$theme-type-scale-3xs: 2 !default; $theme-type-scale-2xs: 3 !default; $theme-type-scale-xs: 4 !default; $theme-type-scale-sm: 5 !default; $theme-type-scale-md: 6 !default; $theme-type-scale-lg: 9 !default; $theme-type-scale-xl: 12 !default; $theme-type-scale-2xl: 14 !default; $theme-type-scale-3xl: 15 !default;
/*
Font weights
Assign weights 100-900 Or use `false` for unneeded weights.
*/
$theme-font-weight-thin: false !default; $theme-font-weight-light: 300 !default; $theme-font-weight-normal: 400 !default; $theme-font-weight-medium: false !default; $theme-font-weight-semibold: false !default; $theme-font-weight-bold: 700 !default; $theme-font-weight-heavy: false !default;
// If USWDS is generating your @font-face rules, // should we generate all available weights // regardless of the assignments above?
$theme-generate-all-weights: false !default;
/*
General typography settings
Type scale tokens
micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px
Line height tokens
1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75
Font role tokens
'ui' 'heading' 'body' 'code' 'alt'
Measure (max-width) tokens
1: 44ex 2: 60ex 3: 64ex 4: 68ex 5: 74ex 6: 88ex none: none
*/
// Body settings are the equivalent of setting the <body> element $theme-body-font-family: “body” !default; $theme-body-font-size: “sm” !default; $theme-body-line-height: 5 !default;
// If true, explicitly style the <body> element with the base styles $theme-style-body-element: false !default;
// Headings $theme-h1-font-size: “2xl” !default; $theme-h2-font-size: “xl” !default; $theme-h3-font-size: “lg” !default; $theme-h4-font-size: “sm” !default; $theme-h5-font-size: “xs” !default; $theme-h6-font-size: “3xs” !default; $theme-heading-line-height: 2 !default; $theme-small-font-size: “2xs” !default; $theme-display-font-size: “3xl” !default;
// Text and prose $theme-text-measure-narrow: 1 !default; $theme-text-measure: 4 !default; $theme-text-measure-wide: 6 !default; $theme-prose-font-family: “body” !default;
// Lead text $theme-lead-font-family: “heading” !default; $theme-lead-font-size: “lg” !default; $theme-lead-line-height: 6 !default; $theme-lead-measure: 6 !default;