74 lines
1.8 KiB
CSS
74 lines
1.8 KiB
CSS
/* Forma DJR — base typeface setup
|
|
Tweak the custom properties below to adjust the type globally. */
|
|
|
|
@font-face {
|
|
src: url('../fonts/FormaDJRVariable.woff2') format('woff2-variations'),
|
|
url('../fonts/FormaDJRVariable.woff') format('woff-variations');
|
|
font-family: 'Forma DJR';
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--font-family-base: 'Forma DJR', sans-serif;
|
|
|
|
/* opsz axis: 16 = Micro, 24 = Text, 36 = Deck, 48 = Display, 72 = Banner */
|
|
--font-heading-optical-size: 36;
|
|
--font-body-optical-size: 16;
|
|
--font-footer-optical-size: 8;
|
|
|
|
/* wdth axis: 100 = Normal, 75 = Narrow, 50 = Condensed */
|
|
--font-width: 100;
|
|
|
|
--font-size-base: 18px;
|
|
--line-height-base: 1.6em;
|
|
--letter-spacing-base: normal;
|
|
|
|
--font-size-h1: 3em;
|
|
--font-size-h2: 2em;
|
|
--font-size-h3: 1.5em;
|
|
--font-size-footer: 0.8em;
|
|
--line-height-headings: 1.3;
|
|
--letter-spacing-headings: normal;
|
|
|
|
--font-weight-base: 400;
|
|
--font-weight-bold: 700;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-base), system-ui;
|
|
font-weight: var(--font-weight-base);
|
|
letter-spacing: var(--letter-spacing-base);
|
|
font-variation-settings: 'opsz' var(--font-body-optical-size), 'wdth' var(--font-width);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--font-family-base), system-ui;
|
|
line-height: var(--line-height-headings);
|
|
letter-spacing: var(--letter-spacing-headings);
|
|
font-variation-settings: 'opsz' var(--font-heading-optical-size), 'wdth' var(--font-width);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-h1);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-h2);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-size-h3);
|
|
}
|
|
|
|
footer p {
|
|
font-size: var(--font-size-footer);
|
|
font-variation-settings: 'opsz' var(--font-footer-optical-size), 'wdth' var(--font-width);
|
|
}
|