add typography system

src/components/Theme/@types/component.ts

@@ -8,7 +8,7 @@ interface Scale {
   'size-6': string,
 }
 
-interface Fontface {
+interface Typeface {
   'display': string,
   'serif': string,
   'sans-serif': string,
@@ -42,14 +42,14 @@ interface Font {
 
 export interface Theme {
   scale: Scale,
-  fontface: Fontface
+  typeface: Typeface
   colour: Colour,
   font: Font;
 };
 
 export interface CustomTheme {
   scale?: Partial<Scale>,
-  fontface?: Partial<Fontface>,
+  typeface?: Partial<Typeface>,
   colour?: Partial<Colour>,
   font?: Partial<Font>
 }

src/components/Theme/themes/dark.js

@@ -2,6 +2,7 @@
 export default {
   scale: {
     'size-base': 1.375,
+    'size-base-mobile': 1.25,
     'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
     'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
     'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',
@@ -9,7 +10,7 @@ export default {
     'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)',
     'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)',
   },
-  fontface: {
+  typeface: {
     display: 'Knowledge, sans-serif',
     serif: 'freight-book, serif',
     'sans-serif': 'Knowledge, sans-serif',
@@ -17,10 +18,10 @@ export default {
       'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
   },
   font: {
-    'family-hed': 'var(--theme-fontface-display)',
+    'family-hed': 'var(--theme-typeface-display)',
-    'family-subhed': 'var(--theme-fontface-sans-serif)',
+    'family-subhed': 'var(--theme-typeface-sans-serif)',
-    'family-body': 'var(--theme-fontface-serif)',
+    'family-body': 'var(--theme-typeface-serif)',
-    'family-note': 'var(--theme-fontface-sans-serif)',
+    'family-note': 'var(--theme-typeface-sans-serif)',
     'size-hed': 'var(--theme-scale-size-1)',
     'size-subhed-1': 'var(--theme-scale-size-2)',
     'size-subhed-2': 'var(--theme-scale-size-3)',

src/components/Theme/themes/light.js

@@ -1,6 +1,7 @@
 export default {
   scale: {
     'size-base': 1.375,
+    'size-base-mobile': 1.125,
     'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
     'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
     'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',
@@ -8,7 +9,7 @@ export default {
     'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)',
     'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)',
   },
-  fontface: {
+  typeface: {
     display: 'Knowledge, sans-serif',
     serif: 'freight-book, serif',
     'sans-serif': 'Knowledge, sans-serif',
@@ -16,10 +17,10 @@ export default {
       'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
   },
   font: {
-    'family-hed': 'var(--theme-fontface-display)',
+    'family-hed': 'var(--theme-typeface-display)',
-    'family-subhed': 'var(--theme-fontface-sans-serif)',
+    'family-subhed': 'var(--theme-typeface-sans-serif)',
-    'family-body': 'var(--theme-fontface-serif)',
+    'family-body': 'var(--theme-typeface-serif)',
-    'family-note': 'var(--theme-fontface-sans-serif)',
+    'family-note': 'var(--theme-typeface-sans-serif)',
     'size-hed': 'var(--theme-scale-size-1)',
     'size-subhed-1': 'var(--theme-scale-size-2)',
     'size-subhed-2': 'var(--theme-scale-size-3)',

src/docs/scss/css-variables.stories.mdx

@@ -58,20 +58,21 @@ Read more about how to override or define your own CSS variables in the [Themes]
 | `--theme-font-size-note-3`       | Dateline/Caption (`.foot-note > p`)  font size                         |
 
 
-### Font faces
+### Typefaces (Fonts)
 
 | CSS variable                     | Role                            |
 | -------------------------------- | ------------------------------- |
-| `--theme-fontface-display`       | Base display font family        |
+| `--theme-typeface-display`       | Base display font family        |
-| `--theme-fontface-serif`         | Base serif font family          |
+| `--theme-typeface-serif`         | Base serif font family          |
-| `--theme-fontface-sans-serif`    | Base sans-serif font family     |
+| `--theme-typeface-sans-serif`    | Base sans-serif font family     |
-| `--theme-fontface-monospace`     | Base monospace font family      |
+| `--theme-typeface-monospace`     | Base monospace font family      |
 
 ### Size scale
 
 | CSS variable                     | Role                            |
 | -------------------------------- | ------------------------------- |
 | `--theme-scale-size-base`        | Scale factor for base body size |
+| `--theme-scale-size-base-mobile` | Scale factor for smaller screens|
 | `--theme-scale-size-1`           | Size level 1                    |
 | `--theme-scale-size-2`           | Size level 2                    |
 | `--theme-scale-size-3`           | Size level 3                    |

src/scss/_variables.scss

@@ -1,2 +1,2 @@
-@import "fonts/variables";
+@import 'fonts/variables';
-@import "typography/variables";
+@import 'typography_old/variables';

src/scss/main.scss

@@ -1,3 +1,11 @@
+/**
+ * Styles for svelte components
+ * Custom grid system
+ * Colour and typography systems using CSS variable from Theme
+ * Utility classes for quick styling
+ * 🄯2023 Reuters Graphics Style Guide
+ */
+
 @import 'fonts/font-faces';
 
 // Variables
@@ -11,6 +19,9 @@
 
 // Styles
 @import 'fonts/rules';
-@import 'typography/rules';
+@import 'typography_old/rules';
-@import 'typography/main';
+@import 'typography_old/main';
 @import 'spacers/rules';
+
+/* TYPOGRAPHY */
+@import 'typography/main';

src/scss/mixins/_body-text.scss

@@ -1,6 +1,6 @@
 @import '../fonts/mixins';
 @import '../fonts/variables';
-@import '../typography/font-size';
+@import '../typography_old/font-size';
 @import '../colours/thematic/tr';
 
 @mixin body-text {
@@ -14,6 +14,7 @@
   blockquote {
     color: var(--theme-colour-text-primary, $tr-dark-grey);
   }
+
   p,
   ul li,
   ul li p,
@@ -67,6 +68,7 @@
     padding-left: 1.75rem;
     list-style-type: square;
   }
+
   p + ul {
     margin-top: -0.75rem;
   }

src/scss/typography/_classes.scss

@@ -0,0 +1,74 @@
+/* FONT SIZE CLASSES */
+.font-size-1 {
+  @include font-size-1($i: true);
+}
+
+.font-size-2 {
+  @include font-size-2($i: true);
+}
+
+.font-size-3 {
+  @include font-size-3($i: true);
+}
+
+.font-size-4 {
+  @include font-size-4($i: true);
+}
+
+.font-size-5 {
+  @include font-size-5($i: true);
+}
+
+.font-size-6 {
+  @include font-size-6($i: true);
+}
+
+/* TYPEFACE CLASSES */
+.typeface-display {
+  @include typeface-display($i: true);
+}
+
+.typeface-serif {
+  @include typeface-serif($i: true);
+}
+
+.typeface-sans-serif {
+  @include typeface-sans-serif($i: true);
+}
+
+.typeface-monospace {
+  @include typeface-monospace($i: true);
+}
+
+/* FONT STYLE TOKEN CLASSES */
+.font-hed {
+  @include font-hed($i: true);
+}
+
+.font-subhed-1 {
+  @include font-subhed-1($i: true);
+}
+
+.font-subhed-2 {
+  @include font-subhed-2($i: true);
+}
+
+.font-subhed-3 {
+  @include font-subhed-3($i: true);
+}
+
+.font-body {
+  @include font-body($i: true);
+}
+
+.font-note-1 {
+  @include font-note-1($i: true);
+}
+
+.font-note-2 {
+  @include font-note-2($i: true);
+}
+
+.font-note-3 {
+  @include font-note-3($i: true);
+}

src/scss/typography/_font-faces.scss

@@ -0,0 +1,117 @@
+/* REUTERS KNOWLEDGE */
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Knowledge Ultra Light'), local('KnowledgeUltraLight'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeUltraLight.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Knowledge Light'), local('KnowledgeLight'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeLight.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Knowledge Regular'), local('KnowledgeRegular'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegular.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Knowledge Regular Italic'), local('KnowledgeRegularItalic'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegularItalic.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Knowledge Medium'), local('KnowledgeMedium'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeMedium.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Knowledge Bold'), local('KnowledgeBold'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Knowledge Bold Italic'), local('KnowledgeBoldItalic'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeBoldItalic.woff')
+      format('woff');
+}
+
+/* SOURCE SANS PRO */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Regular.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Semibold.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Bold.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Italic.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Light.woff')
+      format('woff');
+}
+
+/* FREIGHT BOOK */
+@font-face {
+  font-family: 'freight-book';
+  font-style: normal;
+  font-weight: normal;
+  src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff')
+    format('woff');
+}

src/scss/typography/_main.scss

@@ -1,5 +1,14 @@
-@import 'box-shadow';
+/** 
-@import 'font-size';
+ * Default typography styles for Reuters Graphics projects
-@import 'letter-spacing';
+ * Uses sizes and typeface declarations from CSS variables defined in the Theme
-@import 'text-shadow';
+ * Knowlege, Source Sans Pro and Freight Book font declarations
-@import 'transform';
+ * Includes Font size levels from 1 to 6
+ * Includes Font families for display, serif, sans-serif and monospace text
+ * Includes predefined responsive style tokens for hed, subheads(3), body and note(3) text
+ * 🄯2023 Reuters Graphics
+ */
+
+@import 'font-faces';
+@import 'mixins';
+@import 'classes';
+@import 'rules';

src/scss/typography/_mixins.scss

@@ -1,26 +1,117 @@
-@import "variables";
+/* FONT SIZE MIXINS */
+@mixin font-size-1($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-scale-size-1) #{$important};
+}
 
-// Font sizes
+@mixin font-size-2($i: false) {
-@mixin font-size-xs { font-size: $font-size-xs; }
+  $important: if($i, '!important', '');
+  font-size: var(--theme-scale-size-2) #{$important};
+}
 
-@mixin font-size-sm { font-size: $font-size-sm; }
+@mixin font-size-3($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-scale-size-3) #{$important};
+}
 
-@mixin font-size-base { font-size: $font-size-base; }
+@mixin font-size-4($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-scale-size-4) #{$important};
+}
 
-@mixin font-size-article { font-size: $font-size-article; }
+@mixin font-size-5($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-scale-size-5) #{$important};
+}
 
-@mixin font-size-lg { font-size: $font-size-lg; }
+@mixin font-size-6($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-scale-size-6) #{$important};
+}
 
-@mixin font-size-xl { font-size: $font-size-xl; }
+/* TYPEFACE MIXINS */
+@mixin typeface-display($i: false) {
+  $important: if($i, '!important', '');
+  font-family: var(--theme-typeface-display) #{$important};
+}
 
-@mixin font-size-2xl { font-size: $font-size-2xl; }
+@mixin typeface-serif($i: false) {
+  $important: if($i, '!important', '');
+  font-family: var(--theme-typeface-serif) #{$important};
+}
 
-@mixin font-size-3xl { font-size: $font-size-3xl; }
+@mixin typeface-sans-serif($i: false) {
+  $important: if($i, '!important', '');
+  font-family: var(--theme-typeface-sans-serif) #{$important};
+}
 
+@mixin typeface-monospace($i: false) {
+  $important: if($i, '!important', '');
+  font-family: var(--theme-typeface-monospace) #{$important};
+}
 
-// Font weights
+/* FONT STYLE TOKEN MIXINS */
-@mixin font-weight-light { font-weight: $font-weight-light; }
+@mixin font-hed($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-font-size-hed) #{$important};
+  font-family: var(--theme-font-family-hed) #{$important};
+  font-weight: 500 #{$important};
+  line-height: 1.14 #{$important};
+}
 
-@mixin font-weight-normal { font-weight: $font-weight-normal; }
+@mixin font-subhed-1($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-font-size-subhed-1) #{$important};
+  font-family: var(--theme-font-family-subhed) #{$important};
+  font-weight: 700 #{$important};
+  line-height: 1.14 #{$important};
+}
 
-@mixin font-weight-bold { font-weight: $font-weight-bold; }
+@mixin font-subhed-2($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-font-size-subhed-2) #{$important};
+  font-family: var(--theme-font-family-subhed) #{$important};
+  font-weight: 700 #{$important};
+  line-height: 1.28 #{$important};
+}
+
+@mixin font-subhed-3($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-font-size-subhed-3) #{$important};
+  font-family: var(--theme-font-family-subhed) #{$important};
+  font-weight: 500 #{$important};
+  line-height: 1.4 #{$important};
+  text-transform: uppercase #{$important};
+}
+
+@mixin font-body($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-font-size-body) #{$important};
+  font-family: var(--theme-font-family-body) #{$important};
+  font-weight: 400 #{$important};
+  line-height: 1.5 #{$important};
+}
+
+@mixin font-note-1($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-font-size-note-1) #{$important};
+  font-family: var(--theme-font-family-note) #{$important};
+  font-weight: 300 #{$important};
+  line-height: 1.4 #{$important};
+}
+
+@mixin font-note-2($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-font-size-note-2) #{$important};
+  font-family: var(--theme-font-family-note) #{$important};
+  font-weight: 300 #{$important};
+  line-height: 1.4 #{$important};
+}
+
+@mixin font-note-3($i: false) {
+  $important: if($i, '!important', '');
+  font-size: var(--theme-font-size-note-3) #{$important};
+  font-family: var(--theme-font-family-note) #{$important};
+  font-weight: 400 #{$important};
+  line-height: 1.4 #{$important};
+}

