diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index ce0cfd61..1f27086e 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'functions';
 
 @mixin widget-shadow-base {
   border-radius: $default-border-radius;
@@ -59,3 +60,61 @@
     @content
   }
 }
+
+@mixin main-title {
+  font-family: $sans-serif-font-family;
+  font-weight: 700;
+  font-size: toRem(64px);
+}
+
+@mixin heading-1 {
+  font-family: $sans-serif-font-family;
+  font-weight: 600;
+  font-size: toRem(44px);
+}
+
+@mixin heading-2 {
+  font-family: $sans-serif-font-family;
+  font-weight: 600;
+  font-size: toRem(34px);
+}
+
+@mixin heading-3 {
+  font-family: $sans-serif-font-family;
+  font-weight: 600;
+  font-size: toRem(22px);
+}
+
+@mixin heading-4 {
+  font-family: $sans-serif-font-family;
+  font-weight: 600;
+  font-size: toRem(18px);
+}
+
+@mixin regular-text {
+  font-family: $sans-serif-font-family;
+  font-weight: 400;
+  font-size: toRem(18px);
+}
+
+@mixin small-text {
+  font-family: $sans-serif-font-family;
+  font-weight: 400;
+  font-size: toRem(16px);
+}
+
+@mixin meta-title {
+  font-family: $serif-font-family;
+  font-size: toRem(42px);
+}
+
+@mixin lead-paragraph {
+  font-family: $serif-font-family;
+  line-height: 1.4;
+  font-size: toRem(26px);
+}
+
+@mixin regular-paragraph {
+  font-family: $serif-font-family;
+  font-size: toRem(18px);
+}