Create a Typographic System
Config your system herethen download CSS and typefaces below
H1
Inter
px
Regular
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
A mote of dust suspended in a sunbeam vanquish the impossible descended from astronomers as a patch of light Orion's sword science. Rich in mystery citizens of distant epochs inconspicuous motes of rock and gas a very small stage in a vast cosmic arena two ghostly white figures in coveralls and helmets are softly dancing decipherment? Extraordinary claims require extraordinary evidence the sky calls to us courage of our questions extraordinary claims require extraordinary evidence made in the interiors of collapsing stars how far away and billions upon.
A mote of dust suspended in a sunbeam vanquish the impossible descended from astronomers as a patch of light Orion's sword science. Rich in mystery citizens of distant epochs inconspicuous motes of rock and gas a very small stage in a vast cosmic arena two ghostly white figures in coveralls and helmets are softly dancing decipherment? Extraordinary claims require extraordinary evidence the sky calls to us courage of our questions extraordinary claims require extraordinary evidence made in the interiors of collapsing stars how far away and billions upon.
CSS Output
This CSS has no dependencies and should work with any tech stack.
Typesizes are set in rems with CSS variables that can be used to build additional custom styles easily.
/* Base font-size of 18px */
html {
font-size: 112.5%;
}
@font-face {
font-family: "Inter";
font-style: normal;
src: url("/Inter.woff2") format("woff2");
}
:root {
/* h1 */
--typeface-h1: 'Inter';
--type-size-h1: 68px;
--type-variation-h1: "wght" 400, "slnt" 0;
/* h2 */
--typeface-h2: 'Inter';
--type-size-h2: 54px;
--type-variation-h2: "wght" 400, "slnt" 0;
/* h3 */
--typeface-h3: 'Inter';
--type-size-h3: 43px;
--type-variation-h3: "wght" 400, "slnt" 0;
/* h4 */
--typeface-h4: 'Inter';
--type-size-h4: 35px;
--type-variation-h4: "wght" 400, "slnt" 0;
/* h5 */
--typeface-h5: 'Inter';
--type-size-h5: 28px;
--type-variation-h5: "wght" 400, "slnt" 0;
/* h6 */
--typeface-h6: 'Inter';
--type-size-h6: 22px;
--type-variation-h6: "wght" 400, "slnt" 0;
/* body */
--typeface-body: 'Inter';
--type-size-body: 18px;
--type-variation-body: "wght" 400, "slnt" 0;
/* small */
--typeface-small: 'Inter';
--type-size-small: 16px;
--type-variation-small: "wght" 400, "slnt" 0;
}
body {
line-height: 1.7;
font-family: var(--typeface-body);
font-size: var(--type-size-body);
font-variation-settings: var(--type-variation-body);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin: 1rem 0 1.38rem;
line-height: 1.3;
}
h1, .h1 {
font-family: var(--typeface-h1);
font-size: var(--type-size-h1);
font-variation-settings: var(--type-variation-h1);
}
h2, .h2 {
font-family: var(--typeface-h2);
font-size: var(--type-size-h2);
font-variation-settings: var(--type-variation-h2);
}
h3, .h3 {
font-family: var(--typeface-h3);
font-size: var(--type-size-h3);
font-variation-settings: var(--type-variation-h3);
}
h4, .h4 {
font-family: var(--typeface-h4);
font-size: var(--type-size-h4);
font-variation-settings: var(--type-variation-h4);
}
h5, .h5 {
font-family: var(--typeface-h5);
font-size: var(--type-size-h5);
font-variation-settings: var(--type-variation-h5);
}
h6, .h6 {
font-family: var(--typeface-h6);
font-size: var(--type-size-h6);
font-variation-settings: var(--type-variation-h6);
}
p, .body {
font-family: var(--typeface-body);
font-size: var(--type-size-body);
font-variation-settings: var(--type-variation-body);
}
small, .small {
font-family: var(--typeface-small);
font-size: var(--type-size-small);
font-variation-settings: var(--type-variation-small);
}