$sl-font-weight--light: 300 !default; $sl-font-weight--regular: 400 !default; $sl-font-weight--bold: 600 !default; $sl-font-weights: ( light: $sl-font-weight--light, regular: $sl-font-weight--regular, bold: $sl-font-weight--bold, ); @each $name, $value in $sl-font-weights { .sl-font-weight--#{$name} { font-weight: $value; } } $sl-font-size--small: sl-px-to-rem(12px) !default; $sl-font-size--medium: sl-px-to-rem(16px) !default; $sl-font-size--large: sl-px-to-rem(24px) !default; $sl-font-size--x-large: sl-px-to-rem(32px) !default; $sl-font-size--xx-large: sl-px-to-rem(48px) !default; $sl-font-size--xxx-large: sl-px-to-rem(64px) !default; $sl-font-size--xxxx-large: sl-px-to-rem(96px) !default; $sl-font-sizes: ( small: $sl-font-size--small, medium: $sl-font-size--medium, large: $sl-font-size--large, x-large: $sl-font-size--x-large, xx-large: $sl-font-size--xx-large, xxx-large: $sl-font-size--xxx-large, xxxx-large: $sl-font-size--xxxx-large, ); @each $name, $value in $sl-font-sizes { .sl-font-size--#{$name} { font-size: $value; } } $sl-font-family--text: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default; $sl-font-family--display: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Roman', 'Droid Serif', Times, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default; $sl-font-family--code: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', 'Droid Sans Mono', monospace, monospace !default; $sl-font-families: ( text: $sl-font-family--text, display: $sl-font-family--display, code: $sl-font-family--code, ); @each $name, $value in $sl-font-families { .sl-font-family--#{$name} { font-family: $value; } } body, h5, h6 { font-size: $sl-font-size--medium; } body { line-height: 1.5; font-family: $sl-font-family--text; text-rendering: optimizeLegibility; } a { text-decoration: none; } strong, b, h5, h6, dt, tbody th, label { font-weight: $sl-font-weight--bold; } h1, h2, caption, h3, h4, h5, h6, p, ul, ol, dl, figure { margin: 1.5rem 0; padding: 0; } ul, ol, dd { margin-left: 1.75rem; } h1, h2, caption, h3, h4, h5, h6 { font-weight: $sl-font-weight--regular; line-height: 1.25; } h1, h2, caption { letter-spacing: -#{sl-px-to-em(.5px)}; } h1, h2 { font-weight: $sl-font-weight--light; } h1 { font-size: $sl-font-size--xx-large; line-height: 1; text-align: center; @include sl-breakpoint--medium { font-size: $sl-font-size--xxx-large; } @include sl-breakpoint--large { font-size: $sl-font-size--xxxx-large; } } h2, caption, legend, h3, thead th { font-family: $sl-font-family--display; } h2, caption, { font-size: $sl-font-size--x-large; @include sl-breakpoint--medium { font-size: $sl-font-size--xx-large; } @include sl-breakpoint--large { font-size: $sl-font-size--xxx-large; } } h3, h4 { font-size: $sl-font-size--large; } .caps { font-size: sl-px-to-em(14px); text-transform: uppercase; letter-spacing: sl-px-to-em(1px); line-height: 0; }