typography.css
1 /* headers */ 2 3 @font-face { 4 font-family: 'Inter Bold'; 5 src: url('/fonts/Inter-Bold.woff2'); 6 font-display: swap; 7 } 8 9 @font-face { 10 font-family: 'Inter SemiBold'; 11 src: url('/fonts/Inter-SemiBold.woff2'); 12 font-display: swap; 13 } 14 15 @font-face { 16 font-family: 'Inter Regular'; 17 src: url('/fonts/Inter-Regular.woff2'); 18 font-display: swap; 19 } 20 21 @font-face { 22 font-family: 'Inter Extra Bold'; 23 src: url('/fonts/Inter-ExtraBold.woff2'); 24 font-display: swap; 25 } 26 27 :root { 28 --typeface-extra-bold: 29 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 30 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 31 --typeface-bold: 32 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 33 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 34 --typeface-medium: 35 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 36 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 37 --typeface-regular: 38 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 39 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 40 --typeface-mono-bold: 41 SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; 42 --typeface-mono-regular: 43 SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; 44 } 45 [data-uifont='system'] { 46 --typeface-bold: 47 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 48 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 49 --typeface-medium: 50 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 51 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 52 --typeface-regular: 53 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 54 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 55 } 56 [data-codefont='system'] { 57 --typeface-mono-bold: 58 SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; 59 --typeface-mono-regular: 60 SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; 61 } 62 63 [data-uifont='inter'] { 64 --typeface-extra-bold: Inter Extra Bold, Helvetica, sans-serif; 65 --typeface-bold: Inter Bold, Helvetica, sans-serif; 66 --typeface-medium: Inter SemiBold, Helvetica, sans-serif; 67 --typeface-regular: Inter Regular, Helvetica, sans-serif; 68 } 69 70 h1.extra-bold { 71 font-family: var(--typeface-extra-bold); 72 font-weight: 800; 73 } 74 75 h2.extra-bold { 76 font-family: var(--typeface-extra-bold); 77 font-weight: 800; 78 } 79 80 h1, 81 .typo-header-1 { 82 font-family: var(--typeface-medium); 83 font-weight: 500; 84 font-size: 36px; 85 line-height: 44px; 86 } 87 88 h2, 89 .typo-header-2 { 90 font-family: var(--typeface-medium); 91 font-weight: 500; 92 font-size: 24px; 93 line-height: 30px; 94 } 95 96 h3, 97 .typo-header-3 { 98 font-family: var(--typeface-medium); 99 font-weight: 500; 100 font-size: 20px; 101 line-height: 24px; 102 } 103 104 h4, 105 .typo-header-4 { 106 font-family: var(--typeface-medium); 107 font-weight: 500; 108 font-size: 16px; 109 line-height: 22.5px; 110 } 111 112 h5, 113 .typo-header-5 { 114 font-family: var(--typeface-medium); 115 font-weight: 500; 116 font-size: 13px; 117 line-height: 20px; 118 text-transform: uppercase; 119 letter-spacing: 0.05rem; 120 } 121 122 /* text */ 123 124 p, 125 .typo-text { 126 font-family: var(--typeface-regular); 127 font-weight: normal; 128 font-size: 16px; 129 line-height: 24px; 130 } 131 132 .typo-text-bold { 133 font-family: var(--typeface-medium); 134 font-weight: 500; 135 font-size: 16px; 136 line-height: 24px; 137 } 138 139 .typo-text-mono { 140 font-family: var(--typeface-mono-regular); 141 font-weight: normal; 142 font-size: 16px; 143 } 144 145 .typo-text-mono-bold { 146 font-family: var(--typeface-mono-bold); 147 font-weight: bold; 148 font-size: 16px; 149 } 150 151 .typo-text-small { 152 font-family: var(--typeface-regular); 153 font-size: 14px; 154 line-height: 18px; 155 } 156 157 .typo-text-small-bold { 158 font-family: var(--typeface-medium); 159 font-weight: 500; 160 font-size: 14px; 161 line-height: 18px; 162 } 163 164 .typo-text-small-mono { 165 font-family: var(--typeface-mono-bold); 166 font-size: 14px; 167 } 168 169 /* Relative links */ 170 171 .typo-link { 172 color: var(--color-primary); 173 cursor: pointer; 174 text-decoration: underline; 175 text-underline-offset: 0.25rem; 176 } 177 178 .typo-link:hover, 179 .typo-link:focus { 180 opacity: 0.75; 181 } 182 183 .typo-link:active { 184 opacity: 0.5; 185 } 186 187 /* External links */ 188 .typo-link[href^="http://"]:after, 189 .typo-link[href^="https://"]:after 190 { 191 content: '↗'; 192 margin-left: 0.1rem; 193 text-decoration: none; 194 /* disables text decoration from containing a element */ 195 display: inline-block; 196 vertical-align: text-top; 197 } 198 199 /* Modifiers */ 200 201 .typo-regular { 202 font-family: var(--typeface-regular); 203 font-weight: 500; 204 } 205 206 .typo-semi-bold { 207 font-family: var(--typeface-medium); 208 font-weight: 500; 209 } 210 211 .typo-bold { 212 font-family: var(--typeface-medium); 213 font-weight: 500; 214 } 215 216 .typo-mono { 217 font-family: var(--typeface-mono-regular); 218 font-weight: normal; 219 } 220 221 .typo-mono-bold { 222 font-family: var(--typeface-mono-bold); 223 font-weight: 500; 224 } 225 226 .typo-overflow-ellipsis { 227 white-space: nowrap; 228 text-overflow: ellipsis; 229 overflow: hidden; 230 } 231 232 .typo-all-caps { 233 font-family: var(--typeface-medium); 234 font-weight: 500; 235 font-size: 13px; 236 text-transform: uppercase; 237 letter-spacing: 0.05rem; 238 } 239 240 /* Enable contextual alternates */ 241 .typo-enable-calt { 242 font-feature-settings: 'calt'; 243 } 244 245 .typo-wrap { 246 hyphens: auto; 247 overflow-wrap: break-word; 248 } 249 250 .typo-text-diff-additive { 251 background: var(--color-positive-level-1); 252 color: var(--color-positive-level-6); 253 }