diff --git a/res/css/_common.scss b/res/css/_common.scss
index ad64aced505..03442ca5103 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -16,6 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+@import "./_font-sizes.scss";
+
+:root {
+    font-size: 15px;
+}
+
 html {
     /* hack to stop overscroll bounce on OSX and iOS.
        N.B. Breaks things when we have legitimate horizontal overscroll */
@@ -25,7 +31,7 @@ html {
 
 body {
     font-family: $font-family;
-    font-size: 15px;
+    font-size: $font-15px;
     background-color: $primary-bg-color;
     color: $primary-fg-color;
     border: 0px;
@@ -60,7 +66,7 @@ b {
 h2 {
     color: $primary-fg-color;
     font-weight: 400;
-    font-size: 18px;
+    font-size: $font-18px;
     margin-top: 16px;
     margin-bottom: 16px;
 }
@@ -76,7 +82,7 @@ input[type=search],
 input[type=password] {
     padding: 9px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: 600;
     min-width: 0;
 }
@@ -253,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     color: $light-fg-color;
     z-index: 4012;
     font-weight: 300;
-    font-size: 15px;
+    font-size: $font-15px;
     position: relative;
     padding: 25px 30px 30px 30px;
     max-height: 80%;
@@ -321,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_title {
-    font-size: 22px;
-    line-height: 36px;
+    font-size: $font-22px;
+    line-height: $font-36px;
     color: $dialog-title-fg-color;
 }
 
@@ -350,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_content {
     margin: 24px 0 68px;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $primary-fg-color;
     word-wrap: break-word;
 }
@@ -446,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_TextInputDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
diff --git a/res/css/_components.scss b/res/css/_components.scss
index b959b1f1cd7..8706772ad97 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -1,5 +1,6 @@
 // autogenerated by rethemendex.sh
 @import "./_common.scss";
+@import "./_font-sizes.scss";
 @import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_CompatibilityPage.scss";
 @import "./structures/_ContextualMenu.scss";
diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss
new file mode 100644
index 00000000000..ad9e2e71039
--- /dev/null
+++ b/res/css/_font-sizes.scss
@@ -0,0 +1,63 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$font-8px: 0.533rem;
+$font-9px: 0.600rem;
+$font-10px: 0.667rem;
+$font-10-4px: 0.693rem;
+$font-11px: 0.733rem;
+$font-12px: 0.800rem;
+$font-13px: 0.867rem;
+$font-14px: 0.933rem;
+$font-15px: 1.000rem;
+$font-16px: 1.067rem;
+$font-17px: 1.133rem;
+$font-18px: 1.200rem;
+$font-19px: 1.267rem;
+$font-20px: 1.333rem;
+$font-21px: 1.400rem;
+$font-22px: 1.467rem;
+$font-23px: 1.533rem;
+$font-24px: 1.600rem;
+$font-25px: 1.667rem;
+$font-26px: 1.733rem;
+$font-27px: 1.800rem;
+$font-28px: 1.867rem;
+$font-29px: 1.933rem;
+$font-30px: 2.000rem;
+$font-31px: 2.067rem;
+$font-32px: 2.133rem;
+$font-33px: 2.200rem;
+$font-34px: 2.267rem;
+$font-35px: 2.333rem;
+$font-36px: 2.400rem;
+$font-37px: 2.467rem;
+$font-38px: 2.533rem;
+$font-39px: 2.600rem;
+$font-40px: 2.667rem;
+$font-41px: 2.733rem;
+$font-42px: 2.800rem;
+$font-43px: 2.867rem;
+$font-44px: 2.933rem;
+$font-45px: 3.000rem;
+$font-46px: 3.067rem;
+$font-47px: 3.133rem;
+$font-48px: 3.200rem;
+$font-49px: 3.267rem;
+$font-50px: 3.333rem;
+$font-51px: 3.400rem;
+$font-52px: 3.467rem;
+$font-400px: 26.667rem;
diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss
index fa2d87029dc..61070a05412 100644
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@@ -36,7 +36,7 @@ limitations under the License.
     background-color: $menu-bg-color;
     color: $primary-fg-color;
     position: absolute;
-    font-size: 14px;
+    font-size: $font-14px;
     z-index: 5001;
 }
 
diff --git a/res/css/structures/_CreateRoom.scss b/res/css/structures/_CreateRoom.scss
index 10f9e23a024..e859beb20e6 100644
--- a/res/css/structures/_CreateRoom.scss
+++ b/res/css/structures/_CreateRoom.scss
@@ -26,7 +26,7 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: $font-13px;
     padding: 9px;
     margin-top: 6px;
 }
diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index 87e885e668d..859ee280355 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -49,7 +49,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
     display: flex;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $event-timestamp-color;
 }
 
@@ -60,7 +60,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
     flex: 1 0 0;
-    font-size: 11px;
+    font-size: $font-11px;
     text-align: right;
     white-space: nowrap;
 }
@@ -80,7 +80,7 @@ limitations under the License.
     flex: 1 1 auto;
     line-height: initial;
     padding: 0px;
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 1.0;
     color: $event-timestamp-color;
 }
@@ -90,7 +90,7 @@ limitations under the License.
     text-align: right;
     visibility: visible;
     position: initial;
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 1.0;
     color: $event-timestamp-color;
 }
diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index 72a1132c15d..ed0cf121a4f 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -134,7 +134,7 @@ limitations under the License.
     overflow: hidden;
     color: $primary-fg-color;
     font-weight: bold;
-    font-size: 22px;
+    font-size: $font-22px;
     padding-left: 19px;
     padding-right: 16px;
     /* why isn't text-overflow working? */
@@ -148,7 +148,7 @@ limitations under the License.
     max-height: 42px;
     color: $settings-grey-fg-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: $font-13px;
     padding-left: 19px;
     margin-right: 16px;
     overflow: hidden;
@@ -196,7 +196,7 @@ limitations under the License.
     text-transform: uppercase;
     color: $h3-color;
     font-weight: 600;
-    font-size: 13px;
+    font-size: $font-13px;
     margin-bottom: 10px;
 }
 
@@ -226,7 +226,7 @@ limitations under the License.
 .mx_GroupView_rooms_header_addRow_label {
     display: inline-block;
     vertical-align: top;
-    line-height: 24px;
+    line-height: $font-24px;
     padding-left: 28px;
     color: $accent-color;
 }
