typography reset

.storybook/preview.scss

@@ -1,3 +1,7 @@
+body {
+  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
+}
+
 table.docblock-argstable {
   p {
     font-family: inherit;
@@ -9,6 +13,10 @@ table.docblock-argstable {
   }
 }
 
+div.sbdocs :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
+  font-size: 16px;
+}
+
 div.sbdocs-content {
   h1 {
     font-family: 'Knowledge', sans-serif;

src/components/BodyText/BodyText.svelte

@@ -28,6 +28,6 @@
   @import '../../scss/mixins';
 
   div.article-block.body-text {
-    @include body-text;
+    // @include body-text;
   }
 </style>

src/components/SiteHeadline/SiteHeadline.svelte

@@ -86,7 +86,7 @@
     </div>
     <aside class="article-metadata mt-2 font-subhed">
       <div class="byline-container">
-        <div class="byline text-primary font-bold leading-tight">
+        <div class="byline text-sm text-primary font-bold leading-tight">
           By
           {#if authors.length > 0}
             {#each authors as author, i}

src/components/Theme/Theme.stories.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore

src/scss/reset/_main.scss

@@ -1,4 +1,5 @@
 @import 'normalize.css';
+@import 'typography';
 
 *,
 *:before,
@@ -7,40 +8,6 @@
 }
 
 body {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-
-p {
-  display: block;
-  margin-block-start: 0px;
-  margin-block-end: 0px;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-}
-
-ol,
-ul {
-  padding-left: 2rem;
-}
-
-ol,
-ul {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-a {
-  color: inherit;
-}

src/scss/reset/_typography.scss

@@ -0,0 +1,102 @@
+@use '../mixins' as *;
+
+body {
+  @include font-sans;
+  @include font-normal;
+  @include leading-normal;
+}
+
+/////////////
+// HEADINGS
+/////////////
+
+h1,
+h2,
+h3,
+h5,
+h6 {
+  @include text-primary;
+  -webkit-font-smoothing: antialiased;
+}
+h1 {
+  @include font-hed;
+  @include text-3xl;
+  @include leading-none;
+}
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include font-subhed;
+  @include leading-tighter;
+  margin-block-start: calc(var(--theme-font-size-base) * 1.5);
+}
+h2 {
+  @include text-xl;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.75);
+}
+h3 {
+  @include text-lg;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.625);
+}
+h4 {
+  @include text-base;
+  @include text-secondary;
+  @include tracking-wider;
+  text-transform: uppercase;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.5);
+}
+h5 {
+  @include text-sm;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.375);
+}
+h6 {
+  @include text-sm;
+  @include font-normal;
+  text-transform: uppercase;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.375);
+}
+
+//////////////
+// Body text
+//////////////
+
+%body-type-block {
+  display: block;
+  margin-block-start: 0px;
+  margin-block-end: calc(var(--theme-font-size-base) * 1.125);
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  @include font-body;
+  @include text-base;
+  @include font-normal;
+  @include leading-normal;
+  @include text-primary;
+  -webkit-font-smoothing: antialiased;
+}
+
+p {
+  @extend %body-type-block;
+}
+
+ol,
+ul {
+  @extend %body-type-block;
+  padding-left: 2rem;
+  ol,
+  ul {
+    margin-block-end: 0;
+  }
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-underline-offset: 8%;
+}
+
+strong {
+  @include font-bold;
+}