diff --git a/assets/css/010_typography.css b/assets/css/010_typography.css
index 27874e2..8ca730b 100644
--- a/assets/css/010_typography.css
+++ b/assets/css/010_typography.css
@@ -35,11 +35,14 @@
 {{- end }}
 
 :root {
-  --font-family-body: system-ui, Arial, sans-serif;
   /* --font-family-heading: "rockwell", serif; */
-  --font-family-heading: "merriweather", Georgia, serif;
+  --font-family-sans: system-ui, Arial, sans-serif;
+  --font-family-serif: "merriweather", Georgia, serif;
   --font-family-monospace: "source-code-pro", monospace;
 
+  --font-family-body: var(--font-family-sans);
+  --font-family-heading: var(--font-family-serif);
+
   --text-base-size: 125%;
   --text-base: {{ $base }}{{ $unit }};
   {{ range $scale -}}
@@ -52,6 +55,9 @@
 {{ range $scale }}
 .text--{{ .Name }} { font-size: var(--text-{{ .Name }}); }
 {{- end }}
+.text--mono { font-family: var(--font-family-monospace); }
+.text--serif { font-family: var(--font-family-serif); }
+.text--sans { font-family: var(--font-family-sans); }
 
 
 html {
@@ -100,12 +106,6 @@ p, pre {
   font-size: var(--text-m);
 }
 
-figcaption, small {
-  font-size: var(--text-s);
-  letter-spacing: 0.01em;
-  line-height: 1;
-}
-
 sup {
   font-size: 60%;
 }
@@ -119,3 +119,13 @@ sup {
 .subtitle {
   font-weight: lighter;
 }
+
+figcaption,
+small,
+.text--small
+{
+  color: var(--gray4);
+  font-weight: normal;
+  font-size: var(--text-s);
+  letter-spacing: 0.01em;
+}