-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
typography.scss
65 lines (54 loc) · 1.62 KB
/
typography.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// Typography variables
// Heading sizes - mobile
// h4-h6 remain the same size on both mobile & desktop
$h00-size-mobile: 40px !default;
$h0-size-mobile: 32px !default;
$h1-size-mobile: 26px !default;
$h2-size-mobile: 22px !default;
$h3-size-mobile: 18px !default;
// Heading sizes - desktop
$h00-size: 48px !default;
$h0-size: 40px !default;
$h1-size: 32px !default;
$h2-size: 24px !default;
$h3-size: 20px !default;
$h4-size: 16px !default;
$h5-size: 14px !default;
$h6-size: 12px !default;
$font-size-small: 12px !default;
// Font weights
$font-weight-bold: 600 !default;
$font-weight-semibold: 500 !default;
$font-weight-normal: 400 !default;
$font-weight-light: 300 !default;
// Line heights
$lh-condensed-ultra: 1 !default;
$lh-condensed: 1.25 !default;
$lh-default: 1.5 !default;
// Font stacks
// stylelint-disable no-eol-whitespace
$body-font:
// Apple OSs
-apple-system,
BlinkMacSystemFont,
// Windows
// Note this should be prioritized over `system-ui` to avoid legacy fonts.
// See https://infinnie.github.io/blog/2017/systemui.html
"Segoe UI Variable",
"Segoe UI",
// Linux-friendly system-level fonts + fallbacks
system-ui,
ui-sans-serif,
Helvetica,
Arial,
sans-serif,
// Emojis
"Apple Color Emoji",
"Segoe UI Emoji" !default;
// stylelint-enable no-eol-whitespace
// Monospace font stack
// Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome
$mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !default;
// The base body size
$body-font-size: 14px !default;
$body-line-height: $lh-default !default;