# 888 888 # 888 888 # 888 888 # 888888 888 888 88888b. .d88b. .d88b. 888d888 8888b. 88888b. 88888b. 888 888 # 888 888 888 888 "88b d88""88b d88P"88b 888P" "88b 888 "88b 888 "88b 888 888 # 888 888 888 888 888 888 888 888 888 888 .d888888 888 888 888 888 888 888 # Y88b. Y88b 888 888 d88P Y88..88P Y88b 888 888 888 888 888 d88P 888 888 Y88b 888 # "Y888 "Y88888 88888P" "Y88P" "Y88888 888 "Y888888 88888P" 888 888 "Y88888 # 888 888 888 888 888 # Y8b d88P 888 Y8b d88P 888 Y8b d88P # "Y88P" 888 "Y88P" 888 "Y88P" # Typography # # Styleguide Tokens.Typography # # Weight: 2 font: path: "'/assets/fonts' !default" family: files--map: Montserrat: regular: weight: 400 style: normal stretch: normal italic: weight: 400 style: italic stretch: normal bold: weight: 700 style: normal stretch: normal bolditalic: weight: 700 style: italic stretch: normal black: weight: 900 style: normal stretch: normal blackitalic: weight: 900 style: italic stretch: normal # Font Families # # Our base font family is **[Montserrat](https://github.com/JulietaUla/Montserrat)**, a geometric sans-serif typeface designed by Argentinian designer [Julieta Ulanovsky](https://github.com/JulietaUla/). The design was inspired by signage from her historical Buenos Aires neighborhood of the same name. # # We load Montserrat as a webfont, but if it is unavailable our font stack falls back to the system font for any modern operating system ([San Francisco](https://github.com/supermarin/YosemiteSanFranciscoFont) on macOS and iOS, [Segoe UI](http://www.microsoft.com/typography/Fonts/family.aspx?FID=331) on Windows, [Droid Sans](https://fonts.google.com/specimen/Droid+Sans) on Android, etc.). # #
# # This text is set in our **base** *font stack*. # #
# # We also have a monospace font stack for times when it’s needed, and it’s very visible in the code snippets all over this styleguide. We’ve chosen our favorite monospace font — [Operator Mono](https://www.typography.com/fonts/operator/overview/) — as the base, and several good fallback options. # #
# # This text is set in our **monospace** *font stack*. # #
# # $font-family-base = Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif - ​ # $font-family-mono = 'Operator Mono', Hack, Consolas, Menlo, Monaco, 'Ubuntu Mono', 'Courier New', Courier, monospace - ​ # # Styleguide Tokens.Typography.Families # # Weight: 1 base: "Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif !default" mono: "'Operator Mono', Hack, Consolas, Menlo, Monaco, 'Ubuntu Mono', 'Courier New', Courier, monospace !default" # Font Weights # # We use two main weights of Montserrat — *Regular (400)* and *Bold (700)*. We occasionally use the *Black (900)* weight for headers, and we also have an *Italic* version of each weight. # #
# # This is Montserrat Regular.
# This is Montserrat Bold.
# This is Montserrat Black. # #
# # $font-weight-normal = 400 - ​ # $font-weight-bold = 700 - ​ # $font-weight-black = 900 - ​ # # Styleguide Tokens.Typography.Weights # # Weight: 2 weight: normal: 400 !default bold: 700 !default black: 900 !default # Font Sizes # # We use a [modular scale](https://alistapart.com/article/more-meaningful-typography) for our font sizes. Starting at a `1.6rem (16px)` base, our font-sizes go up and down based on a modular scale ratio of **1.2**. # # Styleguide Tokens.Typography.Sizes # # Weight: 3 size: root: 10px !default base: 1.6rem !default scale-ratio: 1.2 !default # Font Size Scale # # `1rem` (`rem` is a CSS unit of length that stands for *root em*) is equivalent to our `10px` base. # # While we have all of the following sizes available, use your judgment on whether a particular size looks reasonable (and readable) in the situation where it is used. # #
# # This is our XXS font size.
# This is our XS font size.
# This is our small font size.
# This is our medium (base) font size.
# This is our large font size.
# This is our XL font size.
# This is our XXL font size.
# This is our XXXL font size.
# This is our XXXXL font size.
# #
# # $font-size-xxs = 0.926rem - 9.259px # $font-size-xs = 1.111rem - 11.111px # $font-size-s = 1.333rem - 13.333px # $font-size-m = 1.6rem - 16px # $font-size-l = 1.92rem - 19.2px # $font-size-xl = 2.30rem - 23.04px # $font-size-xxl = 2.76rem - 27.648px # $font-size-xxxl = 3.318rem - 33.178px # $font-size-xxxxl = 3.981rem - 39.813px # # Styleguide Tokens.Typography.Sizes.Scale # # Weight: 1 xxs: ms($font-size-scale-ratio, $font-size-base, -3) xs: ms($font-size-scale-ratio, $font-size-base, -2) s: ms($font-size-scale-ratio, $font-size-base, -1) m: ms($font-size-scale-ratio, $font-size-base, 0) l: ms($font-size-scale-ratio, $font-size-base, 1) xl: ms($font-size-scale-ratio, $font-size-base, 2) xxl: ms($font-size-scale-ratio, $font-size-base, 3) xxxl: ms($font-size-scale-ratio, $font-size-base, 4) xxxxl: ms($font-size-scale-ratio, $font-size-base, 5) # Header Sizes # # These are the base font sizes for our headers, usable as variables in Sass. # #
# # # Accessibility Note # Pages should be structured in a hierarchical manner, with `

` headings being the most important (usually page titles or main content heading), then `

` headings (usually major section headings), down to `

` headings (sub-sections of the `

`), and so on. Lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an `

` to an `

`, going down the document). # #

# #
# # This is an H1 heading.
# This is an H2 heading.
# This is an H3 heading.
# This is an H4 heading.
# This is an H5 heading.
# This is an H6 heading. # #
# # $font-size-h1 = $font-size-xxxxl - 39.813px # $font-size-h2 = $font-size-xxxl - 33.178px # $font-size-h3 = $font-size-xxl - 27.648px # $font-size-h4 = $font-size-xl - 23.04px # $font-size-h5 = $font-size-l - 19.2px # $font-size-h6 = $font-size-m - 16px # # Styleguide Tokens.Typography.Sizes.Headers # # Weight: 2 h1: $font-size-xxxxl !default h2: $font-size-xxxl !default h3: $font-size-xxl !default h4: $font-size-xl !default h5: $font-size-l !default h6: $font-size-m !default # Line Heights # # Our base line height is `1.5` (the number is multiplied by the element’s font size). We use smaller line heights for headers (`1.25`) and buttons (`1`). We also set an explicit line height of `5rem` (`50px`) on form elements like input fields and select boxes for consistency. # # $line-height-base = 1.5 - ​ # $line-height-header = 1.25 - ​ # $line-height-button = 1 - ​ # $line-height-form = 5rem - 50px # # Styleguide Tokens.Typography.Line-Heights # # Weight: 4 line-height: base: 1.5 !default header: 1.25 !default button: 1 !default form: 5rem !default max-line-length: 50em !default