Create a Typographic System

Config your system here
then download CSS and typefaces below
H1
H1
H1
H2
H3
H4
H5
H6
Body
Small
Inter
Inter
Anybody
Epilogue
Trispace
Fraunces
Hubot Sans
Mona Sans
Source Code Pro
Source Sans
Source Serif
Space Grotesk
px
Regular
Thin
Thin Italic
Extra Light
Extra Light Italic
Light
Light Italic
Regular
Italic
Medium
Medium Italic
Semi Bold
Semi Bold Italic
Bold
Bold Italic
Extra Bold
Extra Bold Italic
Black
Black Italic
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);
}