-
Notifications
You must be signed in to change notification settings - Fork 0
/
typography.css
95 lines (84 loc) · 3.42 KB
/
typography.css
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Josefin+Sans:ital,wght@0,300..700;1,300..700&family=Literata:ital,wght@0,400..700;1,400..700&display=swap'); */
/* NOTE: can use 'text' param in url */
/* abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 !:/;.,?-"'()[]&éèàçêë€$£ç */
/* URL encoded becomes */
/* abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789%20%21%3A%2F%3B.%2C%3F-%22%27%28%29%5B%5D%26%C3%A9%C3%A8%C3%A0%C3%A7%C3%AA%C3%AB%E2%82%AC%24%C2%A3%C3%A7 */
/* EX */
/* https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789%20%21%3A%2F%3B.%2C%3F-%22%27%28%29%5B%5D%26%C3%A9%C3%A8%C3%A0%C3%A7%C3%AA%C3%AB%E2%82%AC%24%C2%A3%C3%A7 */
/* FONTS loading strategy: simply use font-display: swap; */
:root {
/* FONTS */
--font-body: var(--font-body-prefered, var(--font-body-critical,
var(--font-body-fallback, sans-serif)));
--font-heading: var(--font-heading-prefered, var(--font-heading-critical,
var(--font-heading-fallback, sans-serif)));
--font-mono: var(--font-mono-prefered, var(--font-mono-critical,
var(--font-mono-fallback, monospace)));
--mono: 0; /* Monospace: Sans (natural-width) or Mono (fixed-width) */
--casl: 0; /* Casual: Linear to Casual */
--wght: 400; /* Weight: 300 to 1000, Light to ExtraBlack – usually set with `font-weight` */
--slnt: 0; /* Slant: 0 to -15 degrees */
--ital: 0; /* Italic: always roman, auto, or always italic */
}
html {
font-family: var(--font-body-prefered), var(--font-body-critical),
var(--font-body-fallback), sans-serif;
/* --font-body-prefered: env(--font-body-prefered);
--font-body-critical: env(--font-body-critical);
--font-body-fallback: env(--font-body-fallback); */
/* font-family: var(--font-body-fallback, sans-serif); */
}
/* html.fonts-stage-1 {
--font-body: var(--font-body-critical, var(--font-body-fallback, sans-serif));
--font-heading: var(--font-heading-critical, var(--font-heading-fallback, sans-serif));
--font-mono: var(--font-mono-critical, var(--font-mono-fallback, monospace));
}
@supports (font-variation-settings: 'wght' 700) {
html.fonts-stage-2 {
--font-body: var(--font-body-prefered, var(--font-body-critical,
var(--font-body-fallback, sans-serif)));
--font-heading: var(--font-heading-prefered, var(--font-heading-critical,
var(--font-heading-fallback, sans-serif)));
--font-mono: var(--font-mono-prefered, var(--font-mono-critical,
var(--font-mono-fallback, monospace)));
}
} */
* {
/* apply axis values with CSS custom properties */
font-variation-settings: 'MONO' var(--mono), 'CASL' var(--casl),
'wght' var(--wght), 'slnt' var(--slnt), 'ital' var(--ital);
/* font-family: var(--font-body); */
}
:--headings {
font-weight: 700;
--wght: 700;
/* --casl: 0.2; */
/* --slnt: -2; */
/* font-family: var(--font-heading); */
font-family: var(--font-heading-prefered), var(--font-heading-critical),
var(--font-heading-fallback), sans-serif;
}
:--code {
--mono: 1;
/* --casl: 1; */
/* --ital: 1; */
/* font-family: var(--font-mono); */
font-family: var(--font-mono-prefered), var(--font-mono-critical),
var(--font-mono-fallback), monospace;
}
:--bold {
font-weight: 700;
--wght: 700;
}
:--em {
font-style: italic;
--slnt: -10;
--ital: 1;
}
/* LINE HEIGHT */
body {
line-height: 1.45;
}
/* :--headings {
line-height: 1.3;
} */