@@ -258,7 +258,7 @@ limitations under the License.
 
 .mx_GroupView_membershipSection_description {
     /* To match textButton */
-    line-height: 34px;
+    line-height: $font-34px;
 }
 
 .mx_GroupView_membershipSection_description .mx_BaseAvatar {
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 85fdfa092d8..7d57425f6f3 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -147,7 +147,7 @@ limitations under the License.
     }
 
     .mx_AccessibleButton {
-        font-size: 14px;
+        font-size: $font-14px;
         margin: 4px 0 1px 9px;
         padding: 9px;
         padding-left: 42px;
diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss
index 36150c33a56..73f1332cd06 100644
--- a/res/css/structures/_MyGroups.scss
+++ b/res/css/structures/_MyGroups.scss
@@ -105,7 +105,7 @@ limitations under the License.
 .mx_MyGroups_placeholder {
     background-color: $info-plinth-bg-color;
     color: $info-plinth-fg-color;
-    line-height: 400px;
+    line-height: $font-400px;
     border-radius: 10px;
     text-align: center;
 }
@@ -149,11 +149,11 @@ limitations under the License.
 
 .mx_GroupTile_profile .mx_GroupTile_name {
     margin: 0px;
-    font-size: 15px;
+    font-size: $font-15px;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_groupId {
-    font-size: 13px;
+    font-size: $font-13px;
     opacity: 0.7;
 }
 
@@ -161,7 +161,7 @@ limitations under the License.
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    font-size: 13px;
+    font-size: $font-13px;
     max-height: 36px;
     overflow: hidden;
 }
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index c9e0261ec92..44205b1f011 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -39,7 +39,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_roomName {
     font-weight: bold;
-    font-size: 14px;
+    font-size: $font-14px;
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
@@ -54,7 +54,7 @@ limitations under the License.
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
     color: $primary-fg-color;
-    font-size: 12px;
+    font-size: $font-12px;
     display: inline;
     padding-left: 0px;
 }
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 3c373e88838..10878322e37 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -96,7 +96,7 @@ limitations under the License.
 }
 
 .mx_RightPanel_headerButton_badge {
-    font-size: 8px;
+    font-size: $font-8px;
     border-radius: 8px;
     color: $accent-fg-color;
     background-color: $accent-color;
diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
index f3a7b0e243d..e0814182f51 100644
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@@ -64,7 +64,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    font-size: 12px;
+    font-size: $font-12px;
     color: $primary-fg-color;
     width: 100%;
     text-align: left;
@@ -112,7 +112,7 @@ limitations under the License.
 
 .mx_RoomDirectory_name {
     display: inline-block;
-    font-size: 18px;
+    font-size: $font-18px;
     font-weight: 600;
 }
 
@@ -124,7 +124,7 @@ limitations under the License.
     border-radius: 10px;
     display: inline-block;
     height: 20px;
-    line-height: 20px;
+    line-height: $font-20px;
     padding: 0 5px;
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
@@ -136,7 +136,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_alias {
-    font-size: 12px;
+    font-size: $font-12px;
     color: $settings-grey-fg-color;
 }
 
@@ -150,7 +150,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory > span {
-    font-size: 15px;
+    font-size: $font-15px;
     margin-top: 0;
 
     .mx_AccessibleButton {
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index 090a40235f3..cd4390ee5cb 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -32,7 +32,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_callBar {
     height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;
 }
 
 .mx_RoomStatusBar_placeholderIndicator span {
@@ -94,7 +94,7 @@ limitations under the License.
     border-radius: 40px;
     width: 24px;
     height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
@@ -132,7 +132,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_connectionLostBar_desc {
     color: $primary-fg-color;
-    font-size: 13px;
+    font-size: $font-13px;
     opacity: 0.5;
     padding-bottom: 20px;
 }
@@ -145,7 +145,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_typingBar {
     height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;
 
     color: $primary-fg-color;
     opacity: 0.5;
@@ -155,7 +155,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_isAlone {
     height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;
 
     color: $primary-fg-color;
     opacity: 0.5;
@@ -174,11 +174,11 @@ limitations under the License.
 
     .mx_RoomStatusBar_callBar {
         height: 40px;
-        line-height: 40px;
+        line-height: $font-40px;
     }
 
     .mx_RoomStatusBar_typingBar {
         height: 40px;
-        line-height: 40px;
+        line-height: $font-40px;
     }
 }
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 1934e681c2a..2e0c94263e3 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -68,7 +68,7 @@ limitations under the License.
     text-transform: uppercase;
     color: $roomsublist-label-fg-color;
     font-weight: 700;
-    font-size: 12px;
+    font-size: $font-12px;
     margin-left: 8px;
 }
 
@@ -76,7 +76,7 @@ limitations under the License.
     flex: 0 0 auto;
     border-radius: 8px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
     padding: 0 5px;
     color: $roomtile-badge-fg-color;
     background-color: $roomtile-name-color;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 5e826306c6b..f2154ef4489 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -23,7 +23,7 @@ limitations under the License.
 .mx_RoomView_fileDropTarget {
     min-width: 0px;
     width: 100%;
-    font-size: 18px;
+    font-size: $font-18px;
     text-align: center;
 
     pointer-events: none;
@@ -186,7 +186,7 @@ limitations under the License.
 
 .mx_RoomView_empty {
     flex: 1 1 auto;
-    font-size: 13px;
+    font-size: $font-13px;
     padding-left: 3em;
     padding-right: 3em;
     margin-right: 20px;
diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
index 7904df5a828..4a4bb125a34 100644
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@@ -39,7 +39,7 @@ limitations under the License.
     cursor: pointer;
     display: block;
     border-radius: 3px;
-    font-size: 14px;
+    font-size: $font-14px;
     min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
     margin-bottom: 6px;
     position: relative;
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 472831c0d9d..f56b318e701 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -139,7 +139,7 @@ limitations under the License.
     background-color: $neutral-badge-color;
     color: #ffffff;
     font-weight: 600;
-    font-size: 10px;
+    font-size: $font-10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
@@ -157,7 +157,7 @@ limitations under the License.
     border-radius: 8px;
     color: $accent-fg-color;
     font-weight: 600;
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 0 5px;
     background-color: $roomtile-name-color;
 }
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index d1687743d6a..af595aaeee0 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -77,7 +77,7 @@ limitations under the License.
             grid-column: 1 / 3;
             grid-row: 1;
             margin: 0;
-            font-size: 15px;
+            font-size: $font-15px;
             font-weight: 600;
         }
 
@@ -96,11 +96,11 @@ limitations under the License.
             white-space: nowrap;
             text-overflow: ellipsis;
             margin: 4px 0 11px 0;
-            font-size: 12px;
+            font-size: $font-12px;
         }
 
         .mx_Toast_deviceID {
-            font-size: 10px;
+            font-size: $font-10px;
         }
     }
 }
diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss
index ee03978f184..53d44e7c249 100644
--- a/res/css/structures/_TopLeftMenuButton.scss
+++ b/res/css/structures/_TopLeftMenuButton.scss
@@ -32,7 +32,7 @@ limitations under the License.
 
 .mx_TopLeftMenuButton_name {
     margin: 0 7px;
-    font-size: 18px;
+    font-size: $font-18px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index b908861c6f1..421d1f03cd4 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -29,7 +29,7 @@ limitations under the License.
 
 .mx_ViewSource pre {
     text-align: left;
-    font-size: 12px;
+    font-size: $font-12px;
     padding: 0.5em 1em 0.5em 1em;
     word-wrap: break-word;
     white-space: pre-wrap;
diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss
index 601492d43c9..3050840fe8b 100644
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@@ -34,7 +34,7 @@ limitations under the License.
 }
 
 .mx_CompleteSecurity_body {
-    font-size: 15px;
+    font-size: $font-15px;
 }
 
 .mx_CompleteSecurity_waiting {
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 7c5b008535c..468a4b3d627 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_AuthBody {
     width: 500px;
-    font-size: 12px;
+    font-size: $font-12px;
     color: $authpage-secondary-color;
     background-color: $authpage-body-bg-color;
     border-radius: 0 4px 4px 0;
@@ -25,14 +25,14 @@ limitations under the License.
     box-sizing: border-box;
 
     h2 {
-        font-size: 24px;
+        font-size: $font-24px;
         font-weight: 600;
         margin-top: 8px;
         color: $authpage-primary-color;
     }
 
     h3 {
-        font-size: 14px;
+        font-size: $font-14px;
         font-weight: 600;
         color: $authpage-primary-color;
     }
@@ -98,7 +98,7 @@ limitations under the License.
 
 .mx_AuthBody_editServerDetails {
     padding-left: 1em;
-    font-size: 12px;
+    font-size: $font-12px;
     font-weight: normal;
 }
 
diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.scss
index 553adeee149..8deb0f80ac3 100644
--- a/res/css/views/auth/_AuthButtons.scss
+++ b/res/css/views/auth/_AuthButtons.scss
@@ -43,7 +43,7 @@ limitations under the License.
 
     cursor: pointer;
 
-    font-size: 15px;
+    font-size: $font-15px;
     padding: 0 11px;
     word-break: break-word;
 }
diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.scss
index ab169a6898f..0bc2743d544 100644
--- a/res/css/views/auth/_AuthFooter.scss
+++ b/res/css/views/auth/_AuthFooter.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_AuthFooter {
     text-align: center;
     width: 100%;
-    font-size: 14px;
+    font-size: $font-14px;
     opacity: 0.72;
     padding: 20px 0;
     background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss
index c7860fbe74d..46b7abe2cc2 100644
--- a/res/css/views/auth/_CompleteSecurityBody.scss
+++ b/res/css/views/auth/_CompleteSecurityBody.scss
@@ -24,13 +24,13 @@ limitations under the License.
     box-sizing: border-box;
 
     h2 {
-        font-size: 24px;
+        font-size: $font-24px;
         font-weight: 600;
         margin-top: 0;
     }
 
     h3 {
-        font-size: 14px;
+        font-size: $font-14px;
         font-weight: 600;
     }
 
diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.scss
index 6f7eac0cf6c..781561f8760 100644
--- a/res/css/views/auth/_LanguageSelector.scss
+++ b/res/css/views/auth/_LanguageSelector.scss
@@ -20,7 +20,7 @@ limitations under the License.
 
 .mx_AuthBody_language .mx_Dropdown_input {
     border: none;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: 600;
     color: $authpage-lang-color;
 }
diff --git a/res/css/views/auth/_ServerTypeSelector.scss b/res/css/views/auth/_ServerTypeSelector.scss
index ed781726b78..fbd3d2655de 100644
--- a/res/css/views/auth/_ServerTypeSelector.scss
+++ b/res/css/views/auth/_ServerTypeSelector.scss
@@ -65,5 +65,5 @@ limitations under the License.
 }
 
 .mx_ServerTypeSelector_description {
-    font-size: 10px;
+    font-size: $font-10px;
 }
diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss
index 308cecfe1e8..9697ac9bef6 100644
--- a/res/css/views/context_menus/_RoomTileContextMenu.scss
+++ b/res/css/views/context_menus/_RoomTileContextMenu.scss
@@ -38,7 +38,7 @@ limitations under the License.
     white-space: nowrap;
     display: flex;
     align-items: center;
-    line-height: 16px;
+    line-height: $font-16px;
 }
 
 .mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss
index 2c8d6089506..fceb7fba34c 100644
--- a/res/css/views/context_menus/_StatusMessageContextMenu.scss
+++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss
@@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message {
 .mx_StatusMessageContextMenu_clear {
     @mixin mx_DialogButton;
     align-self: start;
-    font-size: 12px;
+    font-size: $font-12px;
     padding: 6px 1em;
     border: 1px solid transparent;
     margin-right: 10px;
diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss
index 46b279ce2d2..e4ccc030a29 100644
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@@ -22,7 +22,7 @@ limitations under the License.
     white-space: nowrap;
     display: flex;
     align-items: center;
-    line-height: 16px;
+    line-height: $font-16px;
 }
 
 .mx_TagTileContextMenu_item object {
diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss
index ed0d0106bc5..973c3066959 100644
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ b/res/css/views/context_menus/_TopLeftMenu.scss
@@ -19,12 +19,12 @@ limitations under the License.
     border-radius: 4px;
 
     .mx_TopLeftMenu_greyedText {
-        font-size: 12px;
+        font-size: $font-12px;
         opacity: 0.5;
     }
 
     .mx_TopLeftMenu_upgradeLink {
-        font-size: 12px;
+        font-size: $font-12px;
 
         img {
             margin-left: 5px;
diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss
index 39a9260ba30..136e4979940 100644
--- a/res/css/views/dialogs/_AddressPickerDialog.scss
+++ b/res/css/views/dialogs/_AddressPickerDialog.scss
@@ -28,7 +28,7 @@ limitations under the License.
 .mx_AddressPickerDialog_input,
 .mx_AddressPickerDialog_input:focus {
     height: 26px;
-    font-size: 14px;
+    font-size: $font-14px;
     font-family: $font-family;
     padding-left: 12px;
     padding-right: 12px;
@@ -50,7 +50,7 @@ limitations under the License.
 .mx_AddressPickerDialog_inputContainer {
     border-radius: 3px;
     border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: $font-36px;
     padding-left: 4px;
     padding-right: 4px;
     padding-top: 1px;
diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
index b859d6bf4d4..823f4d1e28d 100644
--- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss
+++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
@@ -26,22 +26,22 @@ limitations under the License.
 }
 
 .mx_ConfirmUserActionDialog_name {
-    font-size: 18px;
+    font-size: $font-18px;
 }
 
 .mx_ConfirmUserActionDialog_userId {
-    font-size: 13px;
+    font-size: $font-13px;
 }
 
 .mx_ConfirmUserActionDialog_reasonField {
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
 
     border-radius: 3px;
     border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: $font-36px;
     padding-left: 16px;
     padding-right: 16px;
     padding-top: 1px;
diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss
index 128eacc3ce8..f7bfc61a986 100644
--- a/res/css/views/dialogs/_CreateGroupDialog.scss
+++ b/res/css/views/dialogs/_CreateGroupDialog.scss
@@ -25,7 +25,7 @@ limitations under the License.
 }
 
 .mx_CreateGroupDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
@@ -44,7 +44,7 @@ limitations under the License.
 .mx_CreateGroupDialog_prefix,
 .mx_CreateGroupDialog_suffix {
     padding: 0px 5px;
-    line-height: 37px;
+    line-height: $font-37px;
     background-color: $input-darker-bg-color;
     border: 1px solid $input-border-color;
     text-align: center;
diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index 7416ec2ef41..c542741c308 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -49,7 +49,7 @@ limitations under the License.
 }
 
 .mx_CreateRoomDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index 500c46b5fd0..35cb6bc7ab5 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -68,11 +68,11 @@ limitations under the License.
     width: 240px;
     color: $input-fg-color;
     font-family: $font-family;
-    font-size: 16px;
+    font-size: $font-16px;
 }
 
 .mx_DevTools_textarea {
-    font-size: 12px;
+    font-size: $font-12px;
     max-width: 684px;
     min-height: 250px;
     padding: 10px;
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 5e0893b8fdb..a77d0bfbbad 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -40,8 +40,8 @@ limitations under the License.
         textarea,
         textarea:focus {
             height: 34px;
-            line-height: 34px;
-            font-size: 14px;
+            line-height: $font-34px;
+            font-size: $font-14px;
             padding-left: 12px;
             margin: 0 !important;
             border: 0 !important;
@@ -65,7 +65,7 @@ limitations under the License.
         min-width: 48px;
         margin-left: 10px;
         height: 25px;
-        line-height: 25px;
+        line-height: $font-25px;
     }
 
     .mx_InviteDialog_buttonAndSpinner {
@@ -84,7 +84,7 @@ limitations under the License.
     padding-bottom: 10px;
 
     h3 {
-        font-size: 12px;
+        font-size: $font-12px;
         color: $muted-fg-color;
         font-weight: bold;
         text-transform: uppercase;
@@ -143,23 +143,23 @@ limitations under the License.
 
     .mx_InviteDialog_roomTile_name {
         font-weight: 600;
-        font-size: 14px;
+        font-size: $font-14px;
         color: $primary-fg-color;
         margin-left: 7px;
     }
 
     .mx_InviteDialog_roomTile_userId {
-        font-size: 12px;
+        font-size: $font-12px;
         color: $muted-fg-color;
         margin-left: 7px;
     }
 
     .mx_InviteDialog_roomTile_time {
         text-align: right;
-        font-size: 12px;
+        font-size: $font-12px;
         color: $muted-fg-color;
         float: right;
-        line-height: 36px; // Height of the avatar to keep the time vertically aligned
+        line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
     }
 
     .mx_InviteDialog_roomTile_highlight {
@@ -176,7 +176,7 @@ limitations under the License.
         border-radius: 12px;
         display: inline-block;
         height: 24px;
-        line-height: 24px;
+        line-height: $font-24px;
         padding-left: 8px;
         padding-right: 8px;
         color: #ffffff; // this is fine without a var because it's for both themes
diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
index 0066faccae5..e9d777effd3 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
@@ -35,7 +35,7 @@ limitations under the License.
 
 .mx_MessageEditHistoryDialog_edits {
     list-style-type: none;
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 0;
     color: $primary-fg-color;
 
@@ -60,7 +60,7 @@ limitations under the License.
     }
 
     .mx_MessageActionBar .mx_AccessibleButton {
-        font-size: 10px;
+        font-size: $font-10px;
         padding: 0 8px;
     }
 }
diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.scss
index 7e35fe941e9..b35c570c804 100644
--- a/res/css/views/dialogs/_NewSessionReviewDialog.scss
+++ b/res/css/views/dialogs/_NewSessionReviewDialog.scss
@@ -32,6 +32,6 @@ limitations under the License.
 }
 
 .mx_NewSessionReviewDialog_deviceID {
-    font-size: 12px;
+    font-size: $font-12px;
     color: $notice-secondary-color;
 }
diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss
index 9d09a208df9..37bee7a9ff3 100644
--- a/res/css/views/dialogs/_SetEmailDialog.scss
+++ b/res/css/views/dialogs/_SetEmailDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
     padding: 9px;
     color: $input-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
     width: 100%;
     max-width: 280px;
     margin-bottom: 10px;
diff --git a/res/css/views/dialogs/_SetMxIdDialog.scss b/res/css/views/dialogs/_SetMxIdDialog.scss
index f7d8a3d0011..1df34f34081 100644
--- a/res/css/views/dialogs/_SetMxIdDialog.scss
+++ b/res/css/views/dialogs/_SetMxIdDialog.scss
@@ -29,7 +29,7 @@ limitations under the License.
     padding: 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
     width: 100%;
     max-width: 280px;
 }
diff --git a/res/css/views/dialogs/_SetPasswordDialog.scss b/res/css/views/dialogs/_SetPasswordDialog.scss
index 325ff6c6edd..1f993532985 100644
--- a/res/css/views/dialogs/_SetPasswordDialog.scss
+++ b/res/css/views/dialogs/_SetPasswordDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
     padding: 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
     max-width: 280px;
     margin-bottom: 10px;
 }
diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss
index beb507e7787..939a31dee69 100644
--- a/res/css/views/dialogs/_TermsDialog.scss
+++ b/res/css/views/dialogs/_TermsDialog.scss
@@ -31,7 +31,7 @@ limitations under the License.
 }
 
 .mx_TermsDialog_termsTable {
-    font-size: 12px;
+    font-size: $font-12px;
     width: 100%;
 }
 
diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss
index 2b0f8dceca4..daa6bd23524 100644
--- a/res/css/views/dialogs/_UnknownDeviceDialog.scss
+++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss
@@ -27,7 +27,7 @@ limitations under the License.
 // userid
 .mx_UnknownDeviceDialog p {
     font-weight: bold;
-    font-size: 16px;
+    font-size: $font-16px;
 }
 
 .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
index 106392f880c..269b507e3cb 100644
--- a/res/css/views/directory/_NetworkDropdown.scss
+++ b/res/css/views/directory/_NetworkDropdown.scss
@@ -47,9 +47,9 @@ limitations under the License.
 
     .mx_NetworkDropdown_server_title {
         padding: 0 10px;
-        font-size: 15px;
+        font-size: $font-15px;
         font-weight: 600;
-        line-height: 20px;
+        line-height: $font-20px;
         margin-bottom: 4px;
 
         // remove server button
@@ -77,16 +77,16 @@ limitations under the License.
 
     .mx_NetworkDropdown_server_subtitle {
         padding: 0 10px;
-        font-size: 10px;
-        line-height: 14px;
+        font-size: $font-10px;
+        line-height: $font-14px;
         margin-top: -4px;
         margin-bottom: 4px;
         color: $muted-fg-color;
     }
 
     .mx_NetworkDropdown_server_network {
-        font-size: 12px;
-        line-height: 16px;
+        font-size: $font-12px;
+        line-height: $font-16px;
         padding: 4px 10px;
         cursor: pointer;
         position: relative;
@@ -154,7 +154,7 @@ limitations under the License.
 
     .mx_NetworkDropdown_handle_server {
         color: $muted-fg-color;
-        font-size: 12px;
+        font-size: $font-12px;
     }
 }
 
diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
index b87071745d4..0ee11869341 100644
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@@ -27,7 +27,7 @@ limitations under the License.
     text-align: center;
     border-radius: 4px;
     display: inline-block;
-    font-size: 14px;
+    font-size: $font-14px;
 }
 
 .mx_AccessibleButton_kind_primary {
diff --git a/res/css/views/elements/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss
index 0ecfb17c830..c42f52f8f4a 100644
--- a/res/css/views/elements/_AddressTile.scss
+++ b/res/css/views/elements/_AddressTile.scss
@@ -19,9 +19,9 @@ limitations under the License.
     border-radius: 3px;
     background-color: rgba(74, 73, 74, 0.1);
     border: solid 1px $input-border-color;
-    line-height: 26px;
+    line-height: $font-26px;
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: normal;
     margin-right: 4px;
 }
diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss
index 75ef3fbabd5..e4b1ac5574a 100644
--- a/res/css/views/elements/_DirectorySearchBox.scss
+++ b/res/css/views/elements/_DirectorySearchBox.scss
@@ -32,7 +32,7 @@ limitations under the License.
     background-repeat: no-repeat;
     text-indent: 18px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
     user-select: none;
     cursor: pointer;
 }
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
index 102ac56bf91..0dd9656c9c7 100644
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@@ -29,7 +29,7 @@ limitations under the License.
     position: relative;
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
-    font-size: 12px;
+    font-size: $font-12px;
     user-select: none;
 }
 
@@ -53,7 +53,7 @@ limitations under the License.
 
 .mx_Dropdown_option {
     height: 35px;
-    line-height: 35px;
+    line-height: $font-35px;
     padding-left: 8px;
     padding-right: 8px;
 }
diff --git a/res/css/views/elements/_EventListSummary.scss b/res/css/views/elements/_EventListSummary.scss
index 99a5c06a5f6..f3e9f77aa3d 100644
--- a/res/css/views/elements/_EventListSummary.scss
+++ b/res/css/views/elements/_EventListSummary.scss
@@ -19,7 +19,7 @@ limitations under the License.
 }
 
 .mx_TextualEvent.mx_EventListSummary_summary {
-    font-size: 14px;
+    font-size: $font-14px;
     display: inline-flex;
 }
 
@@ -27,7 +27,7 @@ limitations under the License.
     display: inline-block;
     margin-right: 8px;
     padding-top: 8px;
-    line-height: 12px;
+    line-height: $font-12px;
 }
 
 .mx_EventListSummary_avatars .mx_BaseAvatar {
@@ -46,19 +46,19 @@ limitations under the License.
 .mx_EventListSummary_line {
     border-bottom: 1px solid $primary-hairline-color;
     margin-left: 63px;
-    line-height: 30px;
+    line-height: $font-30px;
 }
 
 .mx_MatrixChat_useCompactLayout {
     .mx_EventListSummary {
-        font-size: 13px;
+        font-size: $font-13px;
         .mx_EventTile_line {
-            line-height: 20px;
+            line-height: $font-20px;
         }
     }
 
     .mx_EventListSummary_line {
-        line-height: 22px;
+        line-height: $font-22px;
     }
 
     .mx_EventListSummary_toggle {
@@ -66,6 +66,6 @@ limitations under the License.
     }
 
     .mx_TextualEvent.mx_EventListSummary_summary {
-        font-size: 13px;
+        font-size: $font-13px;
     }
 }
diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index b260d4b0974..cf5bc7ab417 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -40,7 +40,7 @@ limitations under the License.
 .mx_Field textarea {
     font-weight: normal;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     border: none;
     // Even without a border here, we still need this avoid overlapping the rounded
     // corners on the field above.
@@ -102,7 +102,7 @@ limitations under the License.
         background-color 0.25s ease-out 0.1s;
     color: $primary-fg-color;
     background-color: transparent;
-    font-size: 14px;
+    font-size: $font-14px;
     position: absolute;
     left: 0px;
     top: 0px;
@@ -126,7 +126,7 @@ limitations under the License.
         color 0.25s ease-out 0s,
         top 0.25s ease-out 0s,
         background-color 0.25s ease-out 0s;
-    font-size: 10px;
+    font-size: $font-10px;
     top: -13px;
     padding: 0 2px;
     background-color: $field-focused-label-bg-color;
diff --git a/res/css/views/elements/_FormButton.scss b/res/css/views/elements/_FormButton.scss
index 1483fe2091a..7ec01f17e6d 100644
--- a/res/css/views/elements/_FormButton.scss
+++ b/res/css/views/elements/_FormButton.scss
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 .mx_FormButton {
-    line-height: 16px;
+    line-height: $font-16px;
     padding: 5px 15px;
-    font-size: 12px;
+    font-size: $font-12px;
     height: min-content;
 
     &:not(:last-child) {
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 67b0d6d7df0..0a4ed2a194e 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -102,13 +102,13 @@ limitations under the License.
 }
 
 .mx_ImageView_name {
-    font-size: 18px;
+    font-size: $font-18px;
     margin-bottom: 6px;
     word-wrap: break-word;
 }
 
 .mx_ImageView_metadata {
-    font-size: 15px;
+    font-size: $font-15px;
     opacity: 0.5;
 }
 
@@ -118,13 +118,13 @@ limitations under the License.
     margin-bottom: 6px;
     border-radius: 5px;
     background-color: $lightbox-bg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 9px;
     border: 1px solid $lightbox-border-color;
 }
 
 .mx_ImageView_size {
-    font-size: 11px;
+    font-size: $font-11px;
 }
 
 .mx_ImageView_link {
@@ -133,7 +133,7 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    font-size: 15px;
+    font-size: $font-15px;
     opacity: 0.5;
     margin-top: 18px;
     cursor: pointer;
diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss
index 17a76436e82..db98d95709e 100644
--- a/res/css/views/elements/_InteractiveTooltip.scss
+++ b/res/css/views/elements/_InteractiveTooltip.scss
@@ -24,7 +24,7 @@ limitations under the License.
     background-color: $interactive-tooltip-bg-color;
     color: $interactive-tooltip-fg-color;
     position: absolute;
-    font-size: 10px;
+    font-size: $font-10px;
     font-weight: 600;
     padding: 6px;
     z-index: 5001;
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index 5066ee10f3a..e3f88cc779a 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -9,7 +9,7 @@
     border-radius: 16px;
     display: inline-block;
     height: 20px;
-    line-height: 20px;
+    line-height: $font-20px;
     padding-left: 5px;
 }
 
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index cc4eb409df0..73ac9b35589 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -58,8 +58,8 @@ limitations under the License.
     z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
     padding: 10px;
     pointer-events: none;
-    line-height: 14px;
-    font-size: 12px;
+    line-height: $font-14px;
+    font-size: $font-12px;
     font-weight: 600;
     color: $primary-fg-color;
     max-width: 200px;
@@ -82,7 +82,7 @@ limitations under the License.
     text-align: center;
     border: none;
     border-radius: 3px;
-    font-size: 14px;
+    font-size: $font-14px;
     line-height: 1.2;
     padding: 6px 8px;
 
diff --git a/res/css/views/elements/_TooltipButton.scss b/res/css/views/elements/_TooltipButton.scss
index 6ea36c800e7..0c85dac818e 100644
--- a/res/css/views/elements/_TooltipButton.scss
+++ b/res/css/views/elements/_TooltipButton.scss
@@ -28,7 +28,7 @@ limitations under the License.
     transition: opacity 0.2s ease-in;
     opacity: 0.6;
 
-    line-height: 11px;
+    line-height: $font-11px;
     text-align: center;
 
     cursor: pointer;
diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 5d9b3f2687c..24561eeeb99 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -163,7 +163,7 @@ limitations under the License.
 
 .mx_EmojiPicker_item {
     display: inline-block;
-    font-size: 20px;
+    font-size: $font-20px;
     padding: 5px;
     width: 100%;
     height: 100%;
@@ -183,7 +183,7 @@ limitations under the License.
 }
 
 .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
-    font-size: 16px;
+    font-size: $font-16px;
     font-weight: 600;
     margin: 0;
 }
@@ -197,7 +197,7 @@ limitations under the License.
 }
 
 .mx_EmojiPicker_preview_emoji {
-    font-size: 32px;
+    font-size: $font-32px;
     padding: 8px 16px;
 }
 
@@ -212,7 +212,7 @@ limitations under the License.
 
 .mx_EmojiPicker_shortcode {
     color: $light-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
 
     &::before, &::after {
         content: ":";
diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss
index 935ee1aba3e..867f58d860e 100644
--- a/res/css/views/messages/_DateSeparator.scss
+++ b/res/css/views/messages/_DateSeparator.scss
@@ -19,7 +19,7 @@ limitations under the License.
     margin: 4px 0;
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $roomtopic-color;
 }
 
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index c032051c36e..9f3971ecf04 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -21,7 +21,7 @@ limitations under the License.
     cursor: pointer;
     display: flex;
     height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
     border-radius: 4px;
     background: $message-action-bar-bg-color;
     top: -18px;
diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss
index e5c228aa68f..f8d91cc0833 100644
--- a/res/css/views/messages/_MessageTimestamp.scss
+++ b/res/css/views/messages/_MessageTimestamp.scss
@@ -16,5 +16,5 @@ limitations under the License.
 
 .mx_MessageTimestamp {
     color: $event-timestamp-color;
-    font-size: 10px;
+    font-size: $font-10px;
 }
diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss
index 57c02ed3e53..2f5695e1fbf 100644
--- a/res/css/views/messages/_ReactionsRow.scss
+++ b/res/css/views/messages/_ReactionsRow.scss
@@ -21,7 +21,7 @@ limitations under the License.
 
 .mx_ReactionsRow_showAll {
     text-decoration: none;
-    font-size: 10px;
+    font-size: $font-10px;
     font-weight: 600;
     margin-left: 6px;
     vertical-align: top;
diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index e54201d9631..941153ca5b9 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_ReactionsRowButton {
     display: inline-flex;
     height: 20px;
-    line-height: 21px;
+    line-height: $font-21px;
     margin-right: 6px;
     padding: 0 6px;
     border: 1px solid $reaction-row-button-border-color;
diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss
index a15924e7596..076932ee97b 100644
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_EventTile_content.mx_ViewSourceEvent {
     display: flex;
     opacity: 0.6;
-    font-size: 12px;
+    font-size: $font-12px;
 
     pre, code {
         flex: 1;
diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index 98e1e97e397..637d25d7a17 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -45,7 +45,7 @@ limitations under the License.
 
     .mx_cryptoEvent_title {
         font-weight: 600;
-        font-size: 15px;
+        font-size: $font-15px;
         grid-column: 2;
         grid-row: 1;
     }
@@ -56,7 +56,7 @@ limitations under the License.
     }
 
     .mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
-        font-size: 12px;
+        font-size: $font-12px;
     }
 
     .mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 0e4b1bda9e0..b45858e491d 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -20,7 +20,7 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     overflow-y: auto;
-    font-size: 12px;
+    font-size: $font-12px;
 
     .mx_UserInfo_cancel {
         cursor: pointer;
@@ -43,7 +43,7 @@ limitations under the License.
     }
 
     h2 {
-        font-size: 18px;
+        font-size: $font-18px;
         font-weight: 600;
         margin: 18px 0 0 0;
     }
@@ -122,7 +122,7 @@ limitations under the License.
         text-transform: uppercase;
         color: $notice-secondary-color;
         font-weight: bold;
-        font-size: 12px;
+        font-size: $font-12px;
         margin: 4px 0;
     }
 
@@ -134,8 +134,8 @@ limitations under the License.
         text-align: center;
 
         h2 {
-            font-size: 18px;
-            line-height: 25px;
+            font-size: $font-18px;
+            line-height: $font-25px;
             flex: 1;
             justify-content: center;
             align-items: center;
@@ -197,7 +197,7 @@ limitations under the License.
     .mx_UserInfo_field {
         cursor: pointer;
         color: $accent-color;
-        line-height: 16px;
+        line-height: $font-16px;
         margin: 8px 0;
 
         &.mx_UserInfo_destructive {
@@ -206,7 +206,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_statusMessage {
-        font-size: 11px;
+        font-size: $font-11px;
         opacity: 0.5;
         overflow: hidden;
         white-space: nowrap;
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 459622b277f..61654202753 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -95,7 +95,7 @@ limitations under the License.
             }
 
             .mx_VerificationPanel_QRPhase_helpText {
-                font-size: 14px;
+                font-size: $font-14px;
                 margin-top: 71px;
                 text-align: center;
             }
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index a3fe573ad01..1b1bab67bcf 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px;
     padding: 0;
     margin: 5px auto 5px auto;
     color: $accent-color;
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .mx_AddWidget_button_full_width {
@@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px;
     padding: 9px;
     color: $primary-hairline-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
 }
 
 .mx_AppTile {
@@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;
 
 .mx_AppTileMenuBar {
     margin: 0;
-    font-size: 12px;
+    font-size: $font-12px;
     background-color: $widget-menu-bar-bg-color;
     display: flex;
     flex-direction: row;
@@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 16px;
+    font-size: $font-16px;
 }
 
 .mx_AppPermissionWarning_row {
@@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
 }
 
 .mx_AppPermissionWarning_smallText {
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .mx_AppPermissionWarning_bolder {
diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
index ce519b1ea75..cc76623a8c4 100644
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -63,8 +63,8 @@ limitations under the License.
                 border-radius: 8px;
                 text-align: center;
                 font-weight: normal;
-                line-height: 16px;
-                font-size: 10.4px;
+                line-height: $font-16px;
+                font-size: $font-10-4px;
             }
         }
     }
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index a2867de3a7c..966d2c4e70b 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -78,7 +78,7 @@ limitations under the License.
 .mx_GroupRoomTile_name {
     flex: 1 1 0;
     overflow: hidden;
-    font-size: 14px;
+    font-size: $font-14px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -116,7 +116,7 @@ limitations under the License.
 }
 
 .mx_EntityTile_subtext {
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 0.5;
     overflow: hidden;
     white-space: nowrap;
@@ -125,7 +125,7 @@ limitations under the License.
 
 .mx_EntityTile_power {
     padding-inline-start: 6px;
-    font-size: 10px;
+    font-size: $font-10px;
     color: $notice-secondary-color;
     max-width: 6em;
     overflow: hidden;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 2fa99941559..9d798dcb200 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -19,7 +19,7 @@ limitations under the License.
     max-width: 100%;
     clear: both;
     padding-top: 18px;
-    font-size: 14px;
+    font-size: $font-14px;
     position: relative;
 }
 
@@ -64,7 +64,7 @@ limitations under the License.
 
 .mx_EventTile .mx_SenderProfile {
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     display: inline-block; /* anti-zalgo, with overflow hidden */
     overflow: hidden;
     cursor: pointer;
@@ -72,7 +72,7 @@ limitations under the License.
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
-    line-height: 17px;
+    line-height: $font-17px;
     /* the next three lines, along with overflow hidden, truncate long display names */
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -117,7 +117,7 @@ limitations under the License.
     padding-bottom: 2px;
     border-radius: 4px;
     min-height: 24px;
-    line-height: 22px;
+    line-height: $font-22px;
 }
 
 .mx_RoomView_timeline_rr_enabled {
@@ -312,7 +312,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_readAvatarRemainder {
     color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: $font-11px;
     position: absolute;
 }
 
@@ -341,7 +341,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_spoiler_reason {
     color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: $font-11px;
 }
 
 .mx_EventTile_spoiler_content {
@@ -393,7 +393,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }
 
 .mx_EventTile_keyRequestInfo {
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .mx_EventTile_keyRequestInfo_text {
@@ -471,7 +471,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_content .mx_EventTile_edited {
     user-select: none;
-    font-size: 12px;
+    font-size: $font-12px;
     color: $roomtopic-color;
     display: inline-block;
     margin-left: 9px;
@@ -489,7 +489,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     white-space: normal !important;
     line-height: inherit !important;
     color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
-    font-size: 14px;
+    font-size: $font-14px;
 
     pre, code {
         font-family: $monospace-font-family !important;
@@ -589,9 +589,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     .mx_EventTile.mx_EventTile_info {
         // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
         padding-top: 0px;
-        font-size: 13px;
+        font-size: $font-13px;
         .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: 20px;
+            line-height: $font-20px;
         }
         .mx_EventTile_avatar {
             top: 4px;
@@ -599,7 +599,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     }
 
     .mx_EventTile .mx_SenderProfile {
-        font-size: 13px;
+        font-size: $font-13px;
     }
 
     .mx_EventTile.mx_EventTile_emote {
diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss
index 7f458092fb9..63cf5745962 100644
--- a/res/css/views/rooms/_JumpToBottomButton.scss
+++ b/res/css/views/rooms/_JumpToBottomButton.scss
@@ -34,8 +34,8 @@ limitations under the License.
     top: -12px;
     border-radius: 16px;
     font-weight: bold;
-    font-size: 12px;
-    line-height: 14px;
+    font-size: $font-12px;
+    line-height: $font-14px;
     text-align: center;
     // to be able to get it centered
     // with text-align in parent
diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss
index 15b4832dc5d..71b05a93fc1 100644
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ b/res/css/views/rooms/_MemberDeviceInfo.scss
@@ -59,7 +59,7 @@ limitations under the License.
 
 .mx_MemberDeviceInfo_deviceId {
     word-break: break-word;
-    font-size: 13px;
+    font-size: $font-13px;
 }
 
 .mx_MemberDeviceInfo_deviceInfo {
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index e3f746e9d3f..fb082843f1a 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -48,7 +48,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo h2 {
-    font-size: 18px;
+    font-size: $font-18px;
     font-weight: 600;
     margin: 16px 0 16px 15px;
 }
@@ -94,12 +94,12 @@ limitations under the License.
     text-transform: uppercase;
     color: $input-darker-fg-color;
     font-weight: bold;
-    font-size: 12px;
+    font-size: $font-12px;
     margin: 4px 0;
 }
 
 .mx_MemberInfo_profileField {
-    font-size: 15px;
+    font-size: $font-15px;
     position: relative;
 }
 
@@ -109,10 +109,10 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     cursor: pointer;
-    font-size: 15px;
+    font-size: $font-15px;
     color: $primary-fg-color;
     margin-left: 8px;
-    line-height: 23px;
+    line-height: $font-23px;
 }
 
 .mx_MemberInfo_createRoom {
@@ -128,7 +128,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo label {
-    font-size: 13px;
+    font-size: $font-13px;
 }
 
 .mx_MemberInfo label .mx_MemberInfo_label_text {
@@ -144,7 +144,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_statusMessage {
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 0.5;
     overflow: hidden;
     white-space: nowrap;
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 6e4465583ca..99dc2338d41 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -30,7 +30,7 @@ limitations under the License.
         text-transform: uppercase;
         color: $h3-color;
         font-weight: 600;
-        font-size: 13px;
+        font-size: $font-13px;
         padding-left: 3px;
         padding-right: 12px;
         margin-top: 8px;
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index a05b4c0c0eb..7b223be3a4c 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -105,7 +105,7 @@ limitations under the License.
     min-height: 60px;
     justify-content: flex-start;
     align-items: flex-start;
-    font-size: 14px;
+    font-size: $font-14px;
     margin-right: 6px;
 }
 
@@ -161,7 +161,7 @@ limitations under the License.
     box-shadow: none;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     max-height: 120px;
     overflow: auto;
     /* needed for FF */
@@ -242,7 +242,7 @@ limitations under the License.
 
     flex-direction: row;
     align-items: center;
-    font-size: 10px;
+    font-size: $font-10px;
     color: $greyed-fg-color;
 }
 
diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
index 1b5a21bed0b..27ee7b97958 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -97,13 +97,13 @@ limitations under the License.
 
 .mx_MessageComposerFormatBar_buttonTooltip {
     white-space: nowrap;
-    font-size: 13px;
+    font-size: $font-13px;
     font-weight: 600;
     min-width: 54px;
     text-align: center;
 
     .mx_MessageComposerFormatBar_tooltipShortcut {
-        font-size: 9px;
+        font-size: $font-9px;
         opacity: 0.7;
     }
 }
diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss
index 26ed1aa6a3c..5be83c77d7c 100644
--- a/res/css/views/rooms/_PresenceLabel.scss
+++ b/res/css/views/rooms/_PresenceLabel.scss
@@ -15,6 +15,6 @@ limitations under the License.
 */
 
 .mx_PresenceLabel {
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 0.5;
 }
diff --git a/res/css/views/rooms/_RoomDropTarget.scss b/res/css/views/rooms/_RoomDropTarget.scss
index 1076a0563a3..2e8145c2c9f 100644
--- a/res/css/views/rooms/_RoomDropTarget.scss
+++ b/res/css/views/rooms/_RoomDropTarget.scss
@@ -28,7 +28,7 @@ limitations under the License.
 }
 
 .mx_RoomDropTarget {
-    font-size: 13px;
+    font-size: $font-13px;
     padding-top: 5px;
     padding-bottom: 5px;
     border: 1px dashed $accent-color;
@@ -41,7 +41,7 @@ limitations under the License.
 .mx_RoomDropTarget_label {
     position: relative;
     margin-top: 3px;
-    line-height: 21px;
+    line-height: $font-21px;
     z-index: 1;
     text-align: center;
 }
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 47b8131ef07..969106c9ea9 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -77,9 +77,9 @@ limitations under the License.
 }
 
 .mx_RoomHeader_simpleHeader {
-    line-height: 52px;
+    line-height: $font-52px;
     color: $roomheader-color;
-    font-size: 18px;
+    font-size: $font-18px;
     font-weight: 600;
     overflow: hidden;
     margin-left: 63px;
@@ -102,7 +102,7 @@ limitations under the License.
     overflow: hidden;
     color: $roomheader-color;
     font-weight: 600;
-    font-size: 18px;
+    font-size: $font-18px;
     margin: 0 7px;
     border-bottom: 1px solid transparent;
     display: flex;
@@ -161,7 +161,7 @@ limitations under the License.
     flex: 1;
     color: $roomtopic-color;
     font-weight: 400;
-    font-size: 13px;
+    font-size: $font-13px;
     margin: 0 7px;
     margin-top: 4px; // to align baseline of topic with room name
     overflow: hidden;
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 5ed22f997d1..50a9e7ee1fe 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -47,13 +47,13 @@ limitations under the License.
 }
 
 .mx_RoomList_emptySubListTip {
-    font-size: 13px;
+    font-size: $font-13px;
     padding: 5px;
     border: 1px dashed $accent-color;
     color: $primary-fg-color;
     background-color: $droptarget-bg-color;
     border-radius: 4px;
-    line-height: 16px;
+    line-height: $font-16px;
 }
 
 .mx_RoomList_emptySubListTip .mx_RoleButton {
diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index 981cf06c697..8708f13ada9 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -23,7 +23,7 @@ limitations under the License.
     -webkit-align-items: center;
 
     h3 {
-        font-size: 18px;
+        font-size: $font-18px;
         font-weight: 600;
 
         &.mx_RoomPreviewBar_spinnerTitle {
@@ -48,8 +48,8 @@ limitations under the License.
     }
 
     .mx_RoomPreviewBar_footer {
-        font-size: 12px;
-        line-height: 20px;
+        font-size: $font-12px;
+        line-height: $font-20px;
 
         .mx_Spinner {
             vertical-align: middle;
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 31d887cbbb6..7be2a4e3d44 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -64,7 +64,7 @@ limitations under the License.
 
 .mx_RoomTile_subtext {
     display: inline-block;
-    font-size: 11px;
+    font-size: $font-11px;
     padding: 0 0 0 7px;
     margin: 0;
     overflow: hidden;
@@ -112,7 +112,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_name {
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 0 4px;
     color: $roomtile-name-color;
     white-space: nowrap;
@@ -126,7 +126,7 @@ limitations under the License.
     padding: 0 0.4em;
     color: $roomtile-badge-fg-color;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .collapsed {
diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss
index b6748e5ad24..fecc8d78d85 100644
--- a/res/css/views/rooms/_SearchBar.scss
+++ b/res/css/views/rooms/_SearchBar.scss
@@ -22,7 +22,7 @@ limitations under the License.
 
     .mx_SearchBar_input {
         // border: 1px solid $input-border-color;
-        // font-size: 15px;
+        // font-size: $font-15px;
         flex: 1 1 0;
         margin-left: 22px;
     }
@@ -45,7 +45,7 @@ limitations under the License.
         border: 0;
         margin: 0 0 0 22px;
         padding: 5px;
-        font-size: 15px;
+        font-size: $font-15px;
         cursor: pointer;
         color: $primary-fg-color;
         border-bottom: 2px solid $accent-color;
diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss
index d20f7107b35..0b646666e70 100644
--- a/res/css/views/rooms/_SendMessageComposer.scss
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@@ -18,7 +18,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
-    font-size: 14px;
+    font-size: $font-14px;
     justify-content: center;
     margin-right: 6px;
     // don't grow wider than available space
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 579ea7e73ee..8b135152d65 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -49,7 +49,7 @@ limitations under the License.
     border-radius: 40px;
     width: 24px;
     height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
@@ -57,7 +57,7 @@ limitations under the License.
 
 .mx_WhoIsTypingTile_label {
     flex: 1;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: 600;
     color: $eventtile-meta-color;
 }
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 01a1d94956c..1fbfb359276 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -19,7 +19,7 @@ limitations under the License.
 }
 
 .mx_SettingsTab_heading {
-    font-size: 20px;
+    font-size: $font-20px;
     font-weight: 600;
     color: $primary-fg-color;
 }
@@ -29,7 +29,7 @@ limitations under the License.
 }
 
 .mx_SettingsTab_subheading {
-    font-size: 16px;
+    font-size: $font-16px;
     display: block;
     font-family: $font-family;
     font-weight: 600;
@@ -40,7 +40,7 @@ limitations under the License.
 
 .mx_SettingsTab_subsectionText {
     color: $settings-subsection-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     display: block;
     margin: 10px 100px 10px 0; // Align with the rest of the view
 }
@@ -61,7 +61,7 @@ limitations under the License.
 .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
     vertical-align: middle;
     display: inline-block;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $primary-fg-color;
     max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
     box-sizing: border-box;
diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.scss
index e00dcf31d15..1d0e3ea8c56 100644
--- a/res/css/views/terms/_InlineTermsAgreement.scss
+++ b/res/css/views/terms/_InlineTermsAgreement.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_InlineTermsAgreement_cbContainer {
     margin-bottom: 10px;
-    font-size: 14px;
+    font-size: $font-14px;
 
     a {
         color: $accent-color;
diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss
index 5038d40b739..6e26943640b 100644
--- a/res/css/views/verification/_VerificationShowSas.scss
+++ b/res/css/views/verification/_VerificationShowSas.scss
@@ -48,14 +48,14 @@ limitations under the License.
 }
 
 .mx_VerificationShowSas_emojiSas_emoji {
-    font-size: 32px;
+    font-size: $font-32px;
 }
 
 .mx_VerificationShowSas_emojiSas_label {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    font-size: 12px;
+    font-size: $font-12px;
 }
 
 .mx_VerificationShowSas_emojiSas_break {
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index b01fbf8c66e..4650f30c1d2 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -21,5 +21,5 @@ limitations under the License.
     text-align: center;
     padding: 6px;
     font-weight: bold;
-    font-size: 13px;
+    font-size: $font-13px;
 }
diff --git a/res/css/views/voip/_IncomingCallbox.scss b/res/css/views/voip/_IncomingCallbox.scss
index 64eac25d013..ed33de470d4 100644
--- a/res/css/views/voip/_IncomingCallbox.scss
+++ b/res/css/views/voip/_IncomingCallbox.scss
@@ -54,7 +54,7 @@ limitations under the License.
     vertical-align: middle;
     width: 80px;
     height: 36px;
-    line-height: 36px;
+    line-height: $font-36px;
     border-radius: 36px;
     color: $accent-fg-color;
     margin: auto;
diff --git a/res/themes/dark-custom/css/dark-custom.scss b/res/themes/dark-custom/css/dark-custom.scss
index aff647ce264..03ceef45c66 100644
--- a/res/themes/dark-custom/css/dark-custom.scss
+++ b/res/themes/dark-custom/css/dark-custom.scss
@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
 @import "../../light/css/_paths.scss";
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_light.scss";
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index bfa2272283b..5d6ba033c89 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -185,7 +185,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
     border: 0px;
     border-radius: 4px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $button-fg-color;
     background-color: $button-bg-color;
     width: auto;
diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss
index e7ae7c8cf8e..d81db4595f4 100644
--- a/res/themes/dark/css/dark.scss
+++ b/res/themes/dark/css/dark.scss
@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
 @import "../../light/css/_paths.scss";
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_light.scss";
diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss
index 278ca5f0b15..4f80647ebad 100644
--- a/res/themes/light-custom/css/light-custom.scss
+++ b/res/themes/light-custom/css/light-custom.scss
@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
 @import "../../light/css/_paths.scss";
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_light.scss";
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 9bdd712e072..f5f30133540 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -310,7 +310,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
     border: 0px;
     border-radius: 4px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $button-fg-color;
     background-color: $button-bg-color;
     width: auto;
@@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 
 @define-mixin mx_DialogButton_small {
     @mixin mx_DialogButton;
-    font-size: 15px;
+    font-size: $font-15px;
     padding: 0px 1.5em 0px 1.5em;
 }
 
diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss
index 6acb2d9d947..4f485576483 100644
--- a/res/themes/light/css/light.scss
+++ b/res/themes/light/css/light.scss
@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
 @import "_paths.scss";
 @import "_fonts.scss";
 @import "_light.scss";