src/scss/typography/_rules.scss

@@ -1,83 +1,60 @@
-@use "sass:math";
+/* RESPONSIVE SCALING */
-@import "variables";
+@media (max-width: 510px) {
-@import "mixins";
+  div.theme {
-@import "../mixins";
+    --theme-scale-size-base: var(--theme-scale-size-base-mobile);
-
+  }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @include font-display;
-
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
 }
 
-h1 {
+/* SET DEFAULT STYLES */
-  font-size: $h1-font-size;
-  margin-bottom: math.div($h1-font-size, 2);
 
-  &:not(:first-child) {
+h1 {
-    margin-top: $h1-font-size;
+  @include font-hed;
-  }
 }
 
 h2 {
-  font-size: $h2-font-size;
+  @include font-subhed-1;
-  margin-bottom: math.div($h2-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h2-font-size;
-  }
 }
 
 h3 {
-  font-size: $h3-font-size;
+  @include font-subhed-2;
-  margin-bottom: math.div($h3-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h3-font-size;
-  }
-}
-
-h4 {
-  font-size: $h4-font-size;
-  margin-bottom: math.div($h4-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h4-font-size;
-  }
-}
-
-h5 {
-  font-size: $h5-font-size;
-  margin-bottom: math.div($h5-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h5-font-size;
-  }
 }
 
+h4,
+h5,
 h6 {
-  font-size: $h6-font-size;
+  @include font-subhed-3;
-  margin-bottom: math.div($h6-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h6-font-size;
-  }
 }
 
 p {
-  @include font-serif;
+  @include font-body;
-
-  font-size: $font-size-article;
-  margin-bottom: $font-size-article;
 }
 
-small {
+.body-text {
-  font-size: $font-size-sm;
+  p {
+    @include font-body;
+  }
+}
+
+.body-note {
+  @include font-note-1;
+
+  p {
+    @include font-note-1;
+  }
+}
+
+.end-note {
+  @include font-note-2;
+
+  p {
+    @include font-note-2;
+  }
+}
+
+.foot-note {
+  @include font-note-3;
+
+  p {
+    @include font-note-3;
+  }
 }

src/scss/typography_old/_font-size.scss

@@ -8,7 +8,7 @@
     line-height: 1.75rem;
   }
 
-  @media(max-width: 540px) {
+  @media (max-width: 540px) {
     font-size: 1.1rem;
     line-height: 1.8rem;
 
@@ -28,7 +28,7 @@
       line-height: 1.8rem !important;
     }
 
-    @media(max-width: 540px) {
+    @media (max-width: 540px) {
       font-size: 1.1rem !important;
       line-height: 1.8rem !important;
 
@@ -44,7 +44,7 @@
   font-size: 0.9rem;
   line-height: 1.2rem;
 
-  @media(max-width: 540px) {
+  @media (max-width: 540px) {
     font-size: 0.8rem;
     line-height: 1.1rem;
   }
@@ -53,7 +53,7 @@
     font-size: 0.9rem !important;
     line-height: 1.2rem !important;
 
-    @media(max-width: 540px) {
+    @media (max-width: 540px) {
       font-size: 0.8rem !important;
       line-height: 1.1rem !important;
     }
@@ -64,7 +64,7 @@
   font-size: 1.6rem;
   line-height: 2.1rem;
 
-  @media(max-width: 540px) {
+  @media (max-width: 540px) {
     font-size: 1.3rem;
     line-height: 1.9rem;
   }
@@ -73,7 +73,7 @@
     font-size: 1.6rem !important;
     line-height: 2rem !important;
 
-    @media(max-width: 540px) {
+    @media (max-width: 540px) {
       font-size: 1.3rem !important;
       line-height: 1.8rem !important;
     }

src/scss/typography_old/_main.scss

@@ -0,0 +1,5 @@
+@import 'box-shadow';
+@import 'font-size';
+@import 'letter-spacing';
+@import 'text-shadow';
+@import 'transform';

src/scss/typography_old/_mixins.scss

@@ -0,0 +1,47 @@
+@import 'variables';
+
+// Font sizes
+@mixin font-size-xs {
+  font-size: $font-size-xs;
+}
+
+@mixin font-size-sm {
+  font-size: $font-size-sm;
+}
+
+@mixin font-size-base {
+  font-size: $font-size-base;
+}
+
+@mixin font-size-article {
+  font-size: $font-size-article;
+}
+
+@mixin font-size-lg {
+  font-size: $font-size-lg;
+}
+
+@mixin font-size-xl {
+  font-size: $font-size-xl;
+}
+
+@mixin font-size-2xl {
+  font-size: $font-size-2xl;
+}
+
+@mixin font-size-3xl {
+  font-size: $font-size-3xl;
+}
+
+// Font weights
+@mixin font-weight-light {
+  font-weight: $font-weight-light;
+}
+
+@mixin font-weight-normal {
+  font-weight: $font-weight-normal;
+}
+
+@mixin font-weight-bold {
+  font-weight: $font-weight-bold;
+}

src/scss/typography_old/_rules.scss

@@ -0,0 +1,82 @@
+@use 'sass:math';
+@import 'variables';
+@import 'mixins';
+@import '../mixins';
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include font-display;
+
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
+}
+
+h1 {
+  font-size: $h1-font-size;
+  margin-bottom: math.div($h1-font-size, 2);
+
+  &:not(:first-child) {
+    margin-top: $h1-font-size;
+  }
+}
+
+h2 {
+  font-size: $h2-font-size;
+  margin-bottom: math.div($h2-font-size, 2);
+
+  &:not(:first-child) {
+    margin-top: $h2-font-size;
+  }
+}
+
+h3 {
+  font-size: $h3-font-size;
+  margin-bottom: math.div($h3-font-size, 2);
+
+  &:not(:first-child) {
+    margin-top: $h3-font-size;
+  }
+}
+
+h4 {
+  font-size: $h4-font-size;
+  margin-bottom: math.div($h4-font-size, 2);
+
+  &:not(:first-child) {
+    margin-top: $h4-font-size;
+  }
+}
+
+h5 {
+  font-size: $h5-font-size;
+  margin-bottom: math.div($h5-font-size, 2);
+
+  &:not(:first-child) {
+    margin-top: $h5-font-size;
+  }
+}
+
+h6 {
+  font-size: $h6-font-size;
+  margin-bottom: math.div($h6-font-size, 2);
+
+  &:not(:first-child) {
+    margin-top: $h6-font-size;
+  }
+}
+
+p {
+  @include font-serif;
+
+  font-size: $font-size-article;
+  margin-bottom: $font-size-article;
+}
+
+small {
+  font-size: $font-size-sm;
